Cara Membuat Menu Horizontal Berwarna-warni

Tips ini tentunya akan membuat blog semakin menarik dan terlihat lebih ceria dari sebelumnya, jadi silahkan sobat simak dan terapkan agar blog sobat semakin keren dengan penampilan menu yang penuh warna.

Untuk bisa menerapkan tips ini terlebih dahulu sobat harus mengaktifkan menu laman pada blog sobat dan pastikan pengaturan laman pada posisi tab atas, berikut penjelasanya :

1. Setelah sobat masuk ke akun blogger silahkan sobat masuk ke menu laman dan pilih pada bagian pengaturan Tab atas
2. Contoh laman yang bisa dibuat sebagai halaman statis maupun halaman postingan, baik dari url blog itu sendiri maupun url dari blog lain

Jika laman blogger telah aktif langkah selanjutnya adalah dengan menambahkan kode CSS dan CLASS pada template HTML, berikut penjelasanya :

• Silahkan sobat masuk ke Edit Template dan cari kode <li class='selected' expr:id='data:link.title'> (gunakan Ctrl+F untuk mempercepat pencarian)
• Pada HTML defult blogger kode lengkapnya kurang lebih seperti dibawah ini

<li class='selected' expr:id='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li> <b:else/> <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

• Ganti kode defult blogger diatas dengan kode dibawah ini

<li class='selected'><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li> <b:else/> <li><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>

• Langkah berikutnya adalah membuat atau menambahkan CLASS dan background pada kode CSS, berikut contohnya

li a.Home{background:green;}
li a.Tips Blogger{background:blue;}
li a.Teknik SEO{background:orange;}
li a.Widget{background:brown;}
.tabs .widget-content ul li a{
color:yellow;
text-shadow:1px 1px 1px #000;
transition:background-color 0.6s,color 1s;
-o-transition:background-color 0.6s,color 1s;
-ms-transition:background-color 0.6s,color 1s;
-moz-transition:background-color 0.6s,color 1s;
-webkit-transition:background-color 0.6s,color 1s;
}
 .tabs .widget-content ul li:hover a{
background:#000;
color:#02e7fb;
}

Keterangan :

1. li a.Home » class "Home" diperoleh dari menu pertama yang title-nya "Home". 
2. li a.Tips Blogger » class "Tips Blogger" diperoleh dari title tab menu "Tips Blogger". Sobat bisa sesuaikan dengan judul laman blog sobat sebagai class.
3. li a.Teknik SEO » class "Teknik SEO" diperoleh dari title tab menu "Teknik SEO. Sobat bisa sesuaikan dengan judul laman blog sobat sebagai class.
4. li a.Widget » class "Widget" diperoleh dari title tab menu "Widget". Sobat bisa sesuaikan dengan judul laman blog sobat sebagai class.

• Sobat bisa tentukan warna background sesuai keinginan dan tentunya dengan bahasa inggris
• Letakkan kode CSS di atas tepat dibawah atau sesudah kode ]]></b:skin>
• Langkah terakhir silahkan sobat lihat secara "pratinjau" jika tidak ada masalah silahkan sobat save template.

Jika sobat berhasil membuat menu horizontal berwarna-warni jangan lupa ucapkan alhamdulillah sebagai rasa syukur dan jika tidak berhasil jangan lupa ucapkan astaghfirullah seraya mengulangi langkah-langkah diatas secara cermat dan sabar sampai berhasil :)

Selamat mencoba...

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit