Membuat Recent Post Thumbnail + Spy di Blog

 

Kali ini saya akan memberikan tutorial tentang gimana caranya membuat recent post yang ada gambarnya, nggak itu aja gambarnya bisa jalan lagi, hebat kan? Karena dengar-dengar fungsi atau keberadaan recent post akan sangat berguna (terasa dibutuhkan) ketika pengunjung berada pada halaman posting. Kemungkinan besar mereka ingin mencari link posting-posting terbaru yang masih tergolong fresh.

Baik, langsung kita menuju ke langkah-langkah pembuatannya  :

1. Log in ke Blogger
2. Kemudian pilih Design --> Page Element
3. Add gadget -->> HTML/Javascript
4. Copy paste kode di bawah ini ke gadget sidebar teman-teman.

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

Save-->> Selesai.

Catatan Penting :

1. Ganti URL ( http://adamerc.blogspot.com/ ) dengan URL teman .
2. Atur lebar dan sesuaikan dengan lebar sidebar teman-teman.
3. Apabila ingin menyesuaikan lagi dengan background template teman-teman, bisa menggantinya dengan background yang lain.
4. Sesuaikan juga lebar dan tinggi gambar (thumbnails) nya.
5. Berapa post yang teman-teman ingin tampilkan bisa di ubah sesuai selera.

Itu tadi sedikit gambaran bagaimana caranya untuk membuat recent post thumbnail yang bisa gerak naik turun, semoga berhasil.