Dari pertama kali mengenal blog ingin sekali membuat menu dalam blog. Tapi bingung tidak tahu cara membuatnya. Setelah sekian lama ke sana-ke mari mencari informasi akhirnya alhamdulillah ketemu juga. Hehehe. . . . . curhat sedikit.
Kini saatnya berbagi hib. Gini sohib blogger cara membuat menu ke dalam blog.
· Masuk ke blogger soheb. Bila menggunakan tampilan blog yang baru.
· Klik Template, pilih Edit HTML.
· Setelah itu klik atau centang tulisan Expand widget Template (sebelah kiri atas).
· Cari kode ]]></b:skin> dengan cara menekan tombol ctrl+f, Copas kode berikut tepat diatas kode ]]></b:skin>.
#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 15px; font-family: Trebuchet MS, Tahoma, Verdana; color: #ffd700; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #ffd700; display: block; font-size: 15px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #BBBBBB; color: #ff0000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #222222; width: 150px; color: #ffd700; font-size: 15px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #BBBBBB; color: #ff0000; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
· Sohib bisa merubah background dan color menu sesuai keinginan sohib blogger.
· Pilih Simpan Template. Lalu klik tutup.
· Setelah itu Klik Tata Letak, selanjutnya klik Tambah Gadget, cari tulisan HTML/JavaScript lalu klik.
· Biarkan judulnya kosong, isikan kode berikut pada konten.
<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='http://sohibalkhoir.blogspot.com/2012/02/game-windows-8-copper.html'><span style="font-style:italic;">HOME</span></a> </li>
<li><a href='http://sohibalkhoir.blogspot.com'><span style="font-style:italic;">SYAIR</span></a>
<ul>
<li><a href='http://sohibalkhoir.blogspot.com/2012/02/ya-hanna-na-oleh-habib-syeich.html'><span style="font-style:italic;">Ya Hanna Na</span></a>
<li><a href='http://sohibalkhoir.blogspot.com/2012/02/syiir-tanpo-waton-by-kh-abdurrahman.html'><span style="font-style:italic; font-size: 11px;">SYI’IR TANPO WATON</span></a>
</li></li>
</ul>
<li><a href='http://sohibalkhoir.blogspot.com'><span style="font-style:italic;">GHOIB</span></a>
<ul>
<li><a href='http://sohibalkhoir.blogspot.com/2012/02/malaikat.html'><span style="font-style:italic;">Malaikat</span></a>
<li><a href='http://sohibalkhoir.blogspot.com/2012/02/bidadari.html'><span style="font-style:italic;">Bidadari</span></a>
<li><a href='http://sohibalkhoir.blogspot.com/2012/02/cara-syetan-menghilangkan-iman.html'><span style="font-style:italic;">Syetan</span></a>
</li>
</li></li></ul>
<br class='clearit'/>
</li></li></ul></div>
<div style='clear:both;'></div>
· Gantilah URL dan Judul menu di atas dengan URL dan Judul sohib.
· Pilih simpan, lihat hasilnya.
Semoga penjelasan di atas membantu sohib blogger semua dalam mempercantik tampilan blog sohib.
Tidak ada komentar:
Posting Komentar