Pages

Minggu, 24 April 2011

Trik Membuat Menu Horizontal di Blog

Trik membuat menu horizontal ini tidaklah terlalu sulit, berikut dijelaskan dan ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.

caranya coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya :


Code CSS
#menuq{ font-family: Verdana; padding:10px;} .menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;} .menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;} .menul .widget { border-bottom-width: 0;}


Selanjutnya carilah kode di bawah ini :

Code CSS
<div id='header-wrapper'> <b:section .......dst> </b:section> </div>

lalu copy kode di bawah ini tepat di bawah kode di atas :
Code CSS
<div id='menuq'><br /> <b:section class='menuq' id='menul' preferred='yes'/> </div>

apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.

Code CSS
<!-- link or follow blog ini dung... www.dondenas.co.cc--> <style type="text/css"> #menuq { margin:0; padding:10px;} #menuq a{ display:0;width:100px;border-style:dotted;border-width:1px;color:#FFFFFF;font-family:Cursive;font-size:12pt;font-style:italic;padding:5px; text-decoration:none;} #menuq a:hover{ border-width:1px;color:#33cc33;border-Left:10px text-decoration:none;} </style> <div id="menuq"><a href="http://www.dondenas.co.cc" target="_self">Home</a> <a href="http://www.blogger.com/profile/05306626316387369708" target="_self">About Me</a> <a href="http://www.dondenas.co.cc/search/label/Trik" target="_self">Trik</a> <a href="http://www.dondenas.co.cc/search/label/Tips" target="_self">Tips</a> <a href="http://www.indowebster.com" target="_self">Free MP3</a></div>
Ganti link dengan link anda...

Untuk Pembuatan menu dapat menggunakan generator online yang aku link dengan link sobat : klik disini......

Untuk menyimpan script format HTML silahkan baca Tips Menulis Code HTML JavaScript Pada Posting Blog

0 komentar:

Posting Komentar

Loading...


Mau punya buku tamu seperti ini?
Klik di sini
Get This Gadget