CARI

Selasa, 22 Mei 2012

Recent Post

Recent Post atau postingan terakhir perlu kita tampilkan di halaman blog agar pengunjung blog bisa tw dan itu akan menambah minat baca para tamu blog kita, nah untuk menpilkan recent post dalam bentuk yang lebih menarik alias ditampilin dalam bentuk gambar akan saya bahas dalam tutorial kali ini, langsung ke TKP aja ya.
  1. Login ke akun Bloggersaudar2 semua.
  2. Klik Rancangan >> Elemen haLaman
  3. Klik Tambah Gadget
  4. Pilih HTML/Javascript
  5. Masukan kode berikut :
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#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 = 255;
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 = 20;
home_page = "http://infonetmu.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://yuudi.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

 
  1. Simpan dan lihat efeknya
Note :
  • sebaiknya tiap halaman blog disertai gambar karna gambar tersebutlah yang akan ditampil kan pada recent post 
  • Url yang berwarna merah ganti dengan Url sobat
  • Angka yang berwarna biru jumlah post yang ingin di tampilkan
Nah demikain cara membuat recent post berjalan pada blog, semoga bermanfaat!

Description: Recent Post Rating: 4.5 Reviewer: Gusri Wahyudi - ItemReviewed: Recent Post

Tidak ada komentar:

Posting Komentar

DAFTAR ISI

BACA JUGA