Membuat Menu Horizontal pada blog - Desa Talkandang

Breaking

BANNER iklan

Thursday, 23 May 2013

Membuat Menu Horizontal pada blog



Tutorial ini kelanjutan tutorial yang sebelumnya. untuk yang belum baca silahkan baca disini. dan sekarang saya akan mengulas langkah membuat menu horizontal pada blog.
ok. langsung saja saya 

masuk ke blogspot.com seperti biasa email dan password

buka daftar entri

klik template
klik edit html

dan muncul area kode html disana, setelah itu klik di dalam area kode lalu anda tekan Ctrl + F

maka muncul kotak pencarian dan anda masukkan disana kode </b:skin> Lalu enter

setelah kode yang di maksud ketemu


masukkan kode di bawah ini di antara <b:skin>....</b:skin> Lalu Simpan Template


ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("http://3.bp.blogspot.com/-yfjleaT_byo/T5ewxWcfQ_I/AAAAAAAAAG4/RhzPFsTy0B0/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://3.bp.blogspot.com/-yfjleaT_byo/T5ewxWcfQ_I/AAAAAAAAAG4/RhzPFsTy0B0/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;}

posisi kode yang telah di sisipkan
 masuk ke tata letak


tambahkan gadget

pilih Html/Javascript

Lalu masukkan script di bawah ini disana 
<ul class="menu red"> <li class="current"><a href="url" target="_self">Home</a></li> <li><a href="url" target="_self">About</a></li> <li><a href="url" target="_self">Contact</a></li> <li><a href="url" target="_self">Daftar Isi</a></li> <li><a href="" target="_self"></a></li> </ul>

lalu pilih simpan

sekarang lihat blog  Sudah ada kan menunya


sekarang keluar dulu lah.. hehehehee

No comments:

Post a comment