Membuat vertical scrolling Artikel blogger dengan Jquery
Membuat vertical scrolling Artikel blogger dengan Jquery
Apa itu vertical scrolling artikel? Yaitu salah satu bentuk penerapan jquery pada artikel blog. Yaitu dengan gerakan scrolling artikel secara vertical. Anda bisa manampilkan potongan artikel blog Anda melalui widget vertical scrolling artikel atau news ticker ini sehingga akan mempercantik tampilan blog sekaligus menarik minat para pengunjung blog untuk membaca artikel artikel Anda yang lain. Kira kira septi ini tampilanya :
Dalam tips blogger kali ini kita akan belajar membuatnya. Cara membuatnya cukup mudah.
1. Log In ke Blogger http://blogger.com/
2. Pada beranda/Dasbor pilih Rancangan >> Edit HTML
PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki backup untuk mengembalikannya seperti semula.
3. Kemudian centan pilihan Expand Widget Template.
4. Cari kode <head> kemudian ganti kode tersebut dengan kde di bawah ini :
Dalam tips blogger kali ini kita akan belajar membuatnya. Cara membuatnya cukup mudah.
1. Log In ke Blogger http://blogger.com/
2. Pada beranda/Dasbor pilih Rancangan >> Edit HTML
PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki backup untuk mengembalikannya seperti semula.
3. Kemudian centan pilihan Expand Widget Template.
4. Cari kode <head> kemudian ganti kode tersebut dengan kde di bawah ini :
<head>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 3,
auto:500,
speed:2000
});
});
</script>
Anda bisa merubah kecepatan sesuai keinginan dengan mengganti kode speed:2000 (2 detik) dan jumlah artikel yang akan ditampilkan visible: 3
5. Langkah selanjutnya cari kode ]]></b:skin> dan letakkan kode di bawah ini diatasnya :
* { margin:0; padding:0; }
#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}
#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }
Anda bisa mengubah ukuran font dan warna dengan memodifikasi kode di atas.
6. Jika sudah kemudian cari kode <div id='sidebar-wrapper'> lalu letakkan kode dibawh ini setelah kode <div id='sidebar-wrapper'> atau Anda bisa meletakkanya melalui gadget/widget HTML/Javascript pada blogger.
<div id='newsticker-demo'>
<div class='newsticker-jcarousellite'>
<ul>
<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>
<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>
<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>
<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>
</ul>
</div></div>
Ganti kode diatas sesuai url artikel,url gambar, dan deskripsi artikel yang ingin Anda tampilkan. Demikian tips blogger kali ini semoga bermanfaat.
Posting Komentar