Baca lewat email biar asik ->
author

Artikel ini ditulis oleh : Putu Hadi

Putu Hadi adalah Blogger dan Penulis penyuka Android. Follow saya di Twitter, artikel ini bermanfaat buat kamu? jangan lupa tinggalkan komentar ya...


Sabtu, 27 Februari 2010

Recent Post dinamis


"Memasang pos terakhir akan sangat membantu pembaca dalam melihat posting-posting yang telah kamu publikasikan. Siapa tahu pembaca tertarik pada post sebelumnya, apalagi jika recent post disertai gambar dan dinamis pula. Bisakah? cekidot cara di bawah ini yang lookj kutip dari blogger lain"

Langsung aja deh lihat contoh di blog lookj yang memasang iklan bergerak, itu adalah recent post blog iklan lookj yang dipasang di blog ini. Jelasnya lihat di bawah ini:



Cara buatnya gampang banget kok, ikuti langkahnya di bawah ini:

1. Login ke Blogger

2. Cari di Tata Letak - Elemen Halaman

3. Tambahkan gadget HTML/Javascript lalu copas kode di bawah ini disana:
<center><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:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

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

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

-->
</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 = 250;
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 = 10;
home_page = "http://reflookj.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js" type="text/javascript"></script>
</div></center>



Eit..eit sebentar dulu, ubah warna merah dengan alamat blogmu, warna biru ganti dengan jumlah post yang kamu inginkan, dan terakhir warna hijau kamu bisa ubah untuk menyesuaikan lebarnya. Kelemahan dari recent post dengan cara ini adalah loading blog lumayan lama karena memakai javascript jadi bisa dipikirkan lagi jika kamu ingin memakai ini(walaupun lookj memakainya tapi loadingnya lumayan lama makanya lookj masih mikir lagi nih, hahaha).
Thanks to serba-seru.blogspot.com atas tutorialnya

4 komentar:

  1. Thanxs inponya. langsung terpasang tuh tutorial kamu. thanx bangggeeettttzzzzzzzzz :rate

    BalasHapus
  2. Natural Blogging12 Mei 2010 15.10

    wahh siip nih info nya tak coba aahhh,.

    BalasHapus
  3. bisa dicobah nech....
    thanks ,,,,

    BalasHapus

Artikel ini berguna? jangan menjadi silent reader, saya akan selalu menjawab komentar

Ada 2 aturan berkomentar yaitu jangan asal komentar, jangan mengiklan, hargai penulis yang membuat artikel ya..terima kasih.