Oke, kali ini saya mencoba sharekan Cara Membuat Menu Navigasi Blog Abdu-Green's , Semoga anda berminat untuk memakainya.
Screenshotnya :
Cara bikinnya silahkan anda ikuti tutorialnya sebagai berikut :
- Login ke blogger.
- Silahkan anda masuk ke bagian template -> Edit HTML -> Jangan lupa centang expande widget.
- Silahkan cari kode ]]></b:skin> , Masukkan kode berikut tepat di atasnya :
#topbar{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NkLRla5Ziep5x8y9B5cxO_uBrDCQyU978Vkc7KdtzAurCB80RrTutRsuZmmUgp9y-mtMRE0hBVGk2cm9YNnViRsYFkTpyjPF0xwgWccgJS98F-2qh27ab9KXY7zyMtxjAZtgV79Q7ls/s1600/nav+menu.png)
repeat-x top left;width:970px;border-top:1px solid #000;margin:0 0 -2px
0;padding:0 auto}
#top-wrapper{width:970px;height:30px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#fff;padding:6px 10px 8px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVgvNJN2ChrklInoeK0OMNtuR_yXnRFyVQeBNP9GXqq6CATc-7eoym6-DWwZgeqvljEK93s4EvqAOO6Hqln0elYWH2M10UBRcL6QKaJZdkqEpDU1uAKpPlL1DYwXolJ5jAdd_3c3Oe1M/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#054d58;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=93);-moz-opacity:.93;opacity:.93}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{color:#f5c623}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#333!important;color:#f5c623!important;text-decoration:none}
#top-wrapper{width:970px;height:30px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#fff;padding:6px 10px 8px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVgvNJN2ChrklInoeK0OMNtuR_yXnRFyVQeBNP9GXqq6CATc-7eoym6-DWwZgeqvljEK93s4EvqAOO6Hqln0elYWH2M10UBRcL6QKaJZdkqEpDU1uAKpPlL1DYwXolJ5jAdd_3c3Oe1M/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#054d58;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=93);-moz-opacity:.93;opacity:.93}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{color:#f5c623}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#333!important;color:#f5c623!important;text-decoration:none}
- Cari lagi kode <body> , Letakkan kode di bawah ini tepat di bawah kode <body>.
<div id='topbar'>
<div id='top-wrapper'>
<ul id='top'>
<li><a href='/'>Home</a></li>
<li><a href='/'>MIVO TV Online</a></li>
<li><a class='arrow' href='#'>Sepak Bola</a>
<ul>
<li><a href='/'>Liga Inggris (Liga Premier)</a></li>
<li class='hr'></li>
<li><a href='/'>Liga Italia (Serie A)</a></li>
<li class='hr'></li>
<li><a href='/'>Liga Spanyol (LA LIGA)</a></li>
<li class='hr'></li>
<li><a href='/'>Liga Jerman (Bundesliga)</a></li><li class='hr'></li>
<li><a href='/'>Liga Champions</a></li>
<li class='hr'></li>
<li><a href='/'>Piala Dunia 2014</a></li>
<li class='hr'></li>
<li><a href='/'>Prediksi Bola</a></li>
<li class='hr'></li>
<li><a href='/'>Klasemen Sementara</a></li>
<li class='hr'></li>
<li><a href='/'>Cuplikan Video Gol dan Highlights Pertandingan</a></li>
</ul>
<br class='clearit'/>
</div>
</div></div>
<div id='top-wrapper'>
<ul id='top'>
<li><a href='/'>Home</a></li>
<li><a href='/'>MIVO TV Online</a></li>
<li><a class='arrow' href='#'>Sepak Bola</a>
<ul>
<li><a href='/'>Liga Inggris (Liga Premier)</a></li>
<li class='hr'></li>
<li><a href='/'>Liga Italia (Serie A)</a></li>
<li class='hr'></li>
<li><a href='/'>Liga Spanyol (LA LIGA)</a></li>
<li class='hr'></li>
<li><a href='/'>Liga Jerman (Bundesliga)</a></li><li class='hr'></li>
<li><a href='/'>Liga Champions</a></li>
<li class='hr'></li>
<li><a href='/'>Piala Dunia 2014</a></li>
<li class='hr'></li>
<li><a href='/'>Prediksi Bola</a></li>
<li class='hr'></li>
<li><a href='/'>Klasemen Sementara</a></li>
<li class='hr'></li>
<li><a href='/'>Cuplikan Video Gol dan Highlights Pertandingan</a></li>
</ul>
<br class='clearit'/>
</div>
</div></div>
Keterangan :
- Garis miring berwarna merah merupakan tempat link atau URL anda. silahkan masukkan link labelnya di situ.
You Might Also Like
0 komentar:
Post a Comment
Silahkan Berkomentar Untuk Saran Yang Dapat membangun kami
1. Jangan Membuat Komentar Yang bersifat Spam
2. Berikan Komentar Yang Baik
3. Kritik/saran Yang Bertujuan Memajukan Dan Membenarkan
5. Berikan Saran Yang Berkaitan Dengan Artikel Yang dibahas
6. Menggunakan Bahasa Yang Sopan
7. Tidak Mengandung Unsur Sara Dan Ejekan