tyos2002.blogspot.com: Membuat Menu Bar Dan Sub Menu Plus Kotak Pencarian

Bagi seorang pemula, banyak yang tidak mengetahui bagaimana cara Membuat Menu Bar Dan Sub Menu Yang Disertai Dengan Kotak Pencarian, Menurut saya Menu Bar adalah sebuah menu tampilan yang berisikan nama atau label yang berguna untuk mempermudah cara kerja menu yang didalamnya diisikan dengan link-link artikel kita.

Di dalam menu bar juga dapat ditambahkan lagi beberapa sub-sub menu atau sering disebut dengan menu drop down. jika kita ingin menambah sub menu pada menu bar, maka kita hanya perlu merubah beberapa kode html yang akan dijelaskan dibawah ini;

Cara Membuat menu drop down, adalah :

1. Login pada blogger ID Anda

2. masuk ke halaman Template..

3. klik menu Edit Html

4. Cari kode ]]></b:skin> untuk mempermudah pencarian dapat menggunakan ctrl+f pada keyboard

5. Letakkan atau Pasang kode di html bawah ini di atas kode ]]></b:skin>

#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 </header> atau <div id="content-wrapper"> untuk mempermudah
pencarian dapat menggunakan ctrl+f pada keyboard
7. Lalu pasang kode di bawah ini, di atas kode </header> atau <div id="content-wrapper"> tadi.

8. Pratinjau Template
9. Jika sudah sesuai dengan keinginan, maka Simpan Template

10. Untuk melihat hasil kerja kita yang telah menambahkan menu drop down tadi, maka kita dapat meng-Klik Lihat Blog

Keterangan :

Texts yang bertanda "#" dan Edit me 1 (contoh : <li><a href='#'>Edit me 1</a></li> menjadi

<li><a href='http://tyos2002.blogspot.com/'>Artikel kita</a></li> ) silahkan dirubah dan di ganti dengan nama blog anda.

Semoga bermafaat.

Sumber : 21selection.blogspot.com

tyos2002.blogspot.com

Kamis, 27 Agustus 2015

Membuat Menu Bar Dan Sub Menu Plus Kotak Pencarian

Tidak ada komentar:

Posting Komentar