News Update :

Desain Blog Anda Dengan Menu Scroll Text

Thursday, May 17, 2012

Untuk mempercantik blog anda dapat membuat scrolling marquee ( text / gambar berjalan atau bergulir ) dengan menggunakan tag (marquee). Anda dapat menggunakannya dengan model dari kiri ke kanan, kanan ke kiri, atas ke bawah, bawah ke atas sesuai dengan pilihan anda.
 tips : jika anda tidak dapat melihat kode di bawah refresh halaman ini.

Contoh Kode:
1. Text Berjalan ke kanan dan berhenti  di mana text di tempatkan.

<!-- HTML codes by http://waoneenoaw.blogspot.com --> <marquee behavior="slide" direction="left">Your slide-in text goes here</marquee> <p style="font-size:10px;"><a href="http://waoneenoaw.blogspot.com/p/daftar-isi.html/">Templates</a></p>

     contoh :

Your slide-in text goes here

2. Text berjalan dari kanan dan muncul lagi dari kanan.

<!-- HTML codes by http://waoneenoaw.blogspot.com --> <marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee> <p style="font-size:10px;"><a href="http://waoneenoaw.blogspot.com/p/daftar-isi.html/">Templates</a></p>

     contoh :

Your scrolling text goes here

3. Text berjalan bolak-balik.

<!-- HTML codes by waoneenoaw.blogspot.com --> <marquee behavior="alternate">Your bouncing text goes here</marquee> <p style="font-size:10px;"><a href="http://waoneenoaw.blogspot.com/p/daftar-isi.html/">Templates</a></p>

     contoh :

Your bouncing text goes here

4. Text berjalan ke atas.

<!-- HTML codes by waoneenoaw.blogspot.com --> <marquee behavior="scroll" direction="up">Text anda di sini .,.,. !!! ^_^</marquee> <p style="font-size:10px;"><a href="http://waoneenoaw.blogspot.com/p/daftar-isi.html/">Templates</a></p>

     contoh :

Text anda di sini .,.,. !!! ^_^

5. Text Bergerak dengan kecepatan lambat, sedang, dan cepat.

<!-- HTML codes by waoneenoaw.blogspot.com --> <marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee> <p style="font-size:10px;"><a href="http://waoneenoaw.blogspot.com/p/daftar-isi.html/">Templates</a></p>

     contoh :

Slow scroll speed Medium scroll speed Fast scroll speed

  6. Text berjatuhan.

<!-- HTML Codes by Quackit.com --> <marquee style="z-index:2;position:absolute;left:105;top:50;font-family:Cursive;font-size:14pt;color:ffcc00;height:165;"scrollamount="5" direction="down">Text anda di sini ... !!! ^_^!Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^!Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^!Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:263;top:67;font-family:Cursive;font-size:14pt;color:ffcc00;height:486;"scrollamount="6" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:195;top:74;font-family:Cursive;font-size:14pt;color:ffcc00;height:82;"scrollamount="6" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:75;font-family:Cursive;font-size:14pt;color:ffcc00;height:460;"scrollamount="3" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:32;top:5;font-family:Cursive;font-size:14pt;color:ffcc00;height:191;"scrollamount="1" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:319;top:82;font-family:Cursive;font-size:14pt;color:ffcc00;height:491;"scrollamount="6" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:110;top:71;font-family:Cursive;font-size:14pt;color:ffcc00;height:150;"scrollamount="3" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:12;top:100;font-family:Cursive;font-size:14pt;color:ffcc00;height:58;"scrollamount="1" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:283;top:66;font-family:Cursive;font-size:14pt;color:ffcc00;height:355;"scrollamount="2" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:254;top:56;font-family:Cursive;font-size:14pt;color:ffcc00;height:350;"scrollamount="2" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:3;top:12;font-family:Cursive;font-size:14pt;color:ffcc00;height:400;"scrollamount="7" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:272;top:50;font-family:Cursive;font-size:14pt;color:ffcc00;height:353;"scrollamount="2" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:236;top:39;font-family:Cursive;font-size:14pt;color:ffcc00;height:482;"scrollamount="2" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:142;top:98;font-family:Cursive;font-size:14pt;color:ffcc00;height:27;"scrollamount="7" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:275;top:95;font-family:Cursive;font-size:14pt;color:ffcc00;height:81;"scrollamount="5" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:273;top:59;font-family:Cursive;font-size:14pt;color:ffcc00;height:499;"scrollamount="2" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:65;top:49;font-family:Cursive;font-size:14pt;color:ffcc00;height:436;"scrollamount="7" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:282;top:112;font-family:Cursive;font-size:14pt;color:ffcc00;height:337;"scrollamount="7" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:158;top:35;font-family:Cursive;font-size:14pt;color:ffcc00;height:402;"scrollamount="5" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:318;top:94;font-family:Cursive;font-size:14pt;color:ffcc00;height:55;"scrollamount="7" direction="down">Text anda di sini ... !!! ^_^</marquee><marquee style="z-index:2;position:absolute;left:136;top:74;font-family:Cursive;font-size:14pt;color:ffcc00;height:430;"direction="down">Text anda di sini ... !!! ^_^</marquee><span style="position:absolute;top:400px"><p style="font-family:arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/create-a-blog/">How to make a blog</a></p></span>

     contoh :
 
Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^Text anda di sini ... !!! ^_^

Untuk penerapannya anda membutuhkan HTML/javascript yaitu dengan cara :
  1. Login ke blogger anda.
  2. Pilih tata letak
  3. Tambah widget
  4. Pilih HTML/javascript
  5. Paste kode yang anda pilih di atas
  6. Save
ihat hasilnya blog anda tampak lebih cantik dan dinamis. selain Desain Blog Anda Dengan Menu Scroll Text anda juga dapat memasang Trafik widget alexa.
semoga postingan kali ini bermanfaat.
Share this Article on :

0 komentar:

Post a Comment

twitter maskolis
 

© Copyright kupas tuntas tutorial blogging 2010 -2011 | Design by Boxtafe Collection | Published by waone - AREMA | Powered by Blogger.com.