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>.
Silakan Modifikasi File li-scroller.css.
Untuk Samplenya Bisa Lihat Disini
Semoga Artikel Sederhana ini Bermanfaat dan Selamat Mencoba !!!
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>.
<script src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.li-scroller.1.0.js” type=”text/javascript”></script>Selanjutnya Tambahkan Script Berikut Masih Pada Header.php
<link rel=”stylesheet”
href=”<?php bloginfo(‘template_directory’); ?>/styles/li-scroller.css”
type=”text/css” media=”screen”>
Untuk Menampilkan Artikel Ke dalam Scroll News Pada Theme WordPress, tambahkan Script Dibawah :<script type="text/javascript">
$(function(){
$("ul#ticker01").liScroll();
});
</script>
<ul id=”ticker01″>Untuk Melakukan Modifikasi Pada Style Scrool News,
<?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>
Silakan Modifikasi File li-scroller.css.
Untuk Samplenya Bisa Lihat Disini
Semoga Artikel Sederhana ini Bermanfaat dan Selamat Mencoba !!!
