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 :
- jquery.li-scroller.1.0.js
- li-scroller.css
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>.
<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
DisiniSemoga Artikel Sederhana ini Bermanfaat dan Selamat Mencoba !!!
Belum ada tanggapan untuk "News Ticker Menggunakan jQuery WordPress"
Post a Comment