Cewek Cowok Blog: Cara membuat Menubar dan search box di blogger

Cara membuat Menubar dan search box di blogger

Salam hangat para sobat cewek cowok blog, kalau beberapa waktu yang lalu admin psoting cara daftar gratis di blogger klik disini. Kali ini admin coba berikan tips cara membuat menu bar di blog. Sebelum melangkah sobat sudah paha aapa yang di maksud dengan menu bar ? jika belum simak penjelasan berikut ini.

Menu bar adalah sebuah kotak menu yang berisi link navigasi. Fungsi dari menu bar sendiri adalah untuk menyimpan link-link postingan di suatu blog agar pengunjung blog dapat lebih mudah mengunjungi halaman utama yang ada pada blog sobat. Jadi sobat cewek cowok blog sudah paham ? jika belum perhatikan screenshot di bawah ini :

Selain menu bar kita juga dapat membuat sub menu kebawahnya, lihat gambar diatas. Jika sobat ingin memasang sub menu dari link sobat tinggal menambah sedikit kode yang akan dijelaskan dibawah. Jadi sudah tau apa itu menu bar ? naah, berikut ini langkah-langkah membuat menu bar :

1. Silahkan sobat login di blogger

2. Masuk ke halaman template

3. Edit HTML

4. Cari kode ]]></b:skin>

Untuk memudahkan pencarian sobat langsung saja gunakan kombinasi ctrl+f

5. Pasang kode dibawah ini tepat diatas kode ]]></b:skin> . lihat gambar diatas

#menubar{
width:920px;
height:38px;
background:#de360f;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#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:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
text-decoration:none;
background:#F0512D;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #de360f;
border-radius:0px 0px 8px 8px;
}
#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
}
#search{
border:1px solid #F0512D;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #F0512D;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}

6. Selanjutnya cari kode <div id="content-wrapper">

7. Pasang kode dibawah ini tepat diatas kode <div id="content-wrapper"> beberapa temple

Bog tidak memiliki kode diatas, sobat bisa cari kode <div id='header ... jika kode

<div id=’header masih tidak ditemukan

Namun beberapa thema blog tidak mendukung kode <div id="content-wrapper"> dan <div id='header ...

8. Sobat bisa copy kode dibawah ini dibawah kode </b:section>

Sedikit bingung perhatikan gambar dibawah ini

Copas code dibawah ini

<div id='menubar'>

<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Edit me 1</a></li>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Edit me 2</a></li>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Edit me 3</a>
<ul>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Sub menu 1</a></li>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Edit me 4</a></li>
<li><a href='https://cwek-cwok.blogspot.co.id/'>Edit me 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel disini..";}' onfocus='if (this.value == "Cari artikel disini..") {this.value = ""}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLsB3y4HEZu8LegYY_qBpsMTk6pH_wPIyTv0NHnHySl37Yj165Q1M1Hwzi4CjKMSMWxnXIIBi751N-mZF5qOMdVYUa0aj7B5Ybu3L8kPaNjeQVQHg5Uil7i4a5xv-SvfX7qEhFDMxjLI/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

9. Simpan Template dan liat hasilnya

Keterangan:

Sobat bisa ganti tulisan berwarna Biru dengan url link menu bar yang diinginkan, misalnya link postingan, link label, atau link lainnya.

Ganti tulisan berwarna Orange ( Edit Me ) dengan tulisan judul menubar tersebut, seperti: About, Contact, atau lainnya ( Sobat bisa kreasi sendiri ) sesuai dengan tulisan warna Biru )

Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat

Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.

Bagaimana sobat ? mudah kan. Sobat perlu ingat, kunci utama keberhasilan membuat menubar dansearch box di blogger yaitu ketelitian dalam mengedit dan memasang kode htmlnya. Misalkan ada yang kurang atau kesalahan sedikit, menubar itu malah jadi gagal alias tidak terpasang. Jadi, sobat harus lebih teliti ya agar tidak ada kesalahan dalam memasang kodenya.