Memasang Widget Recent Post Thumbnail Gambar Mini

Postingan kali ini akan membahas tutorial tentang membuat widget recent post dengan thumbnail mini. Sangat diakui setiap blogger tentunya menginginkan perkembangan yang baik pada setiap blog yang dimilikinya, baik berupa trafik, tampilan, polularitas bahkan mungkin menjadikan blog tersebut sumber uang. Berbagai upaya dilakukan, salah satunya dengan memasang widget recent post agar memudahkan pembaca mengetahui postingan terbaru dari blog tersebut. Sebagian besar mungkin tidak terlalu memikirkan widget ini so menurut saya sih penting, apalagi dengan thumbnail gambar, kan lumayan bisa mempercantik alias ga ngbosenin diliatnya.. hehe... Bagi sobat yang tertarik  membuat widget recent post dengan thumbnail mini silahkan kopi kode dibawah ini dan ikuti tahapannya!

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

padding:0px 0px;

height:229px;

}

#spylist ul{

width:270px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:270px;

padding: 2px 2px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:35px;

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:#700999;

font-size:9px;

height:12px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 1px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:7px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

    <script language='javascript'>

imgr = new Array();

imgr[0] = "http://3.bp.blogspot.com/--PQ80U1cY_o/UJpFVUVHV2I/AAAAAAAAEQE/-odi7_nu43o/s1600/logo+46px.png";

imgr[1] = "http://3.bp.blogspot.com/--PQ80U1cY_o/UJpFVUVHV2I/AAAAAAAAEQE/-odi7_nu43o/s1600/logo+46px.png";

imgr[2] = "http://3.bp.blogspot.com/--PQ80U1cY_o/UJpFVUVHV2I/AAAAAAAAEQE/-odi7_nu43o/s1600/logo+46px.png";

imgr[3] = "http://3.bp.blogspot.com/--PQ80U1cY_o/UJpFVUVHV2I/AAAAAAAAEQE/-odi7_nu43o/s1600/logo+46px.png";

imgr[4] = "http://3.bp.blogspot.com/--PQ80U1cY_o/UJpFVUVHV2I/AAAAAAAAEQE/-odi7_nu43o/s1600/logo+46px.png";

showRandomImg = true;

boxwidth = 300;

cellspacing = 4;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 34;

thumbheight = 34;

fntsize = 9;

acolor = "#666";

aBold = true;

icon = " ";

text = "Reply(s)";

showPostDate = false;

summaryPost = 50;

summaryFontsize = 9;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://pabk-4you.blogspot.com/";

limitspy=5

intervalspy=6000

</script>

    <div id="spylist">

        <script src='https://sites.google.com/site/pabk4you/Spy%20Effect.js' type='text/javascript'></script>

    </div>



-----------------------------------------------------------------------------------
* Catatan
Silahkan ganti kode yang berwarna biru dengan url blog sobat.
-----------------------------------------------------------------------------------

1. Login ke Dasbor sobat
Seperti ini
2. Pilih Rancangan kemudian pilih Edit HTML
3. Kemudian tambah elemen/gadget
4. Pilih HTML/JavaSripct
5. Paste kode di atas
6. Simpan

Lihat Hasilnya >>

8 Responses to "Memasang Widget Recent Post Thumbnail Gambar Mini"

  1. nice,..


    mau blog anda jd mesin pengumpul uang ..?? kunjungi blog ku. tips blog anda jadi mesin pengumpul uang secara gratis..

    BalasHapus
  2. berkunjung sob..salam blogger
    sukses selalu yah..
    salam

    BalasHapus
  3. wah asyik ni bs nambah blog jd tambah apik. makasih buat share nya..

    BalasHapus
  4. kok banyak bgt ya gan js nya. bisa-bisa blonya berat

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel