Cara Membuat Menu Navigasi Keren dan Responsive Pada Blogspot

Cara Membuat Menu Navigasi Keren dan Responsive Pada Blogspot ~ Menu Navigasi merupakan sebuah menu bar yang berisi tautan-tautan yang menuju link tertentu saat terjadi klik, fungsinya untuk mengelompokkan artikel-artikel tertentu supaya lebih memudahkan pengunjung untuk mengaksesnya, dan juga merupakan sebuah langkah optimasi blog Anda supaya bisa diterima oleh Google Adsense.

Ini screenshotnya:

Menu navigasi biasanya terdiri dari beberapa tab dan terletak dibawah header blog. Di dalam masing-masing tab tersebut berisi link yang menuju postingan, label, halaman statis, atau blog/situs lain. Dengan adanya menu navigasi responsive membuat blog terlihat lebih rapi dan teratur dan dapat memudahkan pengunjung untuk mencari apa yang mereka inginkan.

Bagi Anda yang sudah mengerti dunia blogging dan tentunya paham sedikit tentang css dan html, membuat menu navigasi & search form bukanlah hal yang sulit. berikut akan saya bagikan pengalaman bagaimana cara membuat menu navigasi & search form keren dan responsive di blog.

Berikut cara-caranya :
1. Masuk Dashbord => Template => Edit HTML.
2. Simpan kode css berikut tepat di atas kode ]]></b:skin> :

/*Menu Nav..==================================================== */.masmenu{background:#2c8fc9; color:#fff;display:inline-block;width:100%;}.masmenu ul{width:100%;padding:0;margin:0 auto}.masmenu li:first-child a{padding:7px 10px 3px}.masmenu li{list-style:none;display:inline-block;float:left}.masmenu li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}.masmenu li a:hover{background:#2374a3; color:#fff}.masmenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}.masmenu li li a,.masmenu li li a:link,.masmenu li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}.masmenu li li a:hover,.masmenu li li a:active{background:#2374a3}.masmenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}.masmenu li ul a{width:140px}.masmenu li ul ul{margin:-33px 0 0 157px}.masmenu li:hover>ul,.masmenu li.sfHover ul{left:auto}.menusearch{width:300px;float:right;margin:0 auto;padding:5px 10px 0 0}.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:300px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;}.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 260px;height:23px;border:0px;outline: none;line-height:23px;}.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

3. Selanjutnya salin kode dibawah dan letakkan tepat dibawah </header> : jika anda mau memasangnya dibawah header blog Anda.

<div class='masmenu'> <ul class='sf-menu'><li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNJ65lbLSZS1E7BInjf1Qv8CNgSTQqpWArcKBvobbO9X00EQ4OtZhmIMF9F7TBmUFhkgGFlcGKMvdBAWSF5oBI-pOKXkKqTeWQBR_7Z4UJA5H_FOa5VgkZI4eYJGlxxqt70w2IQY-9KI/s1600/home.gif' style='padding:0px;'/></a></li><li><a href='#'>Menu 1</a></li><li><a href='#'>Sub Menu 1</a> <ul><li><a href='#'>Sub 1</a></li><li><a href='#'>Sub 2</a></li><li><a href='#'>Sub 3</a></li></ul></li><li><a href='#'>Menu 2</a></li><li><a href='#'>Menu 3</a></li><li><a href='#'>Menu 4</a></li><li><a href='#'>Menu 5</a></li></ul><div class='menusearch'> <form action='/search' class='searchform' method='get'> <input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/> <input class='searchbutton' src='data:image/gif;base64,R0lGODlhGAAYAPdlAKysrPr6+vn5+WJiYvj4+GNjY01NTW1tbXFxcV9fX1RUVFNTU729vf7+/lFRUff394ODg0NDQ2RkZF5eXmxsbLKysr6+vnNzc9PT03BwcN3d3bu7u8PDw1BQULm5udHR0WZmZl1dXefn50VFRevr6/v7+3JycvT09M7OzpKSktfX12VlZfDw8MrKytjY2MzMzP39/eLi4q2trUtLS0pKSpWVlW5ubn19fdbW1r+/v29vb6qqqri4uFdXV1VVVYKCgpSUlN7e3mdnZ35+fkRERNTU1GBgYFhYWJycnLS0tMjIyIWFhfPz8zw8POrq6tzc3HZ2dtLS0vz8/FxcXKurq09PT7a2ttra2sfHx1JSUnV1debm5q6urlZWVoCAgOnp6YGBgU5OTmtra7q6uv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAGUALAAAAAAYABgAAAjVAMsIHEiwoMGDCBMqXMiwYcMTT1RY0HDC4UAsKS5MkKAlxYcADitQGCDmAIUDBYRYafgBxIoMXHCokHFBwoAoCwVAmJBhC0EXUBKAYaIwyJQCHAxyGKADhUILR1aQMHgFQQEeChl0GcDCoAYTRjwoLJIlBAaDKBKAUKLwAQIDQwgQJPHDAISuWR10WPLii5MWXhxUASKAYY0OEUKYQJCAyILHAB4wpGJDQZMIPQ5USOJjBgC5CgOIGAMAiQcRAhkoGAHAosENCm64NoghxuzbuHPrLhgQADs=' style='cursor:pointer;vertical-align:top' type='image' value='Go'/> </form></div></div>

4. Sampai tahap ini Anda sudah selesai membuat menu navigasi, Klik simpan template dan lihat hasil kerja Anda

Baca juga : Cara Membuat Widget Popular Post Keren Di BLog

sekian dulu Cara Membuat Menu Navigasi Keren dan Responsive Pada Blogspot yang bisa saya bagikan.

Share this post