Membuat Menu Bar dan Kotak Pencarian pada blog - Hai sahabat Farih Komputer, Pada sharing ilmu komputer kali ini yang berjudul Membuat Menu Bar dan Kotak Pencarian pada blog, kami telah menyediakan artikel yang cukup lengkap. Semoga postingan blog yang saya tulis ini dapat sahabat pahami. Ini dia artikelnya.

Judul : Membuat Menu Bar dan Kotak Pencarian pada blog
Sub Judul : Membuat Menu Bar dan Kotak Pencarian pada blog

Membuat Menu Bar dan Kotak Pencarian pada blog

Menu bar yang berdampingan dengan search box mulai tenar di kalangan blogger Indonesia semenjak salah satu webmaster kita, Agus Ramadhani memasangnya di bawah header website miliknya. Saat ini, mungkin ada ratusan blogger yang memasang menu bar plus kotak pencarian di blog mereka. Menurut saya, banyaknya blogger yang memasang menu bar seperti itu sangatlah wajar karena menu bar yang berdampingan dengan kotak pencarian mempunyai tampilan yang sangat manis. Untuk melihat bgaimana tampilan dari menu bar yang saya jelaskan di atas, coba sobat blogger klik gambar di bawah ini untuk memperbesar ukurannya!

Bagaimana pendapat sobat blogger tentang menu bar di atas? Manis bukan? Menu bar ini bisa sobat blogger modifikasi sesuai dengan keinginan sobat blogger sehingga setiap menu memiliki sub menu (Bercabang).

---

Cara Memasang Menu Bar Plus Kotak Pencarian Di Blog

---

• Sign In di blogger.com
• Pada Menu Drop Down, sobat pilih Template
• Kemudian klik tombol "Edit HTML" dan Klik Proceed
• Kasih tanda centang pada Expand Widget Template.
• Copy Paste kode berikut tepat di atas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#222;
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:#222;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #222;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #222;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #222;
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 #222;
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 #222;
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;
}

• Pasang kode berikut, sebelum kode <div id="content-wrapper">

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 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 == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbtIGbBBsIJ6MbEL8mivVJzT5nq1mnW6nuEJCBWcsJWk4UWIt74S_I-gpZFdfh6uvw-0KEkHWAZNd7Xs2wgozd247_68jrnFG4o6gDwzH0MGIlP72GveWAJ52Pkk23gyikEYBJ__epKI/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

• Klik Preview terlebih dahulu. Kalau hasilnya sudah mantap, jangan lupa untuk menyimpan template sobat blogger.

Tambahan :

1. Setiap template memiliki kode yang berbeda, jadi, jika di dalam template sobat blogger tidak terdapat kode <div id="content-wrapper"> sobat blogger bisa meletakkan kode HTML di atas sebelum kode <div id="header-wrapper"> atau<div id="outer-wrapper"> atau <div class='tabs-outer'> atau sebelum kode <div class='tabs-cap-top cap-top'>
2. Jika sobat blogger ingin mengganti warna dari menu bar di atas, sobat blogger tinggal mencari kode #222 kemudian di ganti dengan kode warna yang sesuai dengan warna template sobat.
3. Ganti http://URL-YANG-DI-TUJU.blogspot.com/ dengan URL blog sobat. Dan jangan lupa juga untuk mengganti "Menu" dan "Sub Menu" sesuai Title yang diinginkan.

Itulah Artikel Membuat Menu Bar dan Kotak Pencarian pada blog

Sekian Membuat Menu Bar dan Kotak Pencarian pada blog, mohon maaf bila dirasa masih banyak kekurangannya mudah-mudahan bisa memberi manfaat untuk sahabat semua. Baiklah, sekian postingan Farih Komputer kali ini.

Anda sedang membaca artikel Membuat Menu Bar dan Kotak Pencarian pada blog dan artikel ini url permalinknya adalah http://farihcomputer.blogspot.com/2014/12/membuat-menu-bar-dan-kotak-pencarian.html Semoga artikel ini bisa bermanfaat.

Tweet