Menunggu...

Cara Membuat Menu Horizontal Berwarna-warni

Cara Membuat Menu Horizontal Berwarna-warni

Blogger pemula akan berbagi tips 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 :

Cara Membuat Menu Horizontal Berwarna-warni


  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...
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 47 komentar:

avatar

keren juga nih menu nya,, kapan-kapan ane coba deh

avatar

makasih gan tutorialnya udah dishare

avatar

keren banget nich infonya,,, perlu dicoba! sangat cocok utk pemula sprti saya :)
makasih sharenya mas,,, (c)

avatar

Silahkan dicicipi, :)

avatar

Sama-sama sob, semoga bermanfaat.. (o)

avatar

Terimakasih saudari Indri semoga bermanfaat.. cheer

avatar

Menarik juga ya menu nya. Jadi mirip warna pelangi. Bisa tambah cantik blog nya ya mas :)

avatar

cocoknya buat blog cewek nih mbak :-d

avatar

jadi inget gethuk trio =p~

avatar

Tambah keren aja blog sama tutor nya nih mas :)

avatar

saya juga suka warna warni lho

avatar

menarik dan bikin mata enak memandang nih mas

avatar

cocok untuk blog cowok cewek kang. Kalau untuk cewek saja, kasihan yang cowok nanti pada galau hehehe :D

avatar

hehehe mbak ririn bisa aja

avatar

All : Tergantung selera masing-masing :) maaf nih baru sempat ol.. (c)

avatar

hahaha ya jadi inget kampung halaman kang..

avatar

Terimakasih sob.. :)

avatar

Iya silahkan dicoba sob, salam kenal.. :) (c)

avatar

Thanks ya mas...untuk tutorialnya :-b

avatar

cantik bewarna-warni.. bagus sharing nya.. :D

avatar

semakin berwarna dong blog nya hehe.. :D semakin menarik dan menambah betah visitor :)

avatar

tuh kan kembali ke selera masing-masing

avatar

sama-sama sob, semoga bermanfaat.. :)

avatar

Sahabat Intan => ya sob biar visitor makin betah :))

avatar

gak ada demo nya gan?
tp keliatan dari gambar nya keren juga..
thanks ilmu nya ya gan.. ijin follow blog nya ya :)

avatar

Ya halaman demonya belum ada :) silahkan and salam kenal..

avatar

Widiiihhh...tab menu horizontalnya keren banget sob, warna warni jadi keliatan menarik ya!
Jadi kepincut juga nie pengen coba praktekin, thanks ya udah berbagi tutorialnya :)

avatar

Gimana kalo buat waria? cocok ga tuh :d apa warna yg belang2 kali ya =))

avatar

mudik kalau begitu mas, mumpung mau lebaran nich hehe :)

avatar

yang penting jangan ikut nginep ya mas hehe :D

avatar

wow keren juga yah menunya berwarna-warni jadi keren keliatannya, makasih sob :)

avatar

sensi banget sih mba sama saya ckck :p

avatar

doreng lebih cocok kayaknya, macho dan feminim

avatar

Ok terimaksih juga sahabat Marnes..

avatar

Ya blog jadi semakin hidup penuh warna..

avatar

yang penting jangan sampai kepincut sama admin nya mas hehehe :D

avatar

Tapi masih keren admin nya lho hehe :)

avatar

Adminya ngumpet sist karena gak PD sama penampilanya....

avatar

Bisa bahaya ya sist..

avatar

Waduuuuh....jeruk makan jeruk donk! ;((

avatar

cocok ga ya untuk blog saya? heheheh... :)

avatar

Cocok mba buat variasi agar tidak terlalu seram, hehehe... :))

avatar

gan kapan2 bagi trik buat bikin bordir pada menu berbeda warna hehe... keren gan..

avatar

*thinking..
Itu gmn yaa mas kalo misalkan bukan buat blog tapi buat latihan2 biasa, apa sama kayak gt jg caranya?? ^newbie nih soalnya

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda