Minggu, 16 Juni 2013

Cara Membuat Teks Bergerak di Blog

Tutorial kali ini akan membahas cara membuat teks bergerak di blog beserta efek - efeknya. (Gambar tidak terlihat? Klik kanan tulisan ini, lalu pilih 'Reload Image')

Cara Membuat Teks Bergerakdi Blog – Anda tentu sering melihat teks/tulisan yang bergerak dalam suatu blog (marquee). Nah, kali ini Tips SEO + Blog – PC 123 akan memberikan script teks bergerak ini. Fungsi dari teks/tulisan yang bergerak ini hanyalah sebagai hiasan agar blog terlihat lebih menarik dan terkesan unik. Oke, to the point saja. Berikut ini script teks/tulisan bergerak beserta variasinya.
Teks/Tulisan Bergerak dari Kiri ke Kanan:
 <marquee direction="right" scrollamount="2" align="center"> Cara Membuat Teks/Tulisan Bergerak di Blog </marquee>
Preview :

Cara Membuat Teks/Tulisan Bergerak di Blog

Teks/Tulisan Bergerak dari Kanan ke Kiri:
 <marquee direction="left" scrollamount="2" align="center"> Cara Membuat Teks/Tulisan Bergerak di Blog </marquee>
Preview :

Cara Membuat Teks/Tulisan Bergerak di Blog

Teks/Tulisan Bergerak Bolak Balik Kanan Kiri:
<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Cara Membuat Teks/Tulisan Bergerak Bolak Balik di Blog </marquee>
Preview :

Cara Membuat Teks/Tulisan Bergerak Bolak Balik di Blog

Teks/Tulisan Bergerak dari Bawah ke Atas:
<marquee direction="up" scrollamount="2" align="center"> Teks/Tulisan Bergerak dari Bawah ke Atas di Blog </marquee>
Preview :

Teks/Tulisan Bergerak dari Bawah ke Atas di Blog

Teks/Tulisan Bergerak dari Atas ke Bawah:
<marquee direction="down" scrollamount="2" align="center"> Teks/Tulisan Bergerak dari Atas ke Bawah di Blog </marquee>
Preview :

Teks/Tulisan Bergerak dari Atas ke Bawah di Blog

Teks/Tulisan Bergerak Bolak Balik Atas Bawah:
 <marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Teks/Tulisan Bergerak Bolak Balik atas Bawah di Blog</marquee>
Preview :

Contoh Teks/Tulisan Bergerak Bolak Balik atas Bawah di Blog

Teks/Tulisan Bergerak Zig-Zag (Memantul)
<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Preview Teks/Tulisan Bergerak Memantul di Blog </marquee></marquee></center>
Preview :

Preview Teks/Tulisan Bergerak Memantul di Blog

Teks/Tulisan Bergerak dengan Background:
<div style="background: #FF0000; border: 2px solid #0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Teks/Tulisan Berjalan dengan Background </marquee>
</div>
Preview:

Contoh Teks/Tulisan Berjalan dengan Background

Teks/Tulisan Bergerak dengan Link:
<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="right" scrollamount="4" align="center"><a href="http://xxpc123xx.blogspot.com"/>Tips SEO + Blog - PC 123</a></marquee>
</div>
Preview :


(Ganti tulisan berwarna merah dengan url Anda, dan yang berwarna biru dengan keterangannya)
Teks/Tulisan Bergerak dengan Link, dan Berhenti Ketika Pointer Diletakkan Diatasnya:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://xxpc123xx.blogspot.com/2013/05/cara-membuat-kotak-link-exchange-di-blog.html">Cara Membuat Kotak Link Exchange di Blog</a><br/>
<a href="http://xxpc123xx.blogspot.com/2013/05/compress-css-percepat-loading-blog.html">Cara Mempercepat Loading Blog dengan CSS Compressor</a><br/>
<a href="http://xxpc123xx.blogspot.com/2012/07/membuat-sitemap-blogger.html">Cara Membuat Sitemap di Blogger</a><br/>
</marquee>
Preview:


Catatan :
-          Direction : Menentukan pola/arah gerakan teks (right, left, up, down)
-          Scrollamount : Menentukan kecepatan gerak teks. Ubah angka 2 menjadi 3 untuk mempercepat gerakan teks, atau sebaliknya.

Cara Memasang Teks/Tulisan Bergerak di Blogger :
1.     Buka Blogger dan blog Anda, lalu pilih Tata Letak.
2.     Pilih Tambahkan Gadget -> HTML/Javascript.
3.     Masukkan kode marquee/teks bergerak diatas (sesuai dengan keinginan Anda, pilih salah satu), dan klik Save/Simpan untuk melihat hasilnya.
Selamat mencoba, dan salam Blogger! Oh, iya! Jangan lupa untuk mengklik +1 dibawah ya! Thanks!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

3 komentar:

  1. terimakasih atas informasinya gan,,, tips yang sangat bermanfaat sekali

    BalasHapus
  2. wah jadi gan marque yang dari bawah ke atas . trimakasih . infonya

    BalasHapus
  3. marque ini namnya, ini yang tak cari trimakasih infonya sangat bermanfaat

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!