Teks berjalan si Marquee Effects Buat Lengkapi Read More dan Percantik Blog

Maquee Effect atau teks berjalan menjadi materi Panduan Blogger yang sangat menarik. Marqueee Effects merupakan bentuk efek teks berjalan, baik kearah horizontal maupun vertical. Bisa dibentuk dengan KODE html yang teramat sederhana hingga penggunaan javascript untuk menciptakan efek marquee yang lebih komplek dan tentunya dengan hasil yang berbeda pula. Kita akan coba melihat dan membuat marque effect dari mulai yang paling sederhana hingga marquee effect yang sudah dikemas dalam bentuk box guna menampilkan teks yang disertai image.

D E M O

D E M OD E M O

Langkah untuk membuat Teks berjalan - Marquee Effects :

1. Prsedur Standar Blogger : Amankan Template terlebih dahulu! Silahkan caranya lihat di sini.
2. Edit HTML : Tetap di Edit HTML kemudian letakkan KODE di bagiani> body>.
3. Copy-Paste : Copy paste KODE-KODE untuk berbagai efek marquee di bawah ini :

1. Horizontal Marque Effect (kanan ke kiri) : <marquee behavior="slide" direction="left">Tuliskan teks di sini !!!</marquee>
2. Bouncing Marquee : <marquee behavior="alternate">Tuliskan teks di sini !!!</marquee>
3. Horizontal Marque Effect dengan pengatur kecepatan (1 s/d 3): <marquee behavior="scroll" direction="left" scrollamount="3">Tuliskan teks di sini !!!</marquee>
4. Scroll Up Marquee Effect : <marquee behavior="scroll" direction="up">Tuliskan teks di sini !!!</marquee>
5. Image & Teks : <marquee behavior="scroll" direction="left"><img src="Image.jpg" width="100" height="100" alt="" /><p>Tuliskan teks di sini !!!</p></marquee>
6. Marquee Effect dengan menggunakan box (vertical dan horizontal) :
Simpan KODE CSS brikut di atas KODE ]]></b:skin>

.marqu{
       background:#fff url(http://i50.tinypic.com/2ekn1qo.gif);
       font-size:12px;
       font-family:Times New Roman;
       font-weight:600;
       color: #003366;
       padding:0 6px;
       width:200px;
       height:210px;
       overflow:auto;
       border-top: 20px solid #666666;
       border-right: 3px solid #666666;
       border-bottom: 3px solid #666666;
       border-left: 3px solid #666666; 
       border-top-left-radius:8px;
       border-top-right-radius:8px;
}
div.contentmarqu{
       width:200px; 
       margin:0; 
       padding:0;
} 
.marqu h3{ 
       font-family:verdana; 
       font-size:16px; 
       font-weight:900; 
       color: #000099; 
}
.marqu h3:hover{ 
       color:#FF0000; 
       background:#CCCCCC;
}
.marqu h2{
       font-family:cursive; 
       font-size:18pxpx; 
       font-weight:900; 
       color:#990000; 
       background:transparent; 
       border:hidden;
}

A. Vertical Marque Effect :

Gunakan KODE berikut di bagian body atau saat melakukan posting :

<div class="marqu">
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()">
<h2>Tuliskan Judul di sini !</h2>
<i>Tuliskan teks di sini (italic) !</i>
<strong>Tuliskan teks di sini ! (tebal) -</strong>Tuliskan Teks di sini !
<a href="Link" target="_blank"><h3>Nama Link</h3></a><p>
<img src="Image.jpg" width="196" style="border:2px solid  #663300;"> 
</marquee>
</div></p>

B. Horizontal Marque Effect :

Gunakan KODE berikut di bagian body atau saat melakukan posting :

<div class="marqu">
<marquee direction="left" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()">
<h2>Tulis Judul di sini !!</h2>
<i>Tuliskan teks di sini (italic) !!</i><br/>
<strong>Tuliskan teks di sini (tebal) !! -</strong><br/> 
Tuliskan teks di sini !! <br/>
Tuliskan teks di sini !!<br/>
Tuliskan teks di sini !! <br/> 
Tuliskan teks di sini !! <br/> 
Tuliskan teks di sini !!<p>
<a href="Link" target="_blank"><h3>Nama Link</h3></a>
<img src="Image.jpg" width="196px" style="border:2px solid  #663300;" /></p>
</marquee>
</div></p>

Catatan/Keterangan :

Jangan lupa KLIK Simpan Template !!!!!!

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

Update » Kemis KLIWON, January, 12, 2012

» Happy Blogging - gubhugreyot «