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.
Tidak ada komentar:
Posting Komentar