Kumpulan Cara Membuat Menu Pada Blog dengan Sangat Mudah

Agldcnet - Kumpulan Cara Membuat Menu Pada Blog dengan Sangat Mudah, untuk para blogger tentunya sudah tidak asing lagi dengan yang namanya Menu, setiap hari blogging pasti urusannya dengan Menu satu ini, tapi terkadang para blogger tidak puas dengan tampilan Menu pada Blog yang hanya begitu-begitu saja yang sederhana dan simpel, nah trus bagaimana dong Cara Membuat Menu di Blog yang keren?

Berikut ini ada beberapa Cara Membuat Menu pada Blog untuk mempercantik tampilan blog kita, ada Menu Tab View, Menu Scroller dan banyak lagi, tapi yang akan mimin bahas saat ini hanya 3 bentuk menu saja yaitu Menu Scroll, Menu Tab View dan Menu Drop Down pada Blog, yang tentunya akan mempercantik tampilan Blog Kita.

Untuk Kumpulan Menu ini, saya mengambil dari beberapa referensi yang memang banyak orang sudah menggunakan menu ini dan mungkin banyak disukai dikalangan Bloggers, karna memang materinya di halaman utam smua, jadi tidak ada salahnya saya repost dan mengumpulkannya jadi satu, biar para bloggers tidak kesusahan , baiklah untuk Kumpulan Menunya silahkan simak berikut ini ya :


Menu Dropdown sumber : panduantemplateblog[dot]blogspot.com

1. Masuk ke akun blogger anda
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]></b:skin>
4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>

#navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }
#navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }
#navdropdownse { margin: 0; padding: 0; }
#navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }
#navdropdownse li { list-style: none; margin: 0; padding: 0; }
#navdropdownse li a, #navdropdownse li a:link, #navdropdownse li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; }
#navdropdownse li a:hover, #navdropdownse li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }
#navdropdownse li li a, #navdropdownse li li a:link, #navdropdownse li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }
#navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }
#navdropdownse li { float: left; padding: 0; }
#navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#navdropdownse li ul a { width: 140px; }
#navdropdownse li ul ul { margin: -32px 0 0 171px; }
#navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }
#navdropdownse li:hover ul, #navdropdownse li li:hover ul, #navdropdownse li li li:hover ul, #navdropdownse li.sfhover ul, #navdropdownse li li.sfhover ul, #navdropdownse li li li.sfhover ul { left: auto; }
#navdropdownse li:hover, #navdropdownse li.sfhover { position: static; }

5. Cari kode dengan struktur seperti berikut ini

<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>

6. Letakkan kode berikut tepat dibawah kode </b:section> diatas

<div class='menuhorisontal'>
<ul id='navdropdownse'>
<li><a href='#'>Menu DropDown</a></li>
<li><a href='#'>Menu DropDown A</a>
<ul>
<li><a href='#'>Menu DropDown Sub A1</a></li>
<li><a href='#'>Menu DropDown Sub A2</a></li>
<li><a href='#'>Menu DropDown Sub A3</a></li></ul></li>
<li><a href='#'>Menu DropDown B</a> </li>
<li><a href='#'>Menu DropDown C</a> </li>
<li><a href='#'>Menu DropDown D</a>
<ul>
<li><a href='#'>Menu DropDown Sub D1</a></li>
<li><a href='#'>Menu DropDown Sub D2</a></li>
<li><a href='#'>Menu DropDown Sub D3</a></li></ul></li>
<li><a href='#'>Menu DropDown E</a> </li>
</ul>
</div>

7. Simpan Template, dab selesai

Nah Untuk Menu Tab View Pada Blog, berikut ini script nya...

Menu Tab View Pada Blog sumber : www.maskolis.com
Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

Tambahkan Kode berikut ini di Add Widget

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
konten 1
</div>
</div>
<div class="Page">
<div class="Pad">
konten 2
</div>
</div>
<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>
<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:
Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan berwarna orange merupakan warna judul Tab
Tulisan berwarna hijau merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Nah itu tadi kumpulan Cara Membuat Menu Pada Blog, semoga bisa bermanfaat ya...

Tweet