Cara Membuat Efek Berjalan (Marquee) Pada Objek Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blog. Sebenarnya tutorial ini sudah umum diketahui banyak blogger. Tetapi tidak masalah, saya akan membagikanya. Pertama, kalian haruslah tahu apa sebenarnya yang saya maksud dengan efek berjalan atau marquee itu. Marquee adalah kode HTML agar objek bisa bergerak atau berjalan. Marquee ini banyak diminati dan dipakai oleh para Blogger di dalam blognya karena sifatnya yang dinamis serta menarik untuk di lihat, efek ini juga biasa dipakai untuk menghemat tempat pada halaman blog. Untuk lebih jelasnya, kalian bisa mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik menggunakannya di blog kalian? Berikut ini adalah cara membuatnya :

• Pertama, masuk ke dasboard blog kalian.
• Masuk ke bagian Template dan klik Edit HTML.
• Letakan kode jQuery Library bawah ini tepat di atas kode </head> (Jika sudah ada kode yang sama atau sejenis, maka langkah dilewati saja).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>

• Simpan kode CSS dibawah ini di atas kode </head> atau letakan tepat di atas kode ]]></b:skin> (Jika diatas kode ]]></b:skin> silahkan hilangkan kode <style> dan </style>) : 

<style>
.marquee { overflow: hidden; width:95%; /* Atur Lebar Marquee */ border:1px solid #ddd; /* Tambahan Border Atau Garis Tepi */ background:#eee; /* Kode Warna Background */ color:#333; /* Kode Warna Teks */ padding:5px; /* Kode Jarak Paddding */ }
</style>

•  Letakan kode Plugin Jquery Marquee external dibawah ini tepat di atas kode </head> :

<!-- Plugin jQuery Marquee --> <script src='https://seocipsokbanget.googlecode.com/svn/jquery-marque.js' type='text/javascript'/>

•  Letakkan kode JavaScript di bawah ini tepat 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>

• Kemudian simpan. 

Untuk menggunakannya, kalian bisa memanggilnya. Untuk teks kalian bisa memasukkan kode dibawah ini di post atau tempat lain :

<div class="marquee" data-duration='10000' data-direction="left/right/up/down"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></div>

Untuk menggunakannya pada gambar, kalian bisa menggunakankode di bawah ini :

<div class="marquee gambar" data-duplicated="true" data-duration="9000" data-direction="left/right/up/down">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg" /></a></div>

Keterangan :

Duplikat marquee menggunakan atribut data-duplicated="true/false".

Menentukan kecepatan marquee menggunakan atribut data-duration="value" ( Hitungan Milisecond ).

Menentukan arah Marquee menggunakan atribut data-direction="left/right/up/down" ( Ke kiri , kanan, atas, bawah ).

Kode berwarna CYAN adalah kode link tujuan ketika objek diklik. Kalian bisa ,menyesuaikannya sendiri.

Kode berwarna KUNING adalah kode link gambar. Kalian bisa ,menyesuaikannya sendiri.

Bagaimana? Mudah bukan? Sekian artikel saya kali ini. Semoga bermanfaatbagi kita semua. Jangan lupa meninggalkan komentar dan like di bawah ini.

Share :

Facebook Google+ Twitter