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”>
<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″>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 !!!
2 komentar
Wah bagus nih tips nya
BalasHapusSilahkan d coba sob
BalasHapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>