Cara membuat Navigasi menu pada Blog

Hay sobat, kali ini ane mau bagi ilmu tentang bagaimana caranya membuat navigasi menu pada sebuah blog, ikuti tutorial dibawah ini ....


1 . Anda harus terlebih dahulu login dalam blogger

2 . Masuk Menu Template lalu pilih Edit HTML


3 . Copy kode dibawah ini, lalu paste di atas kode ]]></b:skin> kemudian Simpan Template. Apabila anda kesulitan mencari kode diatas, anda cukup klik di dalam kotak yg sudah terisi perintah-perintah html, lalu klik ctrl + f , setelah paste pada kolom find ( ctrl + f ).

div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioiM1z6XjeK2hAVzAr9gZRPeuz93y8KS5ek-M1O-9E84ap28DhwBVr6tFV9WKBTaHSJJYSPatQSbIvE8L2ZgYcPjDXSI6IhDHdcDnL9jmEi60mLRBPGM5Rs_0kb6LVuB98DdpuP6i3UBU/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTr7CiPIiPx4DnWflSaMuVWtxKZvgwqCZ4oZNpmlhUp5VgW2JsTN6ZEUbpKrE_xdVJpdAM6NYZ2uTgMWbx-UA2GL0djQ6vfxYcrsBD7h18QwACACUTSHWor4PsMLgLZ9oBl0dkiuqis4/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }


4 . Lalu langkah selanjutnya untuk menampilkan Menu Navigasi Horisontal di Blog, caranya copy kode dibawah ini , kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya

<div class='redmenu'>
<a href='http://reynaldifauzi99.blogspot.com/' class='current'>Home</a>
<a href='http://reynaldifauzi99.blogspot.com/'>Menu 1</a>
<a href='http://reynaldifauzi99.blogspot.com/'>Menu 2</a>
<a href='http://reynaldifauzi99.blogspot.com/'>Menu 3</a>
<a href='http://reynaldifauzi99.blogspot.com/'>Menu 4</a>
<a href='http://reynaldifauzi99.blogspot.com/'>Menu 5</a>
<a class="end">&nbsp;</a>
</div>



5 .  Langkah terakhir pilih simpan, lalu lihat apa yang terjadi, reload blog anda , 


Sekian Terimakasih, semoga bermanfaat sodaraa ,,,  

0 komentar:

Posting Komentar