Cara Membuat Menu Bar di Blog


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(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/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 :)

Cara Menghilangkan Navbar Blog



YIS - Navbar Blog atau biasa disebut Blogger Navigation Bar adalah sebuah alat navigasi yang berbentuk Frame dan berisi beberapa menu dan mempunyai kegunaan masing-masing. fungsi-fungsi pada navbar blog sangat membantu kita dalam ngeblog di blogger.

Namu, sebelum navbar dihapus, ada muncul 1 pertanyaan. Haruskah navar blog dihapus?. Untuk menjawab pertanyaan tersebut menurut YIS ada 3 alasan, yaitu pertama adalah sangat mengganggu, kedua adalah dapat membuat design yang kita buat jadi tidak terlalu mengesankan lagi, dan yang ketiga adalah blog akan terasa semakin ringan.

Jika merasa terganggu dengan penampakan widget navbar blog ini dan ingin membuat design Anda terlihat lebih bagus dan pastinya semakin ringan, maka cara menghapus, menghilangkan, dan menyembunyikannya adalah sebagai berikut.

Cara 1 :

1. Masuk ke menu Template - Edit HTML
2. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatasnya.

#navbar-iframe{display:none !important;}
#navbar, #navbar-iframe{height:0px;visibility:hidden;display:none}

3. Simpan Template dan Selesai.

Cara 2 :

1. Masuk ke menu Tata Letak/Layout - Klik edit pada bagian widget navbar
2. Klik off pada pilihan yang paling bawah.
3. Simpan/Save dan selesai.

Cara 3 :

1. Masuk ke menu Template - Edit HTML
2. Cari kode <b:widget='id='Navbar' locked='true' title='Navbar' type='Navbar'> 3. Hapus kode tersebut hingga kode </b:widget>
4. Simpan Template dan selesai.

Itu saja dari saya tentang bagaimana cara menghilangkan, menyimbunyikan, dan menghapus navbar dari blog. Bila ada pertanyaan atau yang tidak dimengerti, silahkan tinggalkan komentar Anda dan saya akan secepatnya menjawab pertanyaan Anda. Terima kasih :)
 
- ©2013 - 2016 Yogi Irhandi Simamora V.3 -