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 :

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

Anda sedang membaca artikel tentang Membuat Vertical Scrolling Artikel Blogger Dengan Jquery dan anda bisa menemukan artikel Membuat Vertical Scrolling Artikel Blogger Dengan Jquery ini dengan url http://supardipunya.blogspot.com/2010/07/membuat-vertical-scrolling-artikel.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Vertical Scrolling Artikel Blogger Dengan Jquery ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat Vertical Scrolling Artikel Blogger Dengan Jquery sumbernya.

4 komentar:

Unknown on 10 November 2010 pukul 13.24 mengatakan...: wah materinya bener2 bisa belajar nih
Obat Alami Darah Tinggi on 11 November 2011 pukul 15.33 mengatakan...: mantap juga nie sangat bagus dan sangat menarik nie,,,,,,
Obat Herbal Untuk Darah Tinggi on 21 Desember 2011 pukul 23.36 mengatakan...: ilmu yang bermangfaat gan
makasi atas ilmu nya.:)
obat tradisional gagal ginjal on 20 Maret 2012 pukul 12.44 mengatakan...: makasihgan buat ilmunya....