YIS - Sangat Banyak blogger yang memberikan tutorial membuat menu bar pada bagian header blogspot. Namun bagi Anda yang kurang paham atau pemula dalam dunia blog, tidak perlu khawatir, karena menu bar tersebut bisa dengan mudah dibuat tanpa harus merubah HTML. Disini, saya akan membagikan kode menu bar yang lagi saya pakai ini untuk blog Anda dan memodifikasinya sesuai dengan template yang Anda pakai saat ini. Berikut adalah bagaimana caranya membuat menu bar di blog Anda.
Tutorial :
1. Masuk ke menu Template - Edit HTML
2. Cari kode ]]></b:skin> dan salin lalu tempelkan tepat diatas kode tersebut.
/* Menu by Yogi Irhandi Simamora*/
#YISmenu{background:#c0392b;width:100%;overflow:hidden;margin-bottom:16px;font-family:Federant}
#YISmenu ul{color:white;margin:0px;padding:0px;text-align:center}
#YISmenu li{display:inline-block;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;transition:all .6s ease-in-out;float:left}
#YISmenu a{display:block;padding:8px 15px 8px 15px;text-decoration:none;font-family: 'Stalinist One', cursive;text-transform:uppercase;text-align:center;font-size:12px;font-weight:200;color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out}
#YISmenu a:hover{text-decoration:none;text-shadow:0px 0px 5px #c0392b;margin-top:-5px}
#YISmenu img{margin:-5px}
#search{float:right;margin-right:-22px}
#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-HuhU2j6GrwtitqWsu_YSvuoh09KgjScWWSmafktScQT4XlNgZGljY8OQFllKyMehKmUyR1hBrB-yB_aF8d-iJW1HzY3Yynl0PoYZylHoRGl0k6vpi_tbb8GBNTs6xtnEAaAk2nU98Y/s1600/cari.png) no-repeat 10px 6px #e74c3c;float:right;width:1px;color:white;letter-spacing:-0.5px;font:16px 'Electrolize';font-variant:small-caps;margin:0;padding:8px 15px 8px 50px;overflow:hidden;border:0;border-radius:1px;-moz-transition:all 0.1s ease 0s;-webkit-transition:all 900ms ease-out;-moz-transition:all 900ms ease-out;-ms-transition:all 900ms ease-out;-o-transition:all 900ms ease-out;transition:all 900ms ease-out;}
#search input[type="text"]:focus{background:#e74c3c;width:300px;padding:8px 10px 8px 10px;}
Keterangan : sesaikan kode background, color, dan yang lainnya dengan template Anda.
3. Kemudian salin dan tempelkan kode berikut tepat di atas salah satu kode <div id='content-wrapper'> atau <div id='main-wrapper'> atau <div id='main-outer'> atau <div id='main'>
<!-- menus START -->
<div id='YISmenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Homepage'><img src='http://shababsa7.net/images/PageImage-515435-3918738-home_icon.png' width='20px' height='20px'/></a></li>
<li><a href='http://yogismr.blogspot.co.id/p/about.html' title='About Me'>About</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/contact.html' title='Contact'>Contact</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/pasang-iklan.html' title='Pasang Iklan Termurah!'>Pasang Iklan</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/yis-privacy-police.html' title='Privacy Police'>Privacy Police</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/sitemap.html' title='Sitemap'>Sitemap</a></li>
<form action='/search' id='search' method='get'><input name='q' placeholder='search something here..' size='15' type='text'/></form>
</ul>
</div>
5. Ganti alamat blog yogismr.blogspot.com dengan alamat blog, label, atauapun alamat halaman Anda.
6.Modifikasi nama menu, ataupun yang lainnya dengan memadukan kode dan design template Anda.
7. Simpan Template dan Selesai.
Begitulah cara memasang menu bar di blog, dan jika ada yang tidak dimengerti ataupun yang ingin Anda tanyakan, tinggalkan komentar Anda di bawah ini dan saya akan secepatnya membalas pertanyaan ataupun komentar Anda. Terima kasih :)
