Cara Membuat Kotak Pencari/Search Box di Tab Menu Bar Blogger


Cara Buat Kotak Pencari/Search Box Pada Menu Bar Blogger

Terasa kurang pastinya jika menu bar tanpa kotak search/pencarian. Menu bar yang fungsinya memudahkan pengunjung menemukan laman website sobat, ditambah dengan fungsi kotak pencari yang memudahkan pengunjung menemukan artikel atau apapun yang diperlukan dengan cepat di website sobat.

Fungsi kotak pencari yang ada di website memudahkan pengunjung menemukan artikel atau apapun yang diperlukan dengan cepat di website.

Oke, sekarang sobat masuk ke dashboard blogger, pilih Tema, dan masuk ke Edit HTML.
  • Pertama, biar gampang nyari kodenya, tekan CTRL + F lalu copas kode ini : ]]> dan tekan enter. Yap trus letakin kode dibawah ini pas di atas kode ]]> ini
#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;
}
  • Setelahnya, search lagi kode 
     , bila tidak terdapat kode tersebut bisa search lagi kode seperti ini : 
    Lalu copas kode di bawah ini dan letakkan tepat di atas kode tersebut trus ganti alamat dan Judul menu juga submenunya. 
  • Terakhir klik simpan template dan lihat hasilnya di halaman depan website sobat.  Di bagian kanan tab menu bar sudah ada search boxnya,
Last, semoga Cara Membuat Kotak Pencari/Search Box di Tab Menu Bar Blogger dapat bermanfaat dan work pada website sobat. Fz akhiri.. 

Posting Komentar

0 Komentar

Close Menu