Cara membuat recent posts ala twitter

Sobat semua pasti udah pernah lihat beberapa blog yang menampilkan sebuah recent posts atau recent comments  yang bergaya ala twitter. Mungkin dalam benak sobat bertanya-tanya, Bagaimana ya cara membuatnya ? Koq terlihat bagus. Hehehe

Don't worry sobat, karena kali ini pensil akan membahas tentang bagaimana cara membuat Recent Posts Yang Bergaya Twitter tersebut. Nah, untuk itu mari kita simak cuplikannya. Seperti biasa, Pak Lurah yang akan menyampaikan cuplikannya.

Pak Lurah "Baik warga pensil ajaib, kali ini Saya ingin berbagi sedikit tips bagaimana menampilkan recent posts ala twitter."

1. Sobat masuk ke akun blogger sobat
2. Masuk di Tata Letak, kemudian Tambah Gadget, pilih yang HTML/JavaScript,
3. Kemudian sobat tulis listing berikut :

<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:297px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:285px;

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 = 298;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 15;

home_page = "http://pensil-ajaib.blogspot.com/";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='http://4dragonfly.net46.net/code/ajax/pensil-ajaib/Api_recentPostTwitter.js' type='text/javascript'></script>

</div>

Setelah di tulis semua, sobat simpan.

Sedikit keterangan :

• showPostDate fungsinya untuk menampilkan tanggal dari postingan sobat, true untuk tampil dan false untuk tidak menampilkan.
• summaryPost berfungsi untuk menampilkan banyak jumlah postingan sobat, bisa sobat ganti sesuai keinginan.
• summaryFontSize fungsinya untuk mengatur ukuran font atau tulisan.
• limitspy berfungsi untuk menampilkan di kotak dengan jumlah sesuai nilainya, disini 4 items per kotak.
• home_page di isi dengan alamat url sobat.
• intervalspy berfungsi untuk mengatur kecepatan waktu interval untuk menggulung atau mengganti kontent.

Buat sobat yang mau download softcopy disini atau untuk script diatas disini. Gratis koq ..