Cara Membuat Recent Post Slide di Sidebar

Mari kita otak atik lagi sob belajar lagi design tamplate biar tamplate kita kagak kampungan lagi. kali ini aku akan membahas cara membuat Recent Post dengan Slide di Sidebar blog. seperti topikku kali ini dengan adanya Recent Post di Sidebar maka akan memudahkan pengunjung mengetahui apa yang terbaru atau apa yang baru di update blog di blog kita.
Mungkin banyak dan sangat banyak sudah tutorial yang seperti ini, namun apakah sudah working dengan tamplate sobat. kalau belum working dengan tamplate sobat mungkin dengan cara ini bisa working. Cara yang aku share ini tidak akan membuat berat loading blog sobat.
Recent Post Slide-Gigawatt
nah untuk langkah-langkahnya silahkan simak berikut ini.
1. silahkan login dulu ke blog kalian.
2. kalau sudah silahkan langsung ke Tata letak pilih atau taruh di sidebar ya...jangan yang lain. lalu pilih widget JavaScript/HTML
3. silahkan masukkan kode dibawah ini.
<style type="text/css">
#rp_plus_img{height:328px;overflow:hidden;border:solid 1px #000000;padding:6px 10px 12px 5px;-moz-border-radius: 5px; -khtml-border-radius: 5px; -opera-border-radius: 5px; -webkit-border-radius: 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:0px;list-style:none;}
#rp_plus_img a{color: #357798;}
#rp_plus_img .news-title{display:block;font-size:11px;font-weight:bold !important;color:#B45F04;text-align:left;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#000000;text-align:left;}
#rp_plus_img img{float:left;margin-right:5px;padding:4px;border:solid 1px #357798;width:40px;height:40px;}
</style>

<script src="http://kodegigawatt.googlecode.com/files/recentpostslider.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>

<ul id="rp_plus_img"><script>
var numposts = 25;
var numchars = 60;
</script> <script src="http://giga-watt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>
silahkan kalian ganti yang aku beri warna merah dengan URL blog kalian.
4.kalau sudah silahkan kalian simpan dan lihat hasilnya.
cara ini sudah aku praktekkan di blog ini dan blog Gema Santri. tak ada kendala dan semua tamplate pasti working dengan kode ini kalau sobat ingin mengganti warna yang cocok dengan template sobat silahkan kalian ganti yang aku kasih warna biru. dan yang ada nilai 25 itu silahkan sesuaikan berapa postingan yang harus sobat tampilkan dan yang terakhir yang nilainya 60 silahkan berapa karakter decription yang harus kalian tampilkan. silahkan sesuaikan sendiri kalau belum jelas silahkan bertanya di kotak komentar
mungkin untuk tutorialku Cara Membuat Recent Post Slide di Sidebar ini aku cukupi sekian apabila ada kekeliruan dengan kode yang aku share silahkan beritahu aku lewat kometar Facebook atau Blogger dibawah. semoga artikel yang aku share ini bermanfaat buat sobat, happy blogging. semoga berhasil.

4 komentar:

  1. ijin kami pasang di blog gan

    BalasHapus
  2. @tebe
    silahkan semoga bermanfaat buat blog sobat

    BalasHapus
  3. bagus, ijin copas mas...salam kenal.
    dwi
    http://www.indivanews.com/
    http://terasdwi.blogspot.com/

    BalasHapus
  4. @Mas Kamtos Alfa
    MONGGO...terimakasih telah mengunjungi blog giga watt

    BalasHapus