Ini contoh yang sudah jadi:
Pada awalnya saya juga pusing tapi saya juga berhasil dalam membuat Tub Menu ini, silahkan anda juga belajar sekarng !!.
Dalam pembuatan ini bisa di sebut juga dengan (Navbar) Fungsinya ini untuk mempercepat pencarian artikel dan menu blog lainnya dan juga mempercantik blog anda.
Pada awalnya anda login dulu ke situs blog anda sendri, selanjutnya anda masuk ke Template dan kemudian klik Edit HTML, kemudian anda akan dihadapkan dengan sebuah sekrip yang sangat memusingkan menurut saya. Teapi santay saja dan jang diambil pusing saya akan memberikan tutorialnay dengan jelas kepada anda.
Lanjut saja. Sesudah masuk ke edit HTML, anda cari kode ]]></b:skin> atau <b:skin>...</b:skin>
Kalau anda tidak bisa menemukannya silahkan ada menggunakan pencarian otomatis caranya tekan CTRL lalau tekan tombol F terus copi kode langsung Enter. Nanti juga akan ketemu secara otomatis dan akan di beri wara coklat. Setelah ketumu silahkan copi kode di bawah ini. lalau klik dulu kode <b:skin>...</b:skin> selanjutnya ke bawah, pasangkan di atas kode ]]></b:skin>.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
}
Ini Contoh skrip <b:skin>...</b:skin>
Keterangan dari kode ini adalah fungsinya untuk menghilangkan navbar standar di blogger. Namaun jika anda dalam sebelumnnya sudah menghilangkan navbar tidak usah memasukan kode skrip ini. Kemudian silahkan anda masukan kode skrip ini pas di atas kode ]]></b:skin>
Langkah selanjutnya dalam membuat Tub menu yaitu pasa juga sekrip di dalam CCS tepatnya pasangkan di atas kode ]]></b:skin>. mencari CCS silahkan anda simpan dulu, tererus masuk ke sesuikan lalau klik tingkat lanjut dan cari ke bawah nanti ada tamabahkan kode CCS masukan kode di bawah ini dan simpan.
/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Anandi Rasid
Blog: AnandiRasid -:[BELAJARDESAIN]:-
URL : http://kang-anandi-rasid.blogspot.co.id/
--------------------------------------------------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
Langkah selanjutnya anda masuk lagi ke edit HTML dan cari kode <body dan kemudian anda sisipkan kode skrip di bawah pas di bawah kode ini <body expr:class='"loading" + data:blog.mobileClass'> lalau masukan kode skrip di bawah ini.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://informasi-lalulintas-anda.blogspot.co.id/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYZh_T78OjNlmgs6g1AeXInBmk9smZoekscHWPJn4p2FotKL6Mm_9eKO6scyga1GGfWjELMT0oJrtEeHNUcQ7ejCKjbG4DUZEbemVO4EuXCnMWW1_rjdzb9opS3ZANJSyMlsPazO5ONQ/s800/Beranda.png' width='20px'/></a></li>
<li><a href='#'>Menu Kiri 1</a></li>
<li><a href='#'>Menu Kiri 2</a></li>
<li><a href='#'>Menu Kiri 3</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='#'>Menu Kiri 1</a></li>
<li><a href='#'>Menu Kiri 2</a></li>
</ul>
</div>
</div>
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://harapansebuahcintaabadi.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYZh_T78OjNlmgs6g1AeXInBmk9smZoekscHWPJn4p2FotKL6Mm_9eKO6scyga1GGfWjELMT0oJrtEeHNUcQ7ejCKjbG4DUZEbemVO4EuXCnMWW1_rjdzb9opS3ZANJSyMlsPazO5ONQ/s800/Beranda.png' width='20px'/></a></li>
<li><a href='#'>Menu Kiri 1</a></li>
<li><a href='#'>Menu Kiri 2</a></li>
<li><a href='#'>Menu Kiri 3</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='#'>Menu Kiri 1</a></li>
<li><a href='#'>Menu Kiri 2</a></li>
</ul>
</div>
</div>
</div>
Keterangan dari warna merah anda ganti sesui apa yang anda butuhkan di blog anda dan jangan lupa link blognya ganti dengan link blog anda dan ( Menu ) berwarna merah silahkan ganti dengan nama yang sudah di sipakan lalau keterangan dari ( # ) yaitu buat link URL tujuan.
Nah begitu cara membuat Tub Menu di atas judul blog. mungkin sedikit rumit tav hal ini bisa mempercantik blog anda. Sekian dari saya Terima Kasig. Semoga bermanfaat bagi anda yang sudah membaca artikel saya.