Cara membuat menu horizontal di blogger

1. Login ke akun blogger.
2. Masuk menu Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin> kemudian Simpan Template.
div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrbF7OTqCyAVx9OT0Nlm3p0A0ThNWH83sbsVtYZf61c_D31dGH2mJ0fwAq3JDzCPNRPKs88E2yk3grl0rJxIzXo6LPnLBw4hTKRiMY-z7Y6t4YWtZo-Yz0mgkQo0WtGcqjBVcM-z1Ev0/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/AVvXsEhKVH4cle2AXvh7ZnyaD1uc9ZES7GXZkoUP7fCEtL6dwhvHB0lpkdvTgRHyEmMTD3Woxx8qaJkwpfhdIiO9uoKxYlwykd9Qhhege7K2_D1EALuekBsygqSpKGsIoaHSHIlcuNietyMs6-Y/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, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya.
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='http://mas-andes.blogspot.com'>Menu 1</a>
<a href='http://mas-andes.blogspot.com'>Menu 2</a>
<a href='http://mas-andes.blogspot.com'>Menu 3</a>
<a href='http://mas-andes.blogspot.com'>Menu 4</a>
<a href='http://mas-andes.blogspot.com'>Menu 5</a>
<a class="end">&nbsp;</a>
</div>
Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL label blog anda.

5. Langkah terakhir klik Simpan, maka selesai dan seperti ini nanti hasilnya dari Cara Membuat Menu Navigasi Horisontal Blog.
Home Menu 1 Menu 2 Menu 3 Menu 4 Menu 5  

 Atau apabila ingin menggunakan Menu Navigasi Horisontal Blog dengan warna lain seperti yang ada dibawah, maka langkah-langkah penerapannya seperti pada yang sudah tertera di atas. Berikut ini live demo beserta source kode menu navigasi horisontal blog.


CSS*
#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; } 
#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-CffHHjwviMi5Ce-p9NFfUlIRr3Y1BbckYQjPaZOxm0zSoVDp2OJZn0kVlHm_fBGmBVYms3V_PAvDtVPAkr-IzPxv3aiXb62JQ2EXXCdMsYQsQo53qnSsYQ9wtTsAlrh4IGVA5RBsPOo/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
#menublues a.end{ width:2px; padding-left:0;padding-right:0; }
HTML*
<div id='bluemenu'>
<div id='menublues'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>



CSS*
#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; } 
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKx6FPbQ2Zg9U3rhQDpK3Tq2Ss1yHU6yukH0Q6QDpMkSoKNk2zEJTOcXZNnfFFBAb4jPcTtsQOkd3wuTTHdFGGGeDZpK0yojwf0SwV34PlOpou29_6ICs4V3F2yPWLgRWTVJ6lad-EtHc/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }
HTML*
<div id='greenmenu'>
<div id='menugreen'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

SUMBER:http://mas-andes.blogspot.com/2013/09/cara-membuat-menu-navigasi-horisontal.html

 CODING UNTUK KOLOM KOMENTAR

<!-- begin wwww.htmlcommentbox.com -->
 <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
 <script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&opts=16862&num=10&ts=1533613343874");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->

CODING UNTUK KALENDER
  
 <!-my calendar widget - html code - mycalendar.org --><div align="center" style="margin:15px 0px 0px 0px"><noscript><div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold;"><a style="font-size:12px;text-decoration:none;color:#000 ;" href="http://mycalendar.org/"> Calendar</a></div></noscript><script type="text/javascript" src="http://mycalendar.org/calendar.php?group=&widget_number=2&cp3_Hex=8F228f&cp2_Hex=FFFFF3&cp1_Hex=090909&fwdt=200&lab=1"></script></div><!-end of code--></!-end></!-my>
By