Cara Membuat Menubar dan SubMenu di Blog

Cara Membuat Menubar dan SubMenu di Blog. Membuat submenu bukanlah hal yang mudah tetapi dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak menjadi hal sulit. Bagaimana cara membuatnya? Langsung saja anda ikuti langkah-langkah berikut :

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>

#navbarmenu{width:930px; float:left; font-size:12px; color:#FFF; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#992211; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#4a4d4c; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#992211; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #4a4d4c; border-left:1px solid #4a4d4c; border-right:1px solid #4a4d4c} #nav li li a:hover{background: #4a4d4c; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav 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='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href="http://istiawanblog.blogspot.com">Home</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/artikel">Artikel</a>
<ul>
<li><a href="http://istiawanblog.blogspot.com/search/label/tips%20karir">Tips Karir</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/kesehatan">Kesehatan</a></li>
</ul>
</li>
<li><a href="http://istiawanblog.blogspot.com/search/label/tutorial">Tutorial Blog</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

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 dengan tulisan judul menubar tersebut, seperti: Home, Artikel, Tutorial atau lainnya 

Demikian Cara Membuat Menubar dan SubMenu di Blog, mungkin ada manfaat.

Cara Membuat Teks Berjalan di Menu Bar

Cara Membuat Teks Berjalan di Menu Bar.Dalam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Tidak lupa kan? Kalau lupa teman-teman semua bisa buka kembali postingan itu. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1. Pertama kali yang harus kita lakukan adalah login ke blogger

2. Pada menu Design -> Edit HTML

3. Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";

msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4. Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda.  Demikian tadi tutorial singkat Cara Membuat Teks Berjalan di Menu Bar, selamat mencoba.

Semoga bermanfaat