Easy Way to Create or Add a Navigation Menu on Blogspot

Hello fellow bloggers , this time the admin will share a supporting widget that you should or must implement on your favorite blog, yes... a responsive and cool blogger navigation menu of course. One of the functions of the navigation menu on Blogger is to make it easier for visitors to find out the main parts or list of discussions on your blog, so visitors will feel pampered when they want to look for specifications from the main menu of your Blogspot.

So... without further ado, admin shares the cool Blogspot Navigation Menu that admin copied from forum-malaikatkomputer :

How to create a menu bar on Blogspot:

• Please log in to your Blogger account.
• Click the "Template" page to download the complete template in case something unexpected happens.
• Centang "Expand Template Widget". 
• Then please search for the code ]]></b:skin> using Ctrl + F.
• Save the CSS code below just above the ]]></b:skin> code

#menubar{border-bottom:4px solid #f00;width:1025px;height:32px;background:#000;float:center;margin-bottom:3px}#menubar ul{float:left;margin:0;padding:0}#menubar li{float:left;list-style:none;margin:0;padding:0}#menubar li a,#menubar li a:link{float:left;padding:8px 12px;color:#fff;text-decoration:none;font-size:13px;font-weight:bold}#menubar li a:hover,#menubar li a:active,#menubar .current_page_item a{background:#f00;color:#fff;text-decoration:none}#menubar li li a,#menubar li li a:link,#menubar li li a:visited{font-size:12px;background:#f00;color:#fff;text-decoration:none;width:150px;padding:0 10px;line-height:30px}#menubar li li a:hover,#menubar li li a:active{background:#000;color:#fff}#menubar li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin-top:32px;border:1px solid ##ff0000}#menubar li:hover ul,#menubar li li:hover ul,#menubar li li li:hover ul,#menubar li.sfhover ul,#menubar li li.sfhover ul,#menubar li li li.sfhover ul{left:auto}#menubar li:hover,#menubar li.sfhover{position:static}

• Next, please look for the code <div id="content-wrapper"> 
• Save the script code below just above the <div id="content-wrapper"> code

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='https://buktiinaja.blogspot.co.id/search/label/Tips%20Sehat'>Tips Sehat</a></li>
<li><a href='https://buktiinaja.blogspot.co.id/search/label/Ilmu%20Komputer'>Ilmu Komputer</a>
<ul>
<li><a href='Link Google Plus Agan'>Google +</a></li>
<li><a href='Link Facebook Agan'>Facebook</a></li>
<li><a href='Link Twitter Agan'>Twitter</a></li>
</ul></li>
</ul>
</div>

Langkah terakhir silahkan sesuaikan link diatas seseai kebutuhan agan dan Simpan Template.

Keterangan Tambahan: 

• Adjust the code #ff0000 (menubar bottom border), 1025px (menubar width), #000000 (menubar background).
• Please name the blue menu bar Home according to your wishes.
• Replace the link  https://buktiinaja.blogspot.co.id/search/label/Tips%20Sehat  with your link.

Hopefully this is useful...