Recent posts for blogger with thumbnails and Simple Spy
July 26th, 2009
Bismillah
Alhamdulillah, finally I made modification the widget from Bloggertricks.com and animation Simple Spy . Simple Spy style taken from Scarlet theme, results for wordpress can be found in this blog. View as below, For the demo on the blogger click :
For bloggers put into Sidebar Gadget(add gadget) select html, copy all html below to that gadget:
<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: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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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>
<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 = "http://www.raudhatulmuhibbin.org/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :
1. homepage address
home_page = “http://name-your-blog.blogspot.com/”;
2. Style
#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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
from above style/css, you can change :
width
width : 220px;
width:208px:
customize base on your template
and
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
Customize the colors of backuground
3. image size
thumbwidth = 70;
thumbheight = 70;
Match your needs
4. How many post you will show
numposts = 10;
Base on what you need to show
204 Responses to “Recent posts for blogger with thumbnails and Simple Spy”
Leave a Reply
the widget is for vertical, how to make it horizontal??can u please help me by send me the Code to my mail here please..mulphsykoz@gmail.com
man … why my recenst post weren’t ane thumnail ??? it was just a text link ???
Please help me to solve this probelm !!!!
[...] is great trick to Recent Posts for Blogger with Thumbnails Animations and this tutorial from Abu Farhan. You know Abu Farhan? He is programmer, hack and trick for blogger. Click [...]
Hi Abu,
Your an amazing tutorial hack for this one in our reviews in Best Blogger Widgets 2012
http://www.dbestlists.com/featured/best-blogger-widgets-2012
Thanks. :)
Warm Regards,
DbestLists.Com
Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.
This is not entertainment as such, but you can see why comments like this have people confused. From Mike Jewvero at Whatreallyhappened.com-
Glad you got to the 2-tier justice system at the end. That’s a whole other topic, but worthy of discussion as well. ways to travel
abu jquery saya tidak jalan .
tadi sih pas pertama2 copas bisa .
ehh pas abis ane otak atik html jadi gk bisa ?
gimne solusi nya
abu ini kita gk bisa milih artikel nya sendiri yah ?
Buen gadget pero Lastima que funciona solo en la antigua version de jquery,( jquery/1.3.2 ) con la nueva version (jquery/1.6.4 )no funciona .
[...] Abu Farhan. This will show or hide your widget on your sidebar. A first of its kind for blogger. 8. Recent Post With Thumbnail and Simple Spy: Many would have seen simple spy (fade in post scoller) in some design, this widget makes that [...]
Mas Abu Farhan, terima kasih sebelumnya atas widgetnya, tapi ada yg mau saya tanyakan nih Mas, ini widgetnya hanya bekerja di jQuery 1.3.2 saja ya Mas? karena saya coba ganti jQuerynya pake yg terbaru sekarang http://code.jquery.com/jquery-1.7.min.js efeknya gak mau jalan :( dan di blog Saya hanya ada satu jQuerynya, ya jQuery yg terbaru tadi Mas.
mohon pencerahannya Mas Abu Farhan. Terima kasih.
it’s work! but why the image doesn’t work? my Jqury not showing the image can u help me? please
its work!!!!! thank abu- farhan
assaalamualaikum…
..mw nanya nehhh
cara masang nya sudah pi kenapa ngak mw yea???
,,,
jquery nya mesti ada brapa ,and gmna ngapus jquery yang berlebih???
Satu website hanya boleh satu jquery
This doesn’t work from Jquery 1.4 and above. Probably due to the change in treatment of JSON calls. Could you please do something about it?
looks realy great, i ws wondering how can i make this to work for videos thumbnail, is it possible?
how to modify this script works with selected labled posts sliding …
Подскажите, пожалуйста, что в этом скрипте нужно изменить, чтобы он работал так, как мне нужно. Нужно сделать так, чтобы при наведении курсора мыши движение останавливалось, а когда убираешь курсор, чтобы движение возобновлялось.
Вот два ресурса где я это нашел :
http://woork.blogspot.com/2009/05/how-to-implement-news-ticker-with.html
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3500;
function removeFirst(){
first = $(‘#listticker li:last’).html();
$(‘#listticker li:last’).remove();
addLast(first);
}
function addLast(first){
last = ”+first+”;
$(‘#listticker ul’).find(“li:eq(4)”).animate({ opacity : 0}, 1000, function () {
$(‘#listticker ul’).prepend(last);
$(‘#listticker li:first’).css({opacity: “0″}).slideDown(function(){
$(this).css({opacity: 1}, 1000);
});
})
}
interval = setInterval(removeFirst, pause);
});
Can you please tell that this script be modified to work the way I want. We need to do so when the mouse movement stopped, and when to remove the cursor to move resumed.
Abu Farhan,
Can you please give me static version of this widget ? Everything is just superb but i dont need animation.
Please…
Thanks
Abu ini untuk wordpress nya ada nggak?
kalau themenya ada yg make kalau plugin belum tahu e
[...] from Blogger Stats . Now I made Popular Post for Blogger with animation. This widget I made from my Recent Post with animation using simple spy. [...]
Nice tutorial…..it works dude!
thax
friend why how the application will not run ya … please help.
Very nice! Thanks a lots from Italy
I’m Speechless, You done a great job , Thanks is not enough word .
hi… Just want to say that it’ll be great if make a “popular post” version with simple spy and sliding effect like this.
Kudos for ur works…
RAY
Good day, Abu Farhan. Very nice widget, but maybe I will not be able to install it. I have a similar script. If you choose to help me improve it. Make it so that when the mouse scroll ostnavlivalas. For a man who knows a few minutes. The script is not complicated. If soglastes help. I will send you a code or even source files.
how i am stupid..this one more look great before the last, thanks
UPS APC, UPS ICA, UPS AROS, UPS RIELLO, UPS LAPLACE, UPS POWERWARE – Jual dan Service UPS di Surabaya
Numpang Link ya Mas, please
Fantastic go through since I had been uncertain what direction to go and easily uncovered my personal solution :-)
Very interesting post! THank you
Hi,
I really like the widget “Recent Posts with Thumbnails for Blogger”. However, it is vertical and I need it to be horizontal. Can you please help me figure out what the edit in the code to make it appear horizontally?
Thhnks my brodher…
This is really cool trick. It is working for my one blog( http://mustdwnload.blogspot.com ) but not working for other one
(http://discoverdreamland.blogspot.com)
In my both blogs JQuery is pre installed. So i escaped that script. So can you suggest me what should i do now ??
Thanks
This is really cool trick. It is working for my one blog( http://mustdwnload.blogspot.com) but not working for other one
(http://discoverdreamland.blogspot.com)
In my both blogs JQuery is pre installed. So i escaped that script. So can you suggest me what should i do now ??
Thanks
hanya tiga kata abuu… mantab..mantab..mantab…
hai…
tolong mas liatin blogq dong, kenapa waktu naruh widget ini slideq gak mw jalan..
plisss…
Alsalam Alaykom,
Allah yejzeek alkheer for the widget, it is great, works fine in my blog.
Is it possible to change the posts from recents to random, could you please tell me how.
Thanks a lot.
vad ca blogul nu merge cum ar trebui cu IE9 se poate remedia?
the best way to support japan.breathtaking suggestions you have How to support the persons of the Japan earthquake.We all will get Discount Coach Handbags.desire people fine and pleased
hiiiii…salam bro
look at my blog itz not working…plz help
thank you soooo much abu bhai kudos to your hard work…
Just desire to say your article is as astonishing. The clarity in your post is just excellent and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the gratifying work.
Hi dude I have found this code very helpful and thrilled but i need some more clarification about thumbnail photo url for the post. For showing the thumbnail of the post what should i give in the html code. I have pasted this html code with some little changes like home address. please forward me the help.
This is a great piece of code! Thanks so much for sharing!
it’s great mas…
but how..
if i wanna put the thumbnail in horizontal not vertical??
i’ve tried to edit, but i’m failed:(
would u help me?
thanks a lot btw..
OK.. artikel bagus.. masuk dalam daftar bookmark untuk perbendaharaan.. makasih infonya ya.. :)
my question is same as above,
but can I remove the picture
Hi. Can you please tell me how to stop the animation. i just want 4 recent posts and i dont want one disappearing and the next one coming. i just want 4 recent posts.