October 25, 2012

Cara Membuat Menu Pada Blog


Hello sobat blogger !!!,

Hmm pada posting kali ini saya akan share tutorial mengenai Cara membuat menu pada Blog, karena banyaknya yang menanyakan tutorial ini untuk itu saya putuskan untuk men-share ke blog saya itung-itung berbagi dan update blog hehehehhe. kembali ke topik postingan, fungsi dari menu pada blog ini adalah untuk mempermudah pengunjung blog untuk menjelajahi isi dari artikel sobat. dan style atau gaya ataupun tampilan yang saya share disini berwarna hitam dengan garis merah dibawahnya ya dari pada penasaran silahkan check sendiri,  ok dari pada basa basi ga jelas dan ga bermutu langsung saja ke tutorial mengenai Cara membuat menu pada Blog

pertama masuk ke bagian edit template sobat, kemudian cari kode ]]></b:skin> ( gunakan F3 agar mempercepat pencarian )
bila sobat sudah menemukan ]]></b:skin> selanjutnya sisipkan kode dibawah ini tepat di atas ]]></b:skin>

ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("http://2.bp.blogspot.com/-umuM1wnuz40/TcuRP2rASsI/AAAAAAAAAdY/ubN3m056CUs/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("http://2.bp.blogspot.com/-umuM1wnuz40/TcuRP2rASsI/AAAAAAAAAdY/ubN3m056CUs/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
kemudian save template.

hal selanjutnya adalah masuk ke bagian tata letak atau tempat menambahkan widget, dan hal terakhir adalah sisipkan kode dibawah ini dimana sobat ingin menu tersebut muncul

<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME </a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME</a></li>
<li><a href="#">EDIT ME</a></li>
</ul>
ganti dengan link yang dituju



Silahkan selanjutnya sobat edit sendiri, kalau ada kebingungan, atau kesusahan ataupun juga mungkin ada saran jangan sungkan-sungkan untuk berkomentar, terima kasih


                                                         Semoga Berhasil !

Related Posts

Cara Membuat Menu Pada Blog
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

Show comments
Hide comments

1 comments:

comments

Jika Ada Pertanyaan,Kritik,Saran,Dsb ...
Tolong Di Comment Di Kotak Komentar Yg tersedia,..
Bagi Anda Yg Ber-Komentar,..
Tolong Berkomentarlah Yg Baik,..
Karna Kalau Berbau SARA,Jorok,Mesum,Atau Porno
Akan Saya Jadikan SPAM Atau Saya HAPUS,.. !!!
(Gomen Buat Anonymous ID Saya Urus Belakangan)

NB : Klik Notify Me Dikanan Bawah Ini Biar Ntar Kalo Ane Sudah Balas Bisa Cepat Kalian Konfirmasi
Arigatou ^_^
Bery HackeR™