Cara dan Fungsi Membuat 3 Sub Menu Side Bar di Blog

Cara dan Fungsi Membuat 3 Sub Menu Side Bar di Blog -

Hay sobat ilmuane11 Kali ini saya Menulis artikel yang berjudul
Cara dan Fungsi Membuat 3 Sub Menu Side Bar di Blog . yang sebelumnya saya sudah menulis Artikel Cara dan Fungsi Memasang Slide Box Di Pojok Kanan Bawah Lagi lagi widget Sub Menu Side Bar ini benar benar membuat Blog kita terkesan rapih dan enak di lihat , Cara ini mempermudah kita untuk membuat blog menjadi teratur , menurut saya cara ini juga lebih meringankan loading blog sehingga membuat pengunjung terasa nyaman saat mengklik - klik isi blog sobat

Fungsi Sub Menu Side Bar :

Sub Menu Side Bar tentu saja membuat blog sobat menjadi lebih teratur , sehingga pengunjung bisa dengan cepat mengetahui apa saja yang ada di tampilan blog kita, Okeh tanpa perlu basa basi yang panjang langsung saja sahabat ikuti langkah berikut ini :

SS Sub Menu Side Bar :

Langkah langkah Memasang Sub Menu Side Bar :

1. Login dulu ke blog sobat .
2. Kemudian buka tata letak dan pilih Tambah gadget.
3. Setelah itu pilih HTML/Java Script.
4. Kemudian copy script dibawah ini ,

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView

div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
//Tabs
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
//Pages
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
//Functions
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Recent Post</a>
<a>MENU 2</a>
<a>MENU 3</a>
</div>
<div style="width:298px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<div style="overflow:auto; width:autopx; max-height:autopx; padding:autopx;">
<style>
img.recent_thumb {padding-right:20px;padding-left:padding-bottom:0px;0px;width:50px;height:5opx;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:11px;font-color:green;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:0px;padding-left:0px;padding-right:0px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:10px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="http://ilmuane11.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script></div>
</div>
</div>
<div class="Page">
<div class="Pad">
MENU 2 = ISI DENGAN SCRIPT ANDA
</div>
</div>
<div class="Page">
<div class="Pad">
MENU 3 = ISI DENGAN SCRIPT ANDA
</div>
</div>
</div>
</div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><a href="http://ilmuane11.blogspot.com/2013/12/cara-dan-fungsi-membuat-3-sub-menu-side.html"><i><code>Get Widget</code></i></a>

5. kalau sudah langsung aja simpan dan lihat hasilnya .

Hasilnya akan terlihat seperti di bawah ini :

SS Sub Menu Side Bar :

Note : Warna Coklat => Itu contoh menu rcent , Ganti sesuai keinginan Sobat
            Warna Biru     => Isikan dengan Script yang ingin di sisipkan
          Warna Hitam => Ganti dengan alamat blog anda
              Warna Merah => script Recent Post Disana saya hanya mengkosongkan
                                            MENU 2 dan MENU 3 sedangkan MENU 1 saya isikan dengan
                                          Recent Post Otomatis .

Itulah tutorial Cara dan Fungsi Membuat 3 Sub Menu Side Bar di Blog , Thanks

Dunia Aneh
Kumpulan Artikel Unik dan Aneh sepanjang Masa
Catatan dosen

Tips Android dan BBM
Kumpulan Ulasan tentang Tips Android dan BBM
Putera Dosen

Meme Lucu Banget
Kumpulan Meme Lucu yang lagi ngetren
Cds Blog

Kumpulan Artikel Menarik
Semua Artikel yang Kamu Cari Ada di sini
230 Penulis
Ads by BLOGGER

Posted by Very Handika

Cara dan Fungsi Membuat 3 Sub Menu Side Bar di Blog