Membuat Widget Recent Post dengan Slider

 

 

angkah-langkahnya

• Masuk ke blogger
• Buka Design/Rancangan
• Pilih Edit HTML
• Centang pada Expand Widget Template
• Cari kode ]]></b:skin> (Gunakan Ctrl+F)
• Masukkan kode berikut ini di atas kode ]]></b:skin>

<script>
function split_date(d){
var da = d.split(' ');
day = "<strong class='day'>"+da[0]+"</strong>";
month = "<strong class='month'>"+da[1].slice(0,3)+"</strong>";
document.write(day+month);
}
</script>
<link href='http://www.blogger.com/static/v1/widgets/119427095-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<!-- Jquery library -->
<script src='http://www.google.com/jsapi?autoload=%7B%22modules%22+%3A+%5B%7B%22name%22+%3A+%22jquery%22%2C%22version%22+%3A+%221.4.2%22%7D%5D%7D' type='text/javascript'></script>
<!-- End Jquery library -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

• Simpan
• Lalu, buka tab Page Elemen, 
• Pilih Add A Gadget >> Javascript/HTML
• Masukkan kode berikut ke dalamnya,

<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>


<script type="text/javascript" src="http://sodiycxacun.googlecode.com/files/rpplusimgnt-v1.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

• Simpan
• Selesai
  • Catatan :
  • Code #FFF; adalah Warna judul postingan silakan ganti sesuai selera atau Blog anda
  • Code #DEDEDE; adalah Warna teks isi silakan ganti sesuai selera atau Blog anda

ATAU DENGAN CARA KEDUA

Cara ke dua ini kita hanya menambah gadget saja tanpa masuk ke Edit HTML

1. Login ke akun Blogger Anda
2. Klik Design >>>> Page Elements
2. Klik Add gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut

 

<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/rpplusimgnt-v1.0.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 125;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

 

5. Klik Save
6 Lihat hasilnya

*Keterangan:

- Untuk menghilankan garis tepi ubahlah nilai 1px menjadi 0 pada kode border:solid 1px #585858; (Baris 2)

- Untuk merubah background ubahlah nilai #2f2f2f pada kode background-color:#2f2f2f; atau jika tidak ingin menggunakan background buanglah kode tersebut (Baris 2)

- Untuk merubah warna font judul artikel ubahlah nilai #FFF pada kode color:#FFF (Baris 6)

- Untuk merubah warna font artikel ubahlah nilai #DEDEDE pada kode color:#DEDEDE (Baris 8)

- Untuk merubah ukuran gambar mini ubahlah nilai 55px pada kode width:55px; dan kode height:55px; (Baris 9)

- Jika template blog anda telah terpasang framework jQuery sebelumnya buanglah kode pemanggilan jQuery (Baris 11)

- Ganti nilai 400 pada kode var speed = 400; untuk mengatur kecepatan (Baris 14)

- Ganti nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya (Baris 15)

- Ganti nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan (Baris 23)

- Ganti nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan (Baris 24)

- Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh"

 

Selamat mencoba jangan lupa Komennya

: