Pada kesempatan pos pertama ini aku ingin belajar memodifikasi template dasar,aku akan membuat menu bar sesuai dengan yang aku inginkan, semoga sukses.
........ akhirnya aku berhasil juga buat menu, inilah langkah-langkah yang aku lakukan.
1. Masuk ke akun Blogger.
2. Klik halaman "Template" tekan tombol edit template.
4. Terus silahkan cari kode ]]> skin dengan menggunakan Ctrl + F.
5. Tempatkan kode script di bawah ini tepat 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. Berikutknya cari kode <div id="content-wrapper"> dan tambahkan kode script di bawah ini tepat diatas kode <div id="content-wrapper">, bila tidak ada tempatkan dibawah kode </b:section> atau di bawah kode ini:
<div class='header-cap-bottom cap-bottom'>
<div class='header-cap-bottom cap-bottom'>
<div
class='cap-left'/>
<div
class='cap-right'/>
</div>
</div>
</header>
ini hasil percobaanku sendiri karena tidak menemukan kode <div id="content-wrapper"> di template simple blogspotku.............
<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><ahref='http://Rancang-template.blogspot.com/'>Edit me 1</a></li>
<li><a href='http://Rancang-template.blogspot.com/'>Edit me 2</a></li>
<li><a href='http://Rancang-template.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http://Rancang-template.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://Rancang-template.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://Rancang-template.blogspot.com/'>Edit me 4</a></li>
<li><a href='http://Rancang-template.blogspot.com/'>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/AVvXsEjGDw2tmedUx_Hqc9GRZ03qVEjL0ojsDaazHxbcHo3TNSdzy6C6lEQ1Ou9qDmnAgkrRk2QAzBbYLRgbEiGa7oXduBGM3ItT4L7REc17NScmSe8WHqJ7kwaygFOo1YUZF-BGebfdF7faows/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
7. Simpan Template.
Catatan:
Demikian contoh pembuatan menu yang aku lakukan.
- Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link
postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan berwarna Biru (Edit me / Submenu) dengan tulisan judul menubar tersebut, seperti: About,
Contact, Guest book atau lainnya
- Untuk mengubah panjang menubar bisa sobat ganti tulisan
920px menjadi sesuai dengan keinginan
- Untuk mengganti warna menubar, coba cari kode
background:#de360f; . Ganti kode yang berwarna orange dengan kode warna
yang diinginkan.
- Jika ingin
menambah item menubar (list), Copy kode yang bergaris bawah, dan Paste di bawah
kode yang bergaris bawah tersebut.
- Bila kode <div id="content-wrapper"> tidak ada, coba ganti dengan <div id="header-wrapper"> atau <div id="outer-wrapper">
Tidak ada komentar:
Posting Komentar