Sudah 1 minggu saya tidak meng-update blog saya karna saya terlalu sibuk dengan ulangan yang menumpuk-numpuk pada kesempatan kali ini saya ingin share MENU NAVIGASI yang terbaru dari yang sebelumnya pernah saya share (baca) untuk demonya silahkan lihat di blog DODE-XP.COM ini..
Langsung aja ya gan berikut adalah caranya :
1. Yang pasti hal yang sobat blogger lakukan pertama harus login keblogger dulu
2. Langkah yang kedua sobat blogger pilih "Rancangan" atau dalam bahasa inggris disebut juga "Design", setelah itu klik "Edit HTML", setelah mengklik "Edit HTML" jangan lupa di centang "Expand Widget Template"
3. Kemudian carilah kode ]]></b:skin> untuk memudahkan klik CTRL+Fkemudian di bidang kosong tersebut masukan kode ]]></b:skin>
4. Setelah ketemu kode ]]></b:skin> masukan kode dibawah ini diatas kode ]]></b:skin>
/* NAVIGASI MENU */
#dodenavh{background:#000;}#dodenav{background:#ddd;height:35px;color:#000}
#dodenav-left{float:left;display:inline;width:881px}
#dodenav ul{position:relative;overflow:hidden;padding:0px 0px 0px 5px;margin:0;font-size:11px; font-weight:bold}#dodenav ul li{float:left;list-style:none}
#dodenav ul li a, #nav ul li a:visited{display:block;color:#000;margin:4px 4px; padding:7px 7px 7px 7px;text-decoration:none;color:#000}
#dodenav ul li a:hover{-webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;-ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;border-left:5px solid #222;padding-left:10px;background:#eee;color:#fff;color:#000}
#dodenav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{background-color:#fff; color:#fff; margin:4px 4px; padding:7px 7px 7px 7px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out;color:#000}
#dodenav2 {color:#ffffff;background: #025f4a;height:25px;
border-radius:0px 2px;-moz-border-radius:0px 0px 2px 2px;
-khtml-border-radius:0px 0px 2px 2px;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px;border-top:1px solid #df2f00;}
#dodenav-left2 {float:left;padding-left:15px;padding-top:4px;
display:inline;width:900px;}
#dodenav2 a:link {color:#FFFFFF;text-decoration:none;}
#dodenav2 a:visited {color:#FFEEEE;text-decoration:none;}
#dodenav2 a:hover {color:#FF0000;}
#dodenav-right2 {float:right;}
5. Setelah itu carilah kode <div id='content-wrapper'> dan letakan kode dibawah ini tepat dibawah kode <div id='content-wrapper'>
<div id='dodenav'>
<div id='dodenav-left'>
<ul id='dodenav'>
<div style='float:right; padding-top:5px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
<li class='dodenavh'><a class='nudge' href='/'><img alt='Home' src='http://1.bp.blogspot.com/-wIA9H6CnMnE/TgsmXN4zFpI/AAAAAAAAAs0/86DPKXp2ThA/s1600/icon-home.png' style='border:none;margin: 0px 2px -2px 0px;' title='Pergi ke halaman depan Dode-XP'/> Home</a></li>
</ul>
</div>
</div>
NB : Untuk menambah menunya silahkan kopi kode <li><a class='tooltip' href='ALAMAT/URL MENU KAMU' title='DESKRIPSI MENU KAMU'>JUDUL MENU KAMU</a></li> tepat dibawah kode <li><a class='tooltip' href='ALAMAT/URL MENU KAMU' title='DESKRIPSI MENU KAMU'>JUDUL MENU KAMU</a></li>
6. Dan langkah yang terakhir jangan lupa disimpan templatenya jadi deh!!
Jika ada yang tidak dimengerti silahkan tanyakan lewat komentar, jika ingin dibuatkan akan saya buatkan
Subyek: Menu Navigasi Elegan Untuk Blogspot 