Cara membuat menu dan sub menu di blog

Advertisement
Assalamualaikum.
ini adalah cara membuat menu dan sub menu, bagi kamu yang template blognya tidak ada fasilitas menu dan sub menu, kamu bisa membuatnya sendiri.

1. masuk ke blog

2. design > tata letak

3. add gadget > HTML javascript

4. dan pastekan kode berikut ;

<style type='text/css'>

ul#topnav {margin: 0; padding: 0;float: left;width: 900px;list-style: none;position: relative;font-size: 1.2em;background: #383838;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #fff;}ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}ul#topnav li:hover { background: #1376c9 url() repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:35px;display: none;width: 100%;background: #1376c9;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item$(this).find(&quot;span&quot;).show(); //Show the subnav} , function() { //on hover out...$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background$(this).find(&quot;span&quot;).hide(); //Hide the subnav});

});</script>
<ul id="topnav">

<li><a href="https://plus.google.com/110444695860771660646/posts">Profile</a></li><li><a href="#">Tips</a><span><a href="http://justhendrious.blogspot.com/search/label/Tips%20Komputer">Tips Komputer</a> |<a href="http://justhendrious.blogspot.com/search/label/Tips%20Blog">Tips Blog</a> |<a href="http://justhendrious.blogspot.com/search/label/Tips%20twitter">Tips Twitter</a> |
<a href="http://justhendrious.blogspot.com/search/label/Tips%20tips%20Menarik">Tips Menarik</a>

</span></li><li><a href="#">My Site</a><span><a href="http://www.facebook.com/hendrisetiawan17">My Facebook</a> |<a href="http://www.twitter.com/3hendrisetiawan">My Twitter</a> |<a href="https://plus.google.com/110444695860771660646/posts">My Google+</a><a href="http://allfreetips4u.blogspot.com/search/label/Link Exchange">My Youtube</a><a href="#">MooTools</a></span></li><li><a href="#">Favorite Site</a><span><a href="http://www.topskor.com">Topskor</a> |<a href="http://www.goal.com">Goal Com</a> |<a href="http://www.bola.net">Bola net</a> |<a href="http://www.fcbarcelona.com">Fc Barcelona</a> |<a href="http://www.ipa5cablak.blogspot.com">IPA 5</a>
</span></li><li><a href="#">Makalah</a><span><a href="http://justhendrious.blogspot.com/search/label/Makalah%20sekolah">Makalah Sekolah</a> |<a href="http://justhendrious.blogspot.com/search/label/Makalah%20Kuliah">Makalah Kuliah</a> |<a href="http://justhendrious.blogspot.com/search/label/Contoh%20Laporan%20Pramuka">Laporan Pramuka</a>
</span></li><li><a href="#">Foto</a><span><a href="http://justhendrious.blogspot.com/search/label/Galeri%20Foto%20Liburanku">Galeri Foto Liburan</a> |<a href="http://justhendrious.blogspot.com/search/label/Galeri%20foto%20pramuka">Galeri Foto Pramuka</a> |<a href="http://justhendrious.blogspot.com/search/label/masa%20masa%20sma">Galeri Foto SMA</a> |<a href="http://www.fcbarcelona.com">Fc Barcelona</a> |<a href="http://s1262.photobucket.com/albums/ii615/HendriSetiawan17">PhotoBucket</a>
</span></li><li><a href="#">Download</a><span><a href="http://www.stafaband.info/download-lagu-mp3-gratis.html">MP3</a> |<a href="http://sinema31.com">Film</a> |<a href="btemplates.com">Template Blog</a> |<a href="http://www.dytoshare.us">Sofware</a> |<a href="http://www.gametop.com/">GAME</a>

</span></li></ul>


5. dan simpan, lihat hasilnya.

catatan : kamu harus mengubah ;
              - kode warna kuning adalah menu anchor text yang harus kamu ubah
              - kode warna hijau adalah Link menu anchor text
              - kode warna merah adalah sub menu anchor text
              - kode warna biru adalah Link sub menu anchor text
Tag : Tips Blog
0 Komentar untuk "Cara membuat menu dan sub menu di blog"

Silahkan Komentar sobat !
Berkomentarlah dengan sopan dan tidak menaruh link aktif!

Back To Top