Membuat Kreasi Unik Tulisan Marquee dengan CSS

Tulisan marquee atau tulisan bergerak dan kadang disebut juga tulisan bolak-balik kiri kanan tentunya bukanlah hal baru dan telah banyak blog yang membahas tutorial untuk membuatnya, sebagai tambahan koleksi tutorial rasanya tidak salah jika saya pun ikut-ikutan memberikan cara membuat tulisan dengan efek marquee, namun untuk membedakan dengan tutorial lainnya, saya akan menambahkan penggayaan CSS pada tulisan marquee tersebut.


Membuat marquee dengan CSS


Defaultnya, tulisan marquee dibuat dengan kode seperti berikut,

<marquee>the Art of SEO</marquee> , yang hasilnya seperti ini :

the Art of SEO
Namun, melalui posting ini, kita akan menambahkan CSS pada tulisan bolak-balik tersebut. Berikut adalah contoh tulisan marquee yang akan saya berikan :


the Art of SEO
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine


Yang saya buat dengan kode seperti berikut :

<div class="marqueeart">
<marquee style="font-size:3em;color:color:#333;text-shadow:2px 2px 4px #777;font-family:Courier New;">
the Art of SEO
<br />
<span style="font-size:12px;color:#333;font-family:Lucida Console;">
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine
</span></marquee></div>
<style>
.marqueeart {width:450px;height:68;background-color: #fff;
background-image: -webkit-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: -moz-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: -0-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-size: 1px 23px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);

}
</style>

Anda ingin membuatnya sendiri menurut selera anda? mari perhatikan kode di atas.

Semua kode yang saya beri warna merah adalah kode warna HTML tulisan marquee, anda dapat melakukan modifikasi sesuai selera anda dengan merubah kode warna tersebut.

Tulisan berwarna hijau tua adalah tulisan marquee yang akan ditampilkan, jika anda hanya ingin membuat tulisan satu baris, hilangkan markah

<span style="font-size:12px;color:#333;font-family:Lucida Console;">
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine
</span>

dari kode di atas.

Kode berwarna ungu adalah lebar dan tinggi background tulisan, silahkan sesuaikan dengan tempat anda meletakkan tulisan marquee tersebut.

Untuk kode berwarna biru, adalah background dari tulisan marquee tersebut.

Berikut contoh dari tulisan marquee satu baris


Selamat Datang di the Art of SEO , Blog-nya Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine

Saya membuatnya dengan kode seperti ini,

<div class="marqueeart2"><marquee style="font-size:32px;color:#fff;text-shadow:2px 2px 4px #000;font-family:Times New Roman;padding-top:5px;">Selamat Datang di the Art of SEO , Blog-nya Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine</marquee></div>
<style>
.marqueeart2 {width:450px;height:50;background-color:#a19eab;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b8bfc4', endColorstr='#a19eab');
background-image:-webkit-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-moz-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-ms-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-o-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
  background-image:linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);

}
</style>

Bagaimana? mudah bukan tutorial membuat tulisan marquee yang saya berikan? ada tambahan atau pertanyaan? silahkan pergunakan kotak komentar.
Terima kasih.

al ghifari
Artikel Membuat Kreasi Unik Tulisan Marquee dengan CSS ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;

10 comments

3/30/2013 02:17:00 AM

sungguh menabjubkan tutorialnya sob,,,
mau di caba langsung nih, tapi bikin kriting kepala tuh kayaknya dengan bahasa css....

3/31/2013 09:54:00 PM

@jamalis Busu Ribeun- Nggak qo mas Jamalis, ga bikin keriting,hehe..
selamat mencoba tutorial membuat tulisan marquee nya,dan terima kasih atas komentar pertamanya.

7/24/2013 09:36:00 PM

Makasih Gan :D


Membantu Sekali nih :D

8/11/2013 01:41:00 PM

Thanks gan akhirnya ketemu juga disini.... blog agan bnyak ilmunya n mantap kali gan.

ane masih belajar nih... ijin diterapkan diblog ane y gan sudilah mampir

http://bangozan.blogspot.com

5/27/2014 12:16:00 PM

bro itu kan tag html, terus mana dong css nya ?

3/16/2015 10:38:00 AM

mantap nih tutornya mau ane pake aja hehehe
http://acemaxs31.com

6/22/2015 10:50:00 AM

makasih ilmunya gan...

4/29/2017 12:04:00 PM

Mantap mas tutorialnya, selama ini saya fikir kalo effect seperti itu hanya bisa pake JScript, ternyata bisa juga pake css. Ijin nyoba untuk memodifikasi layout blog saya Resanarts dot com. Terima kasih ilmunya gan

10/10/2017 07:01:00 AM

Like

Post a Comment

Copyright © The Art of SEO

Designed By: the Art of SEO