DAFTAR ISI
Nonton Televisi Online

HTML Scroll Boks Warna

Kamis, 23 September 2010

Membuat Widget Recent Post dengan Slider

 

 

RESENT POST 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

:

 

Komentar :

ada 13 komentar ke “Membuat Widget Recent Post dengan Slider”
welcome to the error zone mengatakan...
pada hari 

good info gan...

follow mee yaaa..??
http://zonakuerror.blogspot.com

Blognya anak Gaptek mengatakan...
pada hari 

Mantap sob..


tapi di blogku BLOGNYA ANAK GAPTEK

kalimatnya kok numpuk ya, ????



salam Blogger

Ngaji al-Qur'an Online mengatakan...
pada hari 

Sudah dicoba, tapi kok gak bisa berjalan dari atas ke bawah?! Why?

mbah cyber mengatakan...
pada hari 

Nice posting man, I like your posting

sosmiadi mengatakan...
pada hari 

Tks ya.. setelah dicoba, kok nggak ada perubahan pada blog saya...knapa..?

tips n trick mengatakan...
pada hari 

kalo memperbesar ukuran widgetnya gimana?
info bola

informasi teknologi mengatakan...
pada hari 

Makasih gan informasinya

Kerinci mengatakan...
pada hari 

thanks tutorialnya

Sungai Penuh mengatakan...
pada hari 

thanks

Kerinci mengatakan...
pada hari 

mengatasi huruf numpuk krn ditambah kode width gimana

myself-corp mengatakan...
pada hari 

really nice info, i'm interesting to use it on my blog. thanks for sharing.

alek kurniawan mengatakan...
pada hari 

terima kasih infonya, akan saya coba

mazzafakod mengatakan...
pada hari 

nais gan....mampir ya

Posting Komentar


weather counter

BUKU TAMU


Anda berminat buat Buku Tamu seperti ini?
Klik disini
Read more: Membuat Buku Tamu Melayang di http://paksi-dirgantara.blogspot.com

Pengikut

 
This Blog is proudly powered by Blogger.com | Template by Angga Leo Putra