Cara Membuat Menu Bar pada Blog

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Karena banyaknya sobat blogger yang berkomentar karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#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{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#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:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#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
}

7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>

Keterangan:

• 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) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
• 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.

Sumber : http://blognya-reggy.blogspot.com/2011/11/cara-membuat-menu-bar-pada-blog.html?showComment=1341942024918#c1632195362320969702

Cara Mengganti Icon Blogger pada Address Bar

Suatu ketika teman-teman berkunjung ke suatu blog, dan melihat ada yang aneh dengan blog tersebut, padahal ya membuat blognya menggunakan jasa blogger juga seperti teman-teman. Apa tuh keanehan yang dimaksud? Itunya lho icon yang ada di Address Bar-nya kok nggak berlogo Blogger[Contoh Blog ini:(tulisan T4+B+Logo Blogger^]. Wah jadi pengen juga membuat icon seperti itu, tapi bagaimana caranya ya...?

Oh iya, maksudnya seperti ini lho:

Nah aslinya seperti di atas itu icon yang muncul di blonya teman-teman (kalau belum diotak-atik sama sekali). tapi teman-teman bisa mengganti icon Blogger tersebut dengan fotonya teman-teman ataupun gambar menarik lainnya.

Untuk mengganti icon tersebut tidaklah sulit, cukup terapkan langkah-langkah berikut:

1. Login ke Blogger.

2. Klik Tata Letak >> Edit HTML

3. Lalu cari kode </head>, dan letakkan kode berikut sebelum kode </head>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic7qlnhYrjrEBwrHvVgPW6uSMhy1pzgcGnrRfWRDcfkxiZdPXkoIdO2mZKpsLr1VnA_Ikbq9TRoXOESIndBM3cq7ygF1IcTiOQ6O0KUJ53lAdRMLIWqDF9KCnxywgj2-d_QTutPDPardEU/' rel='SHORTCUT ICON'/>

Keterangan:
Yang Biru itu bisa diganti dengan alamat URL gambarnya teman-teman.


4. Klik Simpan Template.

5. Selesai.

Coba lihat dah, bagaimana tampilan address bar blogger anda sekarang...^




Semoga Bermanfaat []