Bosan dengan menu blog itu saja .
Pada artikel kali ini saya akan share bagaimana cara memasang menu horizontal di blog tepat di dalam kode html header blog.
Menu Navigasi Horizontal dengan CSS yang sederhana ini, tampilanya yang ramping dan simple sehingga terlihat sangat rapi serta source code yang simpel bisa menjadi tahap dasar.
Nah, untuk bagi pemula yang baru belajar dengan menggunakan source code, khususnya bagi saya pribadi dan pemula lainnya untuk dapat melangkah lebih jauh lagi dalam belajar mengolah sebuah code dan juga dapat mempercantik blog agar tidak bosen untuk di lihat.
Untuk penjelasan lebih lanjut, berikut tutorial Cara Membuat Menu Navigasi Horizontal Blog. Ikuti terus cara memasang menu pada blog.
Masuk ke dasboard blogger pilih tataletak lalu pilih tambah gadget kemudia pilih HTML/Javascript
Copy Pastekan Kode di bawah ini kedalam.
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='http://bloggo.website'>Menu 1</a>
<a href='http://bloggo.website'>Menu 2</a>
<a href='http://bloggo.website'>Menu 3</a>
<a href='http://bloggo.website'>Menu 4</a>
<a href='http://bloggo.website'>Menu 5</a>
<a class="end"> </a>
</div>
Ganti link url http://bloggo.website dengan link ertikel yang sobat ingin tampilkan di Menu tersebut.
Kemudia Save.
Selanjutnya klik edit template
1. Masuk kembali ke menu Template dasborad blogger lalu pilih Edit Htmlnya. seperti gambar di bawah ini .
3. Copy kode di bawah ini lalu pastekan tepat di atas kode " ]]></b:skin>" tanpa tanda kutip.
div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4FBF5eL8dVwBvF5wuDTV72udkZ0BWUNjhZNn66iMJkboXb4WTOCzn8DuPyzc1cE2w5adiWB8aTqwzncsmFqhIDLdr3lrzufsg8JGz8Z33t_S__hqLiJO1N2Hq9ybEaQr0_nBbWJ5Cn98/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/AVvXsEhVwnRammF0A6LluFMQEQPHSFn4bgiTfxoqyCAlkkBRktYJN8MScL0kkWS804CjTnNSL1y-BS2aRzEDMlaP6UwBlX4EhWbnyFhqB1ZIBoxB9Rr4F-frucaqvcvvBBCpFCD9Kyzs4syf5sk/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; }
