MEMBUAT MENU DAN SUB MENU PADA BLOGSPOT

LANGKAH-LANGKAH MEMBUAT MENU DAN SUB MENU

PADA BLOGSPOT

Dalam membuat blog tentunya perlu variasi di segala sisi, misalnya dengan menambah widget sebagai hiasan blog agar pengunjung tidak bosan, lagu blog agar pengunjung dapat menikmati lagu sambil berselancar di blog kita, dan lain-lain. Tidak kalah penting Menu dan Sub Menu pada suatu blog mesti harus ada agar pengunjung bisa dengan mudah menentukan sesuatu yang dibutuhkan dalam suatu kategori, berikut contoh cara pemasangannya.

Langkah Pemasangan
- Masuk/Login Ke Blog

- Klik  Desain 

- Pilih  Template lalu pilih  Edit HTML 

- Pilih/klik  Lanjutkan

- Pilih/klik  Expand Template Widget

Cari scrift berikut :

<div class='main-outer'>atau
<div id='main-wrapper'> atau 
<div id='main'>

Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi: 

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
  <li><a href='http://www.muhsinun76.blogspot.com'>HOME</a></li>
<li><a href='https://www.blogger.com/profile/18427022743381972389'>SAYA</a></li>
<li><a href='http://www.muhsinun76.blogspot.com'>FAMILY</a><ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>RELIGI</a>
<ul id='sub-custom-nav'>
<li><a href='#'>بسم الله الرحمنن الرحيم</a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>
<li><a href='#'></a></li>

</ul>
</li>
<li><a href='#'>ARTIKEL</a>
<ul id='sub-custom-nav'>
<li><a href='http://www.muhsinun76.blogspot.com/2014/11/hari-ulang-tahun-guru-ri-ke-69.html'>HUT GURU RI</a></li>
<li><a href='http://muhsinun76.blogspot.com/2014/09/wajah-baru-mtsn-lubuk-mukti.html'>MTsN LB MUKTI</a></li>
<li><a href='http://muhsinun76.blogspot.com/2014/01/hari-amal-bhakti-kementerian-agama-ke.html'>HAB KEMENAG MUKOMUKO</a></li>
<li><a href='http://muhsinun76.blogspot.com/2013/03/contoh-ptk_7.html'>CONTOH PTK</a></li>
<li><a href='http://muhsinun76.blogspot.com/2013/02/sepatah-kata-untuk-teman.html'>SEPATAH UNTUK TEMANKU</a></li>
<li><a href='http://muhsinun76.blogspot.com/2013/01/frustasi-dan-stres-oleh-muhsinun.html'>FRUSTASI DAN STRESS</a></li>
<li><a href='http://muhsinun76.blogspot.com/2013/01/pembelajaran-di-pondok-pesantren_18.html'>PEMBELAJARAN PESANTREN</a></li>
<li><a href='http://muhsinun76.blogspot.com/2012/12/bab-i-pendahuluan-a.htm'>METODE TUTOR SEBAYA</a></li>
<li><a href='#'>Sub Menu3F</a></li>
</ul>
</li>
<li><a href='#'>BERITA</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b</a></li>
</ul>
</li>
<li><a href='#'>TIPS-TRIK</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu5</a></li>
<li><a href='#'>Sub Menu5A</a></li>
<li><a href='#'>Sub Menu5B</a></li>
<li><a href='#'>Sub Menu5C</a></li>
<li><a href='#'>Sub Menu5D</a></li>
<li><a href='#'>Sub Menu5E</a></li>
<li><a href='#'>Sub Menu5F</a></li>
</ul>
</li>
<li><a href='#'>HIBURAN</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub MenuAA</a></li>
<li><a href='#'>Sub MenuAB</a></li>
<li><a href='#'>Sub MenuAC</a></li>
<li><a href='#'>Sub MenuAD</a></li>
<li><a href='#'>Sub MenuAE</a></li>
<li><a href='#'>Sub MenuAF</a></li>
<li><a href='#'>Sub MenuAG</a></li>
</ul>
</li>
<li><a href='#'>DOWNLOAD</a>
<ul id='sub-custom-nav'>
<li><a href='http://downloads.ziddu.com/download/24217562/Tesis-Gabungan1.docx.html'>tesis</a></li>
<li><a href='http://downloads.ziddu.com/download/24213730/RAPORT-K13-MTsN-Lubuk-Mukti.xls.html'>Raport K13</a></li>
<li><a href='http://downloads.ziddu.com/download/24213746/Mars-Madrasah-Ok.mp3.html'>MARS MADRASAH</a></li>
<li><a href='http://downloads.ziddu.com/download/24213748/hymne-madrasah-ok.mp3.html'>HYMNE MADRASAH</a></li>
<li><a href='#'>Sub Menu5C</a></li>
<li><a href='#'>Sub Menu5D</a></li>
<li><a href='#'>Sub Menu5E</a></li>
</ul>
</li>
<li><a href='#'/></li>
</ul>
</div>

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . 

- Lalu simpanlah/save.


Sumber:
http://kanginanjaya.blogspot.com/