Tabs Menu Horizontal

Sebelum kita mulai membahas artikel ini, Vey ingin mengucapkan Selamat Idul Fitri 1431 H…. Minal ‘Aidin Wal-Faizin…., dan Vey mohon di bukakan pintu maaf sebesar-besarnya apa bila ada kesalahan yang telah Vey perbuat yang di sengaja maupun yang tidak di sengaja.
Bila semua kesalahan yang telah Vey perbuat dimaafkan Sobat semua, mari kita mulai membahas artikel ini.

Menubar yang kita lihat pada sebuah website tidak hanya berguna untuk mempermudah pengunjung membuka halaman-halaman tertentu, tapi juga bisa memberi nilai lebih terhadap estetika pada website tersebut. Begitu pula dengan menu horizontal yang dapat membuat website kita menjadi lebih ergonomis dan terlihat lebih keren. Tapi bagaimana dengan blogspot? Memang pada template blogspot standart, fasilitas ini tidak terdapat didalamnya. Namun, kita tidak perlu berkecil hati sebab kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

1. Buka halaman Dasboard blog kamu, lalu klik Design kemudian pindah ke halaman Edit Html
2. Biasakanlah untuk selalu men-back up template blog kamu. Sehingga apabila terjadi kesalahan, kamu dapat memulihkannya kembali dengan mengunduh template blog kamu.
3. Beri centang pada Expand Template's Widget dengan mengkliknya.
4. Coba cari code di bawah ini, yang berada di dalam tag Header-Wraper :

      <b:include name='description'/>     </div>   </b:if> </b:includable> </b:widget> </b:section>     </div>

5. Lalu copy struktur HTML berikut tepat di bawah code yang ada pada langkah 5.

<ul id='navi'> <li><a href='http://www.veyruzt.co.cc'>Home</a></li> <li><a href='http://www.veyruzt.co.cc/search/label/Tutorial%20Blogspot' title='tutorial blogspot'>Blogspot Tutor</a></li> <li><a href='http://www.veyruzt.co.cc/search/label/widget%20and%20Trick'>Widget &amp; Tricks</a></li> <li><a href='http://www.veyruzt.co.cc/search/label/Free%20Blogspot%20Templates' title='Free Blogspot Templates'>Free Blogspot Templates</a></li> </ul>

6. Copy juga code CSS berikut di atas code ]]></b:skin>

/* navigation ----------------------------------------------- */ #navi {   font: normal normal 100% 'Courier New', Courier, FreeMono, monospace;   list-style: none;   width:960px;   margin:15px; }    #navi li {   display: inline;   font-size: 18px;   letter-spacing: 2px;font-weight:bold;   } #navi a {   color:#DED8C0;   padding: 7px 20px;   Text-decoration:none;   background: #28261A;   border-radius: 10px;   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   } #navi li a:hover {    color:black;   text-decoration: none;   text-shadow: 0 0 10px white;   border:2px ridge white; }

7. Setelah semuanya telah selesai, coba klik preview untuk mengetest hasilnya. Jika Tidak ada masalah pada saat ditest, klik save.

Kamu dapat mengubah warna tulisan, background, bentuk text dan lain sebagainya, agar Tabs Menu terlihat lebih keren dengan mengedit code CSS di atas.
Selamat mencoba dan jangan lupa komentarnya