Membuat Menu Navigasi Dengan Teks Berjalan

Cara membuat menu navigasi dengan teks berjalan yang akan saya bahas sekarang. Dengan bantuan marquee teks akan bisa berjalan, baik ke kiri maupun kenan. Cara pembuatan nya pun cukup mudah, hanya bantuan magic simsalabim dan jadi. ehhe
Untuk melihat contoh nya sebenarnya saya sudah buat blog baru untuk percobaan. Tapi berhubung dengan percobaan terus yang di lakukan, maka tidak awet menu ini di letakan di sana. Sebagai contoh saya kasih gambarnya, tapi teks yang di sebelah Home sebenarnya berjalan ke kiri. Karna di screenshot jadi teks nya diam.

Klik gambar untuk memperbesar. Cara membuat menu seperti ini cukup mudah. Mari lakukan :

1. Login dulu ke blog anda, Masuk Rancangan > Edit HTML.
2. Centang Expand Template Widget , Lalu untuk memudahkan pencarian tekan CTRL + F. Cari kode ini :
]]></b:skin>
3. Letakan kode di bawah ini tepat di atas kode tersebut.

#topnavbar {
background: #666;
text-shadow:0px 2px 2px #333;
-moz-box-shadow:0 0 10px #000;
border:1px solid #0e5abd;
-moz-border-radius:8px 8px 0px 0px;
-khtml-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
width: 940px;
height: 30px;
color: #ffffff;
margin: 0;
padding: 0;
}
#topnavbar a, #topnavbar a:visited {
text-shadow:0px 2px 2px #333;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
#topnavbar a:hover {
text-decoration: underline;
}
#topnavbar p {
font-size: 11px;
font-weight: bold;
padding: 0;
margin: 0;
}
.topnavbarleft {
width: 660px;
float: left;
margin: 0;
padding: 8px 0 0 10px;
}
.topnavbarright {
width: 230px;
float: right;
margin: 0;
padding: 7px 10px 0 0;
text-transform: uppercase;
text-align: right;
}
.topnavbarright a img {
border: none;
margin: 0 3px 3px 0;
padding: 0;
}

4. Simpan, Lalu anda ingin menaruh menu ini dimana ? Terserah anda. Kalau saya ingin menaruh nya di bawah
<div id='header-wrapper'>. Kalau anda ingin sama dengan saya, cari kode <div id='header-wrapper'>. Lalu letakan kode di bawah ini tepat di bawah kode tersebut.

<div align='Center'><div id='topnavbar'>
<div class='topnavbarleft'>
<div align='left'><p><marquee direction='left' width='150'>Selamat Datang Di Blog Gecok</marquee> &gt;&gt; | <a expr:href='data:blog.homepageUrl'>Home</a> | <a expr:href='data:blog.homepageUrl/feeds/postf/default'>Post</a> | <a expr:href='data:blog.homepageUrl/feeds/comments/default'>Comment</a>
</p></div>
</div>
</div></div>

Nb: Perhatikan kode yang di cetak tebal, kode itu bisa anda ganti sesuka anda.

Semoga Bermanfaat!