Sedikit Info Seputar
Membuat Effect Marquee dengan jQuery Marquee Plugin!
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Membuat Effect Marquee dengan jQuery Marquee Plugin!, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Basic,
Artikel jQuery,
Artikel Marquee,
Artikel Plugin, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Membuat Effect Marquee dengan jQuery Marquee Plugin!
Terbaru
link: Membuat Effect Marquee dengan jQuery Marquee Plugin!
Berbagi Membuat Effect Marquee dengan jQuery Marquee Plugin! Terbaru dan Terlengkap 2017

Mengapa saya share plugin ini? karena ada beberapa point plus-plus yang harus sobat tau pada plugin yang 1 ini, berikut saya review dikit kelebihan Jquery Marquee Plugin ini :
- Mudah di gunakan!
- Support di semua browser!
- Responsive
- Valid HTML5
- Cool! ^_^
- Buktikan sendiri!
Untuk sobat yang penasaran, berikut demo-nya :
Efek Marquee pada Text :
Efek Marquee pada Gambar
Cara Pemasangan :
Langkah-1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum kode
</head>
pada halaman Edit Template :<!-- Library jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Langkah-2 : Simpan Plugin Jquery Marquee external di bawah ini tepat sebelum kode
</head>
:<!-- Plugin jQuery Marquee -->
<script src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js' type='text/javascript'/>
Langkah-3 : Menambahkan CSS di bawah ini sebelum kode
</head>
:<style>
.marquee {
overflow: hidden;
width:95%; /* Atur Lebar Marquee */
border:1px solid #ddd; /* Tambahan */
background:#eee; /* Tambahan */
color:#333; /* Tambahan */
padding:5px; /* Tambahan */
}
</style>
Langkah-4 : Menambahkan JavaScript di bawah ini sebelum kode
</body>
:<script type='text/javascript'>
//<![CDATA[
// Settingan Default Marquee nya disini bro!
$('.marquee').marquee({
//Atur kecepatan marquee ( Hitungan Milisecond ) :
duration: 9000,
//Atur 'Delay' Waktu Sebelum Marquee dimulai :
delayBeforeStart: 0,
//Atur Arah Marquee 'left' atau 'right' :
direction: 'left',
//Aktifkan Duplikat Marquee 'true' atau 'false'
duplicated: false,
//Atur Jarak Duplikat Marquee ( Hitungan Pixel ) :
gap: 10,
//Hentikan Marquee ketika di sentuh 'true' atau 'false'
pauseOnHover: true
});
//]]>
</script>
Langkah-5 : Cara Konfigurasi Efek Marquee di HTML dengan Tambahan Atribut penting dalam Plugin Marquee ini :
<div class="marquee">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
data-duplicated="true/false"
<div class="marquee" data-duplicated="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
data-duration="value"
( Hitungan Milisecond ) :<div class="marquee" data-duration='500'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="marquee" data-duration='100'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
data-direction="left/right/up/down"
- Ke Kiri ( ← ) :
<div class="marquee" data-direction='left'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
- Ke Kanan ( → ) :
<div class="marquee" data-direction='right'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
- Ke Atas ( ↑ ) :
<div class="marquee" data-direction='up' data-duration='3000' style='width:50%;height:30px;'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
- Ke Bawah ( ↓ ) :
<div class="marquee" data-direction='down' data-duration='3000' style='width:50%;height:30px;'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Sekian Postingan tentang Cara Memasang Efek Marquee di Blog agar Support di semua Browser dari saya. jika ada yang ditanyakan, silahkan biasakan untuk berdiskusi melalui kotak komentar di bawah ini. terima kasih
Happy Blogging,
- A.K.A ` KangRian! -