Menu Horisontal Blog

Menu / Navigasi pada sebuah blog merupakan aksesories yang kadang mulai diubah apabila membuat blog baru. Tampilan yang ramping dan masih sederhana serta source kode yang simple bisa menjadi tahap dasar untuk permulaan belajar, untuk melangkah lebih jauh lagi dalam belajar mengolah kode dan mempercantik tampilan blog. Untuk penjelasan lebih lanjut, maka berikut tutorial untuk Cara Membuat Menu Navigasi Horisontal Blog.

1. Login ke akun blogger.
2. Masuk menu Template lalu pilih Edit HTML
3. Copy kode berikut ini lalu paste di atas kode <style type="text/css"> kemudian Simpan Template.

   div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFy95vQiFoppkCL2olZijZvZOJPHX9s6ivPtIWv8y0-KCO4RJSfyconWQk-7ZKLY6Wc5ad6crL7MsFddhYf_Tt7HBaJ1TD6tAOf-_g2tExSuWayqsA0ixxKo2OvGw1RcwqKjwzNX8Xlo/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/AVvXsEiqfIqky0t3RucqBvdqb-E6zR62zxuFmoZjR7TN5Fn9BuDIl7NjdfWmdpqfgw_IaUf-MBXrTb2-kRxpENmlIdECkNsB5uHYv3CVedPUDiILjRpBtdF1kzPruQnt2Ou4QPiMQNl2HpY8K-w/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 berikut ini, Cari pada tema / tempate blog <div class='menu-primary-container'> lalu paste kode dibawah berikut di bawah <div class='menu-primary-container'>

    
   <div class='redmenu'>
   <a class='current' expr:href='data:blog.homepageUrl'>Dasboard</a>
   <a href='ariskoerniawan.blogspot.com/'>WebBook</a>
   <a href='http://ariskoerniawan.blogspot.com/'>Design</a>
   <a href='http://ariskoerniawan.blogspot.com/'>Operatining System</a>
   <a href='http://ariskoerniawan.blogspot.com/'>Tutorial</a>
   <a href='http://ariskoerniawan.blogspot.com/'>Download</a>

Untuk Pilihan lebih lanjut menggunakan link Sumber Artikel