Scroll News Ticker Sederhana Menggunakan jQuery LI Scroller Pada WordPress

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.Sumber: WIKI

Tulisan berikut merupakan Tutorial Sederhana Memanfaatkan Pustaka jquery Li  Scroller untuk membuat Scroll News Pada Engine WordPress. Berikut Langkah – langkahnya.

Download Javascript & CSS dibawah ini :

Setelah Kedua File Tersebut Diatas Selesai Di download, Upload File jquery.li-scroller.1.0.js Ke dalam direktori theme WordPress anda misalnya saja /wp-content/themes/themekamu/js/jquery.li-scroller.1.0.js , begitu juga untuk script CSS nya ( /wp-content/themes/themekamu/li-scroller.css .

Agar Kedua Script Diatas Bisa di gunakan, Pada WordPress kita perlu memanggilnya pada file header.php sebelum tag </head> dan sesudah tag <head>.

Contoh :

<script src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.li-scroller.1.0.js” type=”text/javascript”></script>

<link rel=”stylesheet”
href=”<?php bloginfo(‘template_directory’); ?>/styles/li-scroller.css
type=”text/css” media=”screen”>

Selanjutnya Tambahkan Script Berikut Masih Pada Header.php

<script type="text/javascript">
$(function(){
 $("ul#ticker01").liScroll();
});
</script>

Untuk Menampilkan Artikel Ke dalam Scroll News Pada Theme WordPress, tambahkan Script Dibawah :

<ul id=”ticker01″>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<li><span><?php the_time(‘l, d/m/Y ‘); ?></span>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

Untuk Melakukan Modifikasi Pada Style Scrool News,
Silakan Modifikasi File li-scroller.css.

Untuk Samplenya Bisa Lihat Disini

Semoga Artikel Sederhana ini Bermanfaat dan Selamat Mencoba !!!

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.