Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara membuat Teks Animasi Ganda di Header dan Sidebar Blog: Panduan BloGGeR Animated Text

Panduan Blogger dan Tutorial BloGGeR tentang animasi teks ini aku yakin akan membuat sampeyan tertarik. Tidak banyak kok, kode yang digunakan. Hanya sejumput javascript yang dibungkus dalam sebuah tag DIV guna membangun bingkainya. Tepat digunakan untuk menyampaikan sesuatu kepada pembaca blog sekaligus penghias blog yang pasti menarik untuk ditampilkan. Atau mungkin akan sampeyan gunakan untuk memberi kata sambutan buat pengunjung? Atau mungkin buat iklan atau kata-kata mutiara yang nantinya akan terlihat mengalir seperti sungai Batanghari dan Kapuas? Hanya teks mengalir saja? Oho .... Tentu saja tidak. Dalam teks yang mengalir ini masih ada animasi lain yang membuat teks dalam bentuk 3 (tiga) warna dan seperti saling berkejaran. Warnanyapun bisa sampeyan rubah sesuai selera. Mau seperti warna daun, boleh. Mau seperti warna laut, boleh. Mau seperti warna pelangi, boleh. Atau bahkan mungkin pingin warna seperti bokong sampeyan? He .... he .... Aha .... Boleh boleh saja. Pokoknya terserah sampeyan, dah! Yang penting pada senang saja!

Cara membuat Teks Animasi Ganda :

  1. Login: Login to BloGGeR (Login ke BloGGeR) dengan cara menuliskan "User Name/alamat email" dan memasukkan "Pasword (Sandi)".
  2. Dasboard (Dasbor): KLIK link "Layout (Tata Letak)". Tunggu beberapa saat hingga halaman baru terbuka.
  3. Tata Letak (Layout): Saat ini sampeyan ada di halaman "Page Element/Elemen Laman". KLIK "Tambah Gadget (Add Gadget)".
  4. Widget: KLIK "HTML/Javascript". Tunggu beberapa saat.
  5. HTML/Javascript: Copy paste Javascript ke dalam box penambahan widget (HTML/Javascript).
  6. SAVE/Simpan: KLIK "SAVE/Simpan".
  7. Buka Blog (Open Blog): Lihat hasilnya dengan membuka blog sampeyan.
  8. Efek Animasi Teks ini sudah di coba di BlogSPOT (blog tempat percobaan) dan tampil sangat menarik, tanpa masalah sedikitpun.

Kode HTML dan Javascript Teks Animasi Ganda :

<div style="padding:5px 20px; border:2px solid blue; font-size:21px; font-family:Cataneo BT;font-weight:bolder;"><marquee behavior="scroll" direction="left" onmouseover="stop" onmouseout="run" scrollamount="3">
<script type="text/javascript">
var message="Gubhug Reyot Mimik Minta Nyedot Rumahnya Reyot Bajunya Copot Celana Kolornya Melorot Matanya Melotot Mau Copot Kepalanya Benjol Gara Gara Kejedot Gigi Bandot Tua Berjenggot Yang Sedang Naik Angkot Disamping Gadis Cantik Yang Pantatnya Pleyat-Pleyot"
var bgsGR1color="green" /* Warna utama teks */
var bgsGR2color="red" /* Warna teks flash pertama */
var bgsGR3color="blue" /* Warna teks flash ke dua */
var flashspeed=40 // kec. ganti warna (1/1000 dt)
var flashingletters=50 // jumlah teks pertama
var flashingletters2=50 // jumlah berwarna teks ke dua
var flashpause=30 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
</script></marquee></div>

Perhatikan supaya tak terjadi kegagalan :

  • Setelah kode html dan javascript di copy, silahkan langsung di coba dulu dan jangan lakukan perubahan apapun!
  • Coba lakukan penambahan widget di bagian header yang ruangnya cukup lebar. Bisa juga lakukan melalui penambahan widget di bawah halaman posting blog atau di atas footer.
  • Apabila belum punya elemen penambahan widget di bagian header, silahkan ikuti posting sebelum ini (cara Menambah Elemen Blog di Header). Atau sampeyan bisa juga langsung
  • Setelah efek ganda animasi teks bisa terlihat dan animasi berjalan sempurna, lakukan perubahan pada beberapa kode berikut ini :
font-size:21px;untuk merubah ukuran teks (21px)
border:2px solid blue;Merubah tebal, bentuk dan warna border
font-family:Cataneo BT;Merubah Jenis font
font-weight:bolder;Tebal teks (normal, bold, bolder)
scrollamount="3"Kecepatan teks berjalan (1 s/d 3)
var bgsGR1color="green"Warna Teks pertama (warna teks utama)
var bgsGR2color="red"Warna animasi teks ke dua
var bgsGR3color="blue"Warna animasi teks ke tiga
var flashspeed=40Kecepatan perpindahan warna
var flashingletters=50Jumlah teks beranimasi ke-2
var flashingletters2=50Jumlah teks beranimasi ke-3
var flashpause=30Waktu jeda animasi teks

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

21 komentar:

  1. wah mantap gan blog gw sekarang

    BalasHapus
  2. assalamu alaikum. saya sangat salut ama blog mas. bari kali ini saya nemukan blig yang manis abizzz n helppul bnget....

    mas ane bari terjun di dunia bisnis online bari dari aal tahun ne mas. hal tersulit bagi saya adalah promosi bl;og saya sendiri mas. tolong bantu saya bikin blog saya indah n disukai banyak orang ya mas. tolong diajari cara menghias blog ya mas..

    BalasHapus
  3. mas blognya rame banget, saya awam dalam ngeblog...kalo mas mau bagi-bagi ilmu ngedit html nya seneng saya... hehe
    email... looks35@yahoo.com
    blog... lukmannuha.blogdetik.com

    BalasHapus
  4. mantap gan blog dan tutorialnya !

    BalasHapus
  5. kerren...bisa ga aku belajar html/php dll..berapa lama ya ? buat blogku aja sampe ga tidur...itupun hasil tanya san sini...thanks for share..

    BalasHapus
  6. mantaaaaaaaabbbbbbbbbz.,.......

    BalasHapus
  7. wih, blognya keren om, full css n js

    BalasHapus
  8. SATU KATA UNTUK BLOG Gubhug Reyot: Is The Best Blog

    BalasHapus
  9. waw keren...!!
    blog mkasih gan ilmunya
    visit back y
    http://catatankampus08.blogspot.com/

    BalasHapus
  10. thanks bro.. your article helped me..
    don't forget to visit
    http://sujatalihamzah.blogspot.com/

    BalasHapus
  11. makasih ilmu nya bro yah...

    BalasHapus
  12. kaka, ajarin bkin blog . buat tugas nih . email ke septia.marisa09@gmail.com yaaa di tunggu minggu ini hari kamis . makasih banyak kaka :) :(

    BalasHapus
  13. suwun kang...sharing ilmunya
    http:iboekartunblogspot.com

    BalasHapus
  14. Mantap pak, terima kasih tutorialnya, saya newbe jadi masih muter muter sampai penat, namun tetap semangat

    BalasHapus
  15. Saya ingin nanya gmna cara mengatur jarak dari kanan ke kiri agar pas dengan header teks nya....

    BalasHapus
  16. kang jika mau di ganti animasi bisa g tuh

    BalasHapus
  17. trimakasi buat info nya
    sangat bermanfaat

    BalasHapus
  18. pak gmna caranya ganti background di animasinya? terima kasih

    BalasHapus
  19. salam kenal gan. blognya menginfirasi sekali.
    saya tertarik dengan tulisan bergerak di bawah judul blog. caranya gimana gan??kasie tau doonk.
    buat temen-temen yang saat ini butuh gambar perencanaan rumah harga murah silahkan hubungi nomor telpon/email yang ada di website:http//jasadesainrumah001.blogspot.com
    salam kenal semuanya.SUKSES SELALLU..

    BalasHapus

 
GR | Edited by | gubhug reyot