Cara Membuat Efek Marque Pada Gambar/Tulisan di Blog

Cara membuat efek Marque dengan jquery di Blog. Apa itu Marquee? Marquee adalah suatu program HTML untuk membuat teks atau gambar bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para Bloggers di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat, efek ini juga biasa dipakai untuk menghemat tempat pada halaman blog.

Plugin Marquee ini mungkin lain dengan beberapa jenis yang banyak beredar karena ada beberapa point plus-plus yang harus sobat tau pada plugin yang satu ini,seperti; mudah di gunakan, Support di semua browser, Responsive, Valid HTML5, Cool.

Berbicara soal efek gambar/ tulisan sebelumnya juga seocips.com telah membagikan tentang cara membuat Image Crousel Slider, efek zoom berputar pada gambar dan efek gambar animasi hover dengan deskripsi auto hide di blog. Ok sobat berikut ini adalah cara membuat Efek Marque ( efek gambar / tulisan berjalan atau bergerak di Blog ):

Cara Membuat Efek Marquee.

1. Jika sobat belum memasang jQuery Library, Letakan kode jQuery Library bawah ini tepat di atas kode </head> ( jika sudah ada kode yang sama atau sejenis maka kode langkah pertama ini dilewati saja ).

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

2. Di Blogger, klik Template -> Edit HTML.
3. Simpan code 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 */
background:#eee; /* Tambahan */
color:#333; /* Tambahan */
padding:5px; /* Tambahan */
}
</style>

4. letakan kode Plugin Jquery Marquee external dibawah ini tepat di atas kode </head> :

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

5. Letakan 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>

Cara Menggunakan efek Marquee.

Untuk memanggilnya mudah saja:
contoh memanggil efek Marque pada tulisan :

<div class="marquee" data-duration='10000'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Dan Hasilnya :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

contoh memanggil efek Marquee pada Gambar :

<div class="marquee gambar" data-duplicated="true" data-duration="9000" >
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOU-YOQqJpOnjuZ5e5cWIKYMZG_DpaGU_QGZF6oOub3bBTVWzbgh3_SGLPE-Lgwc9mFU5OUDlG43Ch3gNrprEe28I4Y-oFGIIsK6czLNdMQ-4D8ZearLomas4XA5NGjU8sCAxotBuX_A/s1600/marquee1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOU-YOQqJpOnjuZ5e5cWIKYMZG_DpaGU_QGZF6oOub3bBTVWzbgh3_SGLPE-Lgwc9mFU5OUDlG43Ch3gNrprEe28I4Y-oFGIIsK6czLNdMQ-4D8ZearLomas4XA5NGjU8sCAxotBuX_A/s1600/marquee1.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVujcv-yb93QLDQ77L4nurnNlTuQRC6oW26ItKdyKmDXcb9pcrE-GJ4YPDy2MeZoltFvDKXWV_7m_7FEPOfYYRUTqscOJA3_x36a-Zn4V2wSHK7Gt6c2I2C5uX_Qe3tsR0URlEedQGOmA/s1600/marquee2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVujcv-yb93QLDQ77L4nurnNlTuQRC6oW26ItKdyKmDXcb9pcrE-GJ4YPDy2MeZoltFvDKXWV_7m_7FEPOfYYRUTqscOJA3_x36a-Zn4V2wSHK7Gt6c2I2C5uX_Qe3tsR0URlEedQGOmA/s1600/marquee2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbAWS60S3pbijQuo2xqtGOaLSSPx11tUVF47AMdlk0sCCREXdXf_6XPPfG4YfQedQ56sCJ0CDuw7yIfevMDzbO8WIfp54VXgwOY10RG60ZHZy6ZmH8BnCV2awSHCvrISDCtqtOg-tZns/s1600/marquee3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbAWS60S3pbijQuo2xqtGOaLSSPx11tUVF47AMdlk0sCCREXdXf_6XPPfG4YfQedQ56sCJ0CDuw7yIfevMDzbO8WIfp54VXgwOY10RG60ZHZy6ZmH8BnCV2awSHCvrISDCtqtOg-tZns/s1600/marquee3.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGjnwpSAVI5DnEu2UgCxmlAsFwSS4sxVuzf8zSTvYGaPn_ZqkXqgepMdflNzGgmEjpw50PBF5_ps1Rb9ZBJVL2htXaWsJo-FTNrrpmMJrzrELAbkwokT4t5LdWno_aGJSKB_-dm42AVg/s1600/marquee4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGjnwpSAVI5DnEu2UgCxmlAsFwSS4sxVuzf8zSTvYGaPn_ZqkXqgepMdflNzGgmEjpw50PBF5_ps1Rb9ZBJVL2htXaWsJo-FTNrrpmMJrzrELAbkwokT4t5LdWno_aGJSKB_-dm42AVg/s1600/marquee4.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhppKyHGq3aTgTPHR46JNX3-wvZLdzJk4zzF8pRfcCWXB_LSv_fbI4MuWuptuy1IMhim0etOkhb6EDkDf25fMjiDsubDTvfipprEv4vRyROjbb8TjGbOTTheVysiAHkbuFmRVcF_2Xo0sY/s1600/marquee5.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhppKyHGq3aTgTPHR46JNX3-wvZLdzJk4zzF8pRfcCWXB_LSv_fbI4MuWuptuy1IMhim0etOkhb6EDkDf25fMjiDsubDTvfipprEv4vRyROjbb8TjGbOTTheVysiAHkbuFmRVcF_2Xo0sY/s1600/marquee5.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JfgSLURaqfZaqC-u7nB60VvKnqweJKcgFJ9VwAv1WltduRVSongfK3ablDIGEuTbKz90MnwlcF_P4xs1jpUa3nfIF29HSOjCMCkr3ceH5bEzlSSxQg2eXTEnKW5FvWRRw4Q5SveVfaw/s1600/marquee6.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JfgSLURaqfZaqC-u7nB60VvKnqweJKcgFJ9VwAv1WltduRVSongfK3ablDIGEuTbKz90MnwlcF_P4xs1jpUa3nfIF29HSOjCMCkr3ceH5bEzlSSxQg2eXTEnKW5FvWRRw4Q5SveVfaw/s1600/marquee6.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x13mdO5vuusp4AY1An3iVK0jafAJTqOiyrjmHFZuiz2dD9Kyt1oho0Cs7IHk9XTLDXsoO2wuKIfno7BkDuhVGv09dq0XlthpXjOwqzoGIl7mI2oxxyF3JE6YG6QKbXIuPoQpUoaA7RY/s1600/marquee7.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x13mdO5vuusp4AY1An3iVK0jafAJTqOiyrjmHFZuiz2dD9Kyt1oho0Cs7IHk9XTLDXsoO2wuKIfno7BkDuhVGv09dq0XlthpXjOwqzoGIl7mI2oxxyF3JE6YG6QKbXIuPoQpUoaA7RY/s1600/marquee7.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqdA7TWuIhY7KcqJgPGvSaZOOS68qozvffqwxYmuDB_qkBgWijiKBmNO2HavOmYfAj_kaT8e7UPpD4-sjzSTLYLzvM-MjJwpkjEwypIVrG6p4n3T2Q2N2RsyC5DDgUou-3a1KKJak_M4/s1600/marquee8.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqdA7TWuIhY7KcqJgPGvSaZOOS68qozvffqwxYmuDB_qkBgWijiKBmNO2HavOmYfAj_kaT8e7UPpD4-sjzSTLYLzvM-MjJwpkjEwypIVrG6p4n3T2Q2N2RsyC5DDgUou-3a1KKJak_M4/s1600/marquee8.jpg" /></a></div>

Dan Hasilnya:

Note :

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 ).

Ok sobat sekian tutorial Blog tentang Cara Membuat Efek Marque atau efek Pada Gambar berberak/ berjalan atau efek Tulisan tulisan bergerak/berjalan di Blog yang dapat Seocips.com dibagikan untuk saat ini dan semoga saja bermanfaat untuk sahabat-sahabat Blogger lainnya