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 !!!
