Cara Memasang Recent Post disertai Gambar di Blog (Recent Posts With Thumbnail)

Kali ini saya akan menulis tentang Bagaimana Cara Membuat Recent Posts di Sertai Gambar yang bergerak, (Recent Posts With Thumbnail). Recent posts atau postingan terakhir alias last posts memang perlu juga di tampilkan, gunanya selain mempercantik blog atau mengisi kekosongan widget adalah menginformasikan kepada visitor tentang perkembangan artikel terbaru pada blog tersebut melalui menu pada blog itu. Jadi setiap ada update postingan terbaru maka secara otomatis akan tampil di menu Recent Posts tersebut.

Bagaimana jika Recent Posts tersebut disertai juga dengan gambar/image, pasti asik juga kelihatannya. contohnya ada di sidebar blog ini.

Begini Langkah-langkahnya :

1. Login Bloger anda
2. Masuk rancangan/design
3. Kemudian pilih tambah Gedget
4. Kemudian pilih HTML/JavaScript
5. Selanjutnya copy kode di bawah ini dan letakkan di HTML/JavaScript tadi

<span > <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br> <style type="text/css" media="screen"><br> <!--<br> #spylist {<br> overflow:hidden;<br> margin-top:5px;<br> padding:0px 0px;<br> height:350px;<br> }<br> #spylist ul{<br> width:180px;<br> overflow:hidden;<br> list-style-type: none;<br> padding: 0px 0px;<br> margin:0px 0px;<br> }<br> #spylist li {<br> width:180px;<br> padding: 5px 5px;<br> margin:0px 0px 5px 0px;<br> list-style-type:none;<br> float:none;<br> height:70px;<br> overflow: hidden;<br> background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;<br> border:1px solid #ddd;<br> }<br> #spylist li a {<br> text-decoration:none;<br> color:#4B545B;<br> font-size:11px;<br> height:18px;<br> overflow:hidden;<br> margin:0px 0px;<br> padding:0px 0px 2px 0px;<br> }<br> #spylist li img {<br> float:left;<br> margin-right:5px;<br> background:#EFEFEF;<br> border:0;<br> }<br> .spydate{<br> overflow:hidden;<br> font-size:10px;<br> color:#0284C2;<br> padding:2px 0px;<br> margin:1px 0px 0px 0px;<br> height:15px;<br> font-family:Tahoma,Arial,verdana, sans-serif;<br> }<br> .spycomment{<br> overflow:hidden;<br> font-family:Tahoma,Arial,verdana, sans-serif;<br> font-size:10px;<br> color:#262B2F;<br> padding:0px 0px;<br> margin:0px 0px;<br> }<br> --><br> </style><br> <script language='javascript'><br> imgr = new Array();<br> imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";<br> imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";<br> imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";<br> imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";<br> imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";<br> showRandomImg = true;<br> boxwidth = 255;<br> cellspacing = 6;<br> borderColor = "#232c35";<br> bgTD = "#000000";<br> thumbwidth = 70;<br> thumbheight = 70;<br> fntsize = 12;<br> acolor = "#666";<br> aBold = true;<br> icon = " ";<br> text = "comments";<br> showPostDate = true;<br> summaryPost = 40;<br> summaryFontsize = 10;<br> summaryColor = "#666";<br> icon2 = " ";<br> numposts = 10;<br> home_page = "http://anwarhidayat27.blogspot.com/";<br> limitspy=4<br> intervalspy=4000<br> </script><br> <div id="spylist"><br> <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script><br> </div> </span>

6. Simpan/Save, silahkan lihat di Blog anda, dan hasilnya bisa kita lihat, seperti yang ada di Blog saya,

Selamat mencoba.......