sponsor

sponsor

Slider

Materi dan Tutorial Khusus Untuk Membuat Situs Web Dan Blog Bagi Pemula Hingga Tingkat Mahir. Gambar tema oleh kelvinjay. Diberdayakan oleh Blogger.

Posts

Recent Tube

Business

Technology

Life & style

Games

Sports

Fashion

» » » » » » » » » Cara membuat sub menu ringan sangat di sidebar blog

Cara membuat sub menu ringan sangat di sidebar blog


menu sidebar









   


Pertama : Login dulu ke blog anda

Kedua : Pilih Tata Letak

Ketiga : Tambahkan Gadget Kemudian pilih HTML/Java Script

Keempat : Copy dan Paste script di bawah 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://www.jahetbungas.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://jahetbungas.blogspot.com/2013/04/cara-membuat-sub-menu-ringan-sangat-di_23.html"><i><code>Get Widget</code></i></a>

KETERANGAN :
Warna biru = Silahkan di ganti sesuai keinginan
Warna ungu = Isikan dengan Script yang ingin di sisipkan
Warna hijau = 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. Jika anda ingin mengganti Recent Post dengan yang lain gantilah yang berwarna merah dengan keinginan anda silahkan dihapus saja script recent postnya. Semoga Berhasil

«
Next
Posting Lebih Baru
»
Previous
Posting Lama