Pages

Selasa, September 21, 2010

Cara Membuat Slide Recent Post Di Blog

Cara Membuat Slide Recent Post Di Blog, variasi, blogTeras Info - Untuk membuat sedikit variasi pada blog kita, mungkin ada baiknya kita mencoba beberapa trik untuk mempercantik blog kita itu, misalnya dengan cara membuat slide recent post di blog kita. Slide recent post ini merupakan kumpulan posting terbaru yang kita terbitkan namun pada saat tampil akan membentuk suatu slide, untuk contohnya silahkan lihat pada pojok kanan atas blog ini.

Lalu bagaimana cara membuatnya? mungkin bagi sebagian blogger, terutama blogger seniot hal ini sangatlah mudah, tapi mungkin bagi sebagian lagi ini adalah hal baru yang cukup baik untuk dijadikan perbendaharaan kita sebagai blogger.

Untuk membuatnya silahkan ikuti langkah berikut ini:

1. Masuk dulu ke menu dasbor blog anda, kemudian klik pada pilihan rancangan
2. Setelah itu pilih Elemen Halaman
3. Kemudian klik tambah gadget
4. Klik pada pilihan html/java script
5. Silahkan copy paste script di bawah ini :


<script language='javascript'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 600;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 80;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.teras-info.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>


Pada bagian yang saya beri warna merah tebal, silahkan ubah alamat blognya dengan alamat blog anda, kemudian pada bagian yang saya beri warna biru tebal silahkan ubah nilai 10 menjadi sesuka anda, misalnya lima dan sebagainya.

Keterangan:

-home_page = "http://www.teras-info.blogspot.com/"; merupakan tempat dimana tempat alamat postingan blog anda. Jadi jangan lupa untuk mengganti alamatnya dengan blog anda.

-numposts = 10; merupakan jumlah postingan atau artikel yang akan di tampilkan pada slide yang anda buat.


Setelah anda selesai melakukan langkah-langkah di atas, silahkan klik simpan dan kemuadian silahkan anda lihat hasilnya.....Selamat mencoba......




24 komentar:

  1. waduh, byk bgt kode2nya sob, aku save dulu ya bwt aku plajari

    slm knl jg ya

    BalasHapus
  2. skedar mampir cari tmn baru..

    mampir balik ya

    BalasHapus
  3. kalo slide most popular post ada gag?

    BalasHapus
  4. boleh juga nih dicoba di blogspot saya. makasih mas.

    BalasHapus
  5. saya penasaran sama model "Komentar Terbaru" blog ini
    share juga cara bikinnya ya mas, tengs bratz

    BalasHapus
  6. sip, saya ijin save ya...

    BalasHapus
  7. ya silahkan jika ingin mengnyimpannya..

    BalasHapus
  8. duh.. blog spot... au ahhh masih gelap !!
    salam persahabatan

    BalasHapus
  9. bener, mas. slider membuat tampilan blog menjadi lebih menarik. bisa utk engine wordpress, ndak?

    BalasHapus
  10. ga sia - sia berkunjung balik...siip bos...

    BalasHapus
  11. ini khusun bloger di wordpress.com bisa ga

    BalasHapus
  12. kang bantuin ane dong wat optimalin blog punya ane..maklum pan qt beda jurusan jd kga tw soal script.
    (V.O ikhsan)

    BalasHapus
  13. Mohon ijin pinjam tutorialnya

    BalasHapus
  14. Mksih gan, tp kq gmbr yg muncul tinypic..hrus diganti dgn pa tuh, trims.

    BalasHapus
  15. lama tidak bikin blog, sudah banyak yang jadi master. Salam kenal

    BalasHapus
  16. gan mw ga tukeran link ke www.warpsite.blogspot.com

    thx infona gan... sekalian di follow ya gan... ntar q follow balik gan... mampir ke blog ane ya gan. heheheh

    BalasHapus
  17. buat mas fauzi sama mas reza putra ada kok gan... sama aja malahan... cuma kalo lwat word press mdg ditanam aja di html... diatas b:skin

    BalasHapus
  18. gan saya mw nanya gimana cara menambah relasi blog kita agar dikenal oleh banyak blog gimana gan???

    BalasHapus
  19. mas, kalau slidenya kekana/ke kiri , kira2 scriptnya seperti apa, mohon bantuannya ya

    BalasHapus
  20. halo bro atau sist.. terima kasih ya info nya.. saya saya terbantu banget deh.. dari sekian banyak skrip yang saya pake, ternyata yang di teras info yang berhasil.. trims n keep up the good job :)


    salam kami,
    http://PondokJamTangan.blogspot.com/

    BalasHapus