4 jenis Animated Recent Post Widget

---

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه

---

Kali ni buat post pasal ANIMATED RECENT POST WIDGET, even benda ni dah lama. Tapi masih ramai tak tahu kn? Tutorial ini direquest oleh PAEIN BOBOT. Kawan AD (:

1. Dashboard → Design → Add Gadget → Html/Java Script

2. Copy code kat bawah korang nak & paste pada Html/Java Script.

3. AD ade sediakan Demo. Tekan je button untuk Preview.

Ada 4 jenis :

-Animated Recent Posts(Biasa)
<br /> <br /> <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"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGz4X-kBqDuYJiB6GE0Esnspj0ZnNYxfloC9TSo8REbBrCE0Q6zIAQbGn0fv3UaAigXmjWFEr5R_oTrTHqbyKWeurZ18vZ309SDTwUrMYfPNdKk5Ttn7EeJrVxIJnKQzqixPjw9ofWZub/s1600/bdlab-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style><br /> <br /> <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 = 10; home_page = "URL BLOG KORANG"; limitspy=4 intervalspy=4000 </script><br /> <br /> <div id="spylist"><script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script></div>

Demo Di Sini

- Animated Recent Posts (Blue Link)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script><br /> <br /> <style media="screen" type="text/css"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGz4X-kBqDuYJiB6GE0Esnspj0ZnNYxfloC9TSo8REbBrCE0Q6zIAQbGn0fv3UaAigXmjWFEr5R_oTrTHqbyKWeurZ18vZ309SDTwUrMYfPNdKk5Ttn7EeJrVxIJnKQzqixPjw9ofWZub/s1600/bdlab-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style><br /> <br /> <br /> <br /> <script language="JavaScript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQDC2QTar5IZzIH95YUjzNuAOZx1mpvBuHCaphdLcqJoFCFYGtebQItdeU5bfKl1kWEXyRZihN6Md74nj96xaIYhMkFltur6lnWyhlSYRXQi7B5Wm38doDS3Opytf9-wXvfPScYjJ9uJc/s400/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQDC2QTar5IZzIH95YUjzNuAOZx1mpvBuHCaphdLcqJoFCFYGtebQItdeU5bfKl1kWEXyRZihN6Md74nj96xaIYhMkFltur6lnWyhlSYRXQi7B5Wm38doDS3Opytf9-wXvfPScYjJ9uJc/s400/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQDC2QTar5IZzIH95YUjzNuAOZx1mpvBuHCaphdLcqJoFCFYGtebQItdeU5bfKl1kWEXyRZihN6Md74nj96xaIYhMkFltur6lnWyhlSYRXQi7B5Wm38doDS3Opytf9-wXvfPScYjJ9uJc/s400/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQDC2QTar5IZzIH95YUjzNuAOZx1mpvBuHCaphdLcqJoFCFYGtebQItdeU5bfKl1kWEXyRZihN6Md74nj96xaIYhMkFltur6lnWyhlSYRXQi7B5Wm38doDS3Opytf9-wXvfPScYjJ9uJc/s400/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQDC2QTar5IZzIH95YUjzNuAOZx1mpvBuHCaphdLcqJoFCFYGtebQItdeU5bfKl1kWEXyRZihN6Md74nj96xaIYhMkFltur6lnWyhlSYRXQi7B5Wm38doDS3Opytf9-wXvfPScYjJ9uJc/s400/noimage.png"; 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 = 10; home_page = "http://24works.blogspot.com/"; limitspy=4 intervalspy=4000 </script><br /> <br /> <br /> <br /> <div id="spylist"><br /> <script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript"> </script><br /> <br /> </div>

Demo Di Sini

-Recent Posts with Thumbnails Slide 2
<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script><br /> <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"> </script><br /> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script><br /> <ul id="rp_plus_img"><script> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"> </script> </ul>
Demo Di sini

-Recent Posts with Thumbnails Slide 1
<br /> <br /> <br /> <center><br /> <script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"> </script><br /> <style media="screen" type="text/css"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKn0hApKJmEzwepJnoogG0x6z55Yo5X_cjX9ekZaQs9wYp5yhNuqZTpr0MJWeGNGFC781_SABPH1RA5uUg9hqF7xmpYbcxFxYyRNm2ukdpHQIVjDdI3cOBstQ0EFnwyK9Vkti29YSsYBo/s1600/teknikbuatblogblogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#A9A9F5; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style><br /> <script language="javascript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-qSc4-CRDYEMrXy3tYl94-P3HjhwIXQz1Twx947j5bT8s9bTxldewk1IGgj_O2RShvLu4h6M2hxiQ93A2m3cI-CRTUo1cb23wTLOcNtMAXJMawM5G5DgYQw0SZc__XHTwI1yFwaOz8Q/s1600/no_image+.gif"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-qSc4-CRDYEMrXy3tYl94-P3HjhwIXQz1Twx947j5bT8s9bTxldewk1IGgj_O2RShvLu4h6M2hxiQ93A2m3cI-CRTUo1cb23wTLOcNtMAXJMawM5G5DgYQw0SZc__XHTwI1yFwaOz8Q/s1600/no_image+.gif"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-qSc4-CRDYEMrXy3tYl94-P3HjhwIXQz1Twx947j5bT8s9bTxldewk1IGgj_O2RShvLu4h6M2hxiQ93A2m3cI-CRTUo1cb23wTLOcNtMAXJMawM5G5DgYQw0SZc__XHTwI1yFwaOz8Q/s1600/no_image+.gif"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-qSc4-CRDYEMrXy3tYl94-P3HjhwIXQz1Twx947j5bT8s9bTxldewk1IGgj_O2RShvLu4h6M2hxiQ93A2m3cI-CRTUo1cb23wTLOcNtMAXJMawM5G5DgYQw0SZc__XHTwI1yFwaOz8Q/s1600/no_image+.gif"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-qSc4-CRDYEMrXy3tYl94-P3HjhwIXQz1Twx947j5bT8s9bTxldewk1IGgj_O2RShvLu4h6M2hxiQ93A2m3cI-CRTUo1cb23wTLOcNtMAXJMawM5G5DgYQw0SZc__XHTwI1yFwaOz8Q/s1600/no_image+.gif"; 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 = 10; home_page = "http://www.demo-alep-darling.blogspot.com/"; limitspy=4 intervalspy=4000 </script><br /> <div id="spylist"><script src="https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1" type="text/javascript"> </script></div></center>

Demo Di Sini

Note : Tukar URL BLOG & URL BACKGROUND (jika xnak, biarkan kosong).

4. Okay itu saje untuk kali ni. Assalamualaikum !
LIKE . SHARE . COMMENT.

---

Sincerely by :