Widget Slide Recent Post With Thumbnail

Viyan Pradita Kamis, Maret 31, 2011

Membuat slide recent posting dengan thumbnail, yang pastinya akan membuat blog kita lebih menarik dan keren... keuntungan lain dari tool ini yaitu bisa menampilkan hampir semua recent yang kita posting sebelumnya, karena memang dengan gaya slide, jadi recent post akan muncul secara bergatian. menarik kan ?? nah bila sobat masih bingung dengan apa yang saya maksud diatas, sobat bisa lihat screenshotnya dibawah ini.


Screenshot

Bila ingin membuatnya, ikuti langkah-langkah berikut ini:

  • Login dengan akun blogger sobat
  • Masuk rancangan/design
  • Pilih Tata Letak/Layout
  • Klik Add a gadget, dan pilih HTML/Javascript
  • Selanjutnya, Copy Paste kode berikut didalamnya:

<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 = 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://nama-blog-sobat.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="https://sites.google.com/site/kodeblogger/javascript/rpts-kode-blogger.js" type="text/javascript"></script>
</div>

  • Simpan/Save Template.

Penting!!
Perhatikan Text yang diberi warna merah, gantilah dengan alamat blog sobat.
Sekian dari saya semoga bermanfaat.

Sumber: serba-seru.blogspot.com

Ditulis Oleh :

Artikel Widget Slide Recent Post With Thumbnail ini dipublish pada hari: Kamis, Maret 31, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

12 komentar
Terjun Ke Kolom Komentar

  1. haduh,,ane mau ijin pasang kok susah comengnya,,,,,,gak usah ijin lah,,langsung praktek,,,kelamaan... thxs b4..

    BalasHapus
  2. @Rully varadita: iya sob, td habis tak utak-atik dibagian komentarnya. :D
    Thank sob...

    Oia untuk edit lebarnya edit aja dibagian #spylist li {

    BalasHapus
  3. dah di coba kok gak muncul ya ... ???

    BalasHapus
  4. @na2ngismail: Coba cek lagi script na sob, udah di cantum nama blog sobat belum??

    @Rahman Wahid: Yupz, Sama2 Sob

    BalasHapus
  5. sep gan work di blog saya.....
    ditunggu kunjungan baliknya

    BalasHapus
  6. ijin semuanya ++ yuaaaaaa gan ... perih liat script mulu ni mata... mau langsung c0pas... langsung meluncurrrr....... terima kasih buanyaaaak mas bro.. sa;lam kenal smuanya..

    BalasHapus
  7. Ok, Sama2 :)
    Salam kenal jg Gann

    BalasHapus
  8. http://mitrapustaka.blogspot.com/

    BalasHapus
  9. gan viyan klo untuk edit besar kecil tulisan tittle post nya di bagian mana itu y.

    BalasHapus
  10. @Rudi: Coba di oprek dibagian CSS-nya Pada "font-size"

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers