Teman blogger beberapa hari yang lalu mengirimkan email kepada saya
yang isinya menanyakan tentang cara membuat text berjalan yang ada pada
bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan
tersebut sudah saya jawab langsung melalui email juga dan sekarangpun
pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar
menu blognya ada tulisan berjalan.
Seperti biasanya, jika ada
pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya
posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin
membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.
Karena
template blogger terbagi menjadi dua yaitu template klasik dan template
baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda,
oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan
tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini
hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari
arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan
dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama
dengan yang kedua dan juga tulisan berikutnya.
Untuk template klasik silahkan ikuti langkah-langkah berikut ini :
1. Sign in di blogger dengan id sobat
2. Klik menu Template
3. klik menu Edit HTML
Copy
seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di
maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses
editting template, sobat masih mempunyai data untuk mengembalikannya ke
semula
Copy kode berikut ini lalu paste di atas kode </head>
<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"
scrollSpeed = 130
lineDelay = 0
// Do not change the text below //
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
6. Klik tombol Save Template Changes
7. Selesai.
Cara ke dua ini untuk template baru silahkan ikuti langkah-langkah berikut ini :
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut.
Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk
memberi tanda centang.
Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
6. Tunggu beberapa saat sampai proses selesai
7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah
sebelum kode </html>
<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"
scrollSpeed = 130
lineDelay = 0
// Do not change the text below //
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
8. Klik tombol SAVE TEMPLATE
9. Selesai
sedikit CATATAN, pada kode diatas ada tulisan yang saya buat kuning
, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat
inginkan. contoh : selamat datang di blog saya. atau apa saja yang
menurut sobat layak untuk di tulis di situ. contoh yang saya berikan
diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin
lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti
kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130"
merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin
cepat text berjalan, dan semakin besar nilainya maka text akan semakin
lambat. Silahkan sesuaikan dengan keinginan sobat.
Seperti yang saya
katakan di awal artikel bahwa kode yang saya berikan di atas hasil
efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil
nyatanya, silahkan sobat klik di sini.
Title : Text Berjalan di Bar menu TERBARU
Description : Teman blogger beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada p...
