Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Text Berjalan di Bar menu

Sobat Ochim 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
  4. 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
  5. Copy kode berikut ini lalu paste di atas kode </head>
  6. <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>

  7. Klik tombol Save Template Changes
  8. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

  1. Sign in di blogger dengan id sobat
  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>
  8. <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>

  9. Klik tombol SAVE TEMPLATE
  10. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, 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.

Selamat mencoba !!!

15 Juni 2007 - Posted by | blog tutorial

33 Komentar »

  1. seems to be what in my blog…

    Komentar oleh Anang | 17 Juni 2007 | Balas

  2. aku tertarik mas ma tex berjalan di bar menu cuma aku bingung ga ngeliat contohnya….makasih….mungkin conectiku lelet

    Komentar oleh Komering | 25 Juni 2007 | Balas

  3. mungkin ayu ga bisa mengatakan banyak hal disini, ayu hanya pengin ngucapin makasih banyak…karena dengan blog bapak ayu bisa belajar banyak dan mempercantik blog ayu… jazakallah khoiron katsiron

    Komentar oleh ayu_han | 6 September 2007 | Balas

  4. Wahh..gue teringet ma templates lama aku yang nge-download di blognya mas Rohman….sekarang aku udah ganti mas…I hope mas Rohman can understand..jadi sedih nihh mas…

    Mas gue boleh copy and masukin nih posting ke blog aku nggak ??? kalau boleh makasih bangetzz mas..

    kapan-kapan main dong mas ke blog baru aku yang serba sederhana…dan kalau pun menurut mas bagus itu tidak lain berkat sumbangsih mas…

    Komentar oleh andre|scriptzone | 16 Oktober 2007 | Balas

  5. wah mas saya kok gak berhasil ya, padahal udah ngikutin apa yang dicontohin caranya

    Komentar oleh t4ksh1d0 | 1 November 2007 | Balas

  6. aku sdh jalankan perintah teks berjalannya, tapi teks gak muncul

    Komentar oleh awan_sicma | 4 Desember 2007 | Balas

  7. Script ini hanya berjalan pada internet explorer saja, untuk firefox tidak bekerja alias tidak berfungsi dengan baik.

    Komentar oleh rohman | 4 Desember 2007 | Balas

  8. mas blog ku error ni …
    kok tiba tiba berubah tampilan backrondnya…
    kok ukurannya jadi tambah kecil…
    bisa tolong kasi tau ga?
    tanks be4.,,,

    Komentar oleh siwaboy | 14 Desember 2007 | Balas

  9. mas mau nanya kalau text jalannya naik gimana codenya mas bloggerku clasic

    Komentar oleh Giyanto | 20 Desember 2007 | Balas

  10. Ok. Di Copy paste n jalan well.
    thanks.

    Komentar oleh GOsongs | 22 Desember 2007 | Balas

  11. terima kasih

    Komentar oleh ronggo | 14 Januari 2008 | Balas

  12. matur nuwun, akan saya coba dulu n boleh ya….kalo refalnya tak taruk di tempatku, biar enak nyariknya
    itu, aku douwload tempate 3 halaman kok dak bisa , erorr terusgimana kang

    Komentar oleh TUAN MUDA REDI | 1 Maret 2008 | Balas

  13. yah ….. aku gagal lagi kang nerapkan apa yang akan tulis , gimana ya caranya tolong dong akan jelasin di email saya

    Komentar oleh tuan muda tedi | 1 Maret 2008 | Balas

  14. teks berjalan mana maksudnya kang?
    aku gak ada liat kok??

    malahan di blog kang ini aja gak ada teks yang berjalan….

    Komentar oleh parlindungan sinaga | 3 April 2008 | Balas

  15. text nya di bar menu bawah, dulu di blog ini ada, tapi sekarang tidak saya pasang.. posting ini saya tulis tanggal 15 juni 2007.. dan sekarang 03 april 2008… hampir setahun…jadi banyak hal yg terjadi pada selang waktu tersebut…hehehe..

    Komentar oleh Rohman | 3 April 2008 | Balas

  16. kok gak ada ya mas tex berjalan nya..apa ada yang slah ya tapi udah gw ilutin semua

    Komentar oleh Adi jatmiko | 26 Mei 2008 | Balas

  17. mau gabung nih

    Komentar oleh lion | 31 Mei 2008 | Balas

  18. bagus..sangat jenius..

    Komentar oleh geStha_moZza bloGZ | 1 Juni 2008 | Balas

  19. mas…sy mau tny..gmn cara buat marquee yg kyk di http://www.yayasanlangit.blogspot.com (marquee yg warna teksnya hijau)…bantu sy ya mas…sy udh tny ke yg pny blog, tp dia ga mau ksh jawaban…mksh mas…

    Komentar oleh ikhsan | 11 Juni 2008 | Balas

  20. oya mas…kata yg pny blog http://www.yayasanlangit.blogspot.com ntu cari aja sendiri kok gitu aja ga bisa…na’uzubillah…ilmu kok ga mau dibagi2 ya mas?

    Komentar oleh ikhsan | 11 Juni 2008 | Balas

  21. @Iksan : kodenya seperti ini :

    <marquee direction=”left” width=”95%” scrollamount=”4″

    onmouseover=”this.stop()” onmouseout=”this.start()” height=”20″ align=”center”>

    <font color=”#00FF00″> Tulisan nya simpan di sini, bebas apa saja</font>

    </marquee>

    Sebenarnya tentang marquee sudah pernah saya bahas panjang lebar di sini!

    Komentar oleh Rohman | 12 Juni 2008 | Balas

  22. iya nih kang,

    si iksan selip baca apa ya …
    didi aja bljr kesini bolak-balik koq. makasih banyak kang !

    Komentar oleh D i d i | 12 Juni 2008 | Balas

  23. mas makasih yah.aku dah berhasil,btw.mas koq pinter bngat c dulu kuliah dimna mas?
    aku pengen kuliah jurusan IT , tapi ga ada duit..gimna c mas caranya belajat HTML,aq dah mulai tertarik nech

    Komentar oleh richardo | 22 Juli 2008 | Balas

  24. 🙂 makasih ya Kang,, TOP BGT

    Komentar oleh vritta^^ | 24 Juli 2008 | Balas

  25. Kang kalo mo buat kolom posting seperti punya akang ini caranya gimana yach,kolomnya langsung di bawah postingan kita berikut juga dengan komentar terbaru
    terimakasih kang
    wassallam

    Komentar oleh panggil gw Aliya | 24 Juli 2008 | Balas

  26. saya juga udah coba,,,tapi gak bisa jg… bingung

    Komentar oleh RADIO RAFI 105,5 FM | 26 Juli 2008 | Balas

  27. makasih kang atas ilmunya

    Komentar oleh Dg.Narang | 28 Juli 2008 | Balas

  28. bantuan…macam mana mahu tukarkan warna merah pada text berkelip

    Komentar oleh Fateh Al Qarni | 30 Juli 2008 | Balas

  29. pake kode <blink>Daftar isi</blink>

    Komentar oleh rohman | 30 Juli 2008 | Balas

  30. salam,
    bagaimana sich buat text berjalan pada head blogger…???:-j

    Komentar oleh Pelepas Gundah Hati | 17 Agustus 2008 | Balas

  31. Kang, setelah kami mencoba trik membuat teks berjalan di bar menu,ternyata tidak berhasil. padahal kami sudah mengkuti langkah-langkahnya. Gmn solusinya, Kang?

    Dulu kami pernah membuat navbar dengan langkah-langkah yang Kang Rohman berikan, alhamdulillah berhasi. Kalau ada waktu mohon Kang Rohman memriksanya di Blog kami(http://imabasurabaya.blogspot.com)

    Atas segalanya, kami ucapkan banyak terima kasih.

    Salam …

    Komentar oleh IMABA Surabaya | 31 Agustus 2008 | Balas

  32. untuk pasang fasilitas print, alhamdulillah berhasil. tinggal cara pasang teks berjalan di menu bar.

    saya kebetulan membaca postingan di http://masenchipz.com, di tutorial blognya itu banyak mengutip artikelnya Kang Rohman, dan kami ingin memasang teks berjalan yang ada paling atas blog tersebut. Bagaimana caranya, Kang? Kami yakin Kang Rohman bisa membantu …

    Kami tunggu postingannya ya Kang …

    Komentar oleh IMABA Surabaya | 31 Agustus 2008 | Balas

  33. waduh pak sebagai seorang yang belajar saya juga pengen buat text jalan di bar menu nih pak tapi dah mengikuti cara2nya kog ngga bisa di save template knp ya.. saya di tolong donk, Trima Kasih

    Komentar oleh BUDI | 31 Oktober 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: