So after many days of hard work, I am glad that I came up with my first jQuery based Blogger Widget:
Recent or Tag-wise [Multiple] Filtered Posts widget with Thumbnail option for BlogSpot/Blogger Users
Recent or Filtered Post widget is a jQuery and Ajax based Widget which will fetch either the recent or specific posts according to the tags/categories mentioned and will make a cool HTML unordered list. You also show Thumbnail of the posts or a default image if Thumbnail not available or even disable it for faster load! Customization options includes, number of posts, Container Id (where is list is going to get appended), Thumbnail height and width, Custom List class to modify more with CSS, Link tooltip title and more!
A typical usage of the widget is to show Recently published Articles on your BlogSpot blog of course having the jQuery framework using an advanced technique which will not slow down the loading of your blog! Below is a complete Feature list and usage guide…
Feature List
Before you start reading the Feature Lists, How about having a online Demo Here
- Easy to Use: The best feature of all time! No need to get your hand dirty on loads of JS codes. Just call the function in jQuery style with some parameters and you are done! Our jQuery/Ajax based loading makes sure that everything remains tidy and clean
- Smarter: jQuery and AJAX Based, so quick internal loading, when the document is ready to go! No more hang up on browser due to messy JS! Only a Compressed 2KB of JavaScript file to do the work for you! You have options to disable or enable image thumbnails
- Intelligent: When image is enabled, then uses the full feed, else uses the summary feed to save bandwidth. Also default image-URL option, for those posts, which do not have any image inside. Means for posts without images, you can also show some default image
- More Options: Can be used either as a Recent Post widget or to filter out posts on a particular or even multiple category. You can set number of posts on each category and customize the list using CSS!
- Light Weighted: The Compressed JavaScript for Production purpose is only of 2KB. Also a 8KB source code file is attached for development purpose, but you should not use that for linking to your website! Use the minified version!
- Cool AJAX style loading: Append any AJAX Style loading image or loading text inside the selectorDiv and it will stay until the the whole process has finished! Now that’s cool isn’t it 😉
- Can be also used to get links from another BlogSpot/Blogger blog and can be used anywhere where JavaScript is enabled
- You can specify the container by jQuery style selector (same as CSS selector! So no need to worry) where you want the list to get appended. Also you can set it empty to make a container there by the script itself!
Option List:
While calling the Function, we can set many options inside it in the following style
<script type="text/javascript">
RecentFilteredPost({
'Option1':'Value1',
'Option2':'value2'
});
</script>
You can exclude any of the option, to have the default value! I have set the following options and their respective default values. Also read the description to know the usage:
| Options | Description | Default Value |
| BlogURL | Define just the URL of the blog with http: Do not add an extra “/” at the end! For example use “http://www.yourblog.com” not |
‘http://www.intechgrity.com‘ |
| tag | Define the Tag of the posts you want to Filter. You can enter multiple tags in forms of Arrays like [‘tag1′,’tag2′,’tag 3’] etc. You don’t need to convert special characters or whitespace into anything! Just enter the simple tag name as shown on your blogger levels. Also exclude this option if you want to make a Recent Posts Widget | [] |
| maxPost | The Maximum number of posts to be listed. Enter in numerical value not in string. For example ‘maxPost’:20,. If multiple tags are used, then it will be treated as the maximum posts per tag! | 10 |
| containerId | Set the container selector. Suppose you want the list to be appended over the following div: <div id="myBlog">…Loading</div> Then just set it like, ‘containerId’:’div#myBlog’, and it will append the list there and will remove the loading… (or whatever that was before) from the div when listing is complete. Exclude it, to make a : <div id="recent-post"></div> where the script has been called and place the list inside it! |
null |
| thumbH | Height of the Thumbnail image in pixel unit | 32 |
| thumbW | Width of the Thumbnail image in pixel unit | 32 |
| ulClass | Class of the appended ul! Basically if you set the option as ‘ulClass’:’myUL’, then the list will be formed like: <ul class="myUL"> </ul> You obviousy use this to customize it using CSS |
‘itg’ |
| aClass | Set the class of the a tag inside the list item! This just for completion as you can easily use CSS like ul.myUL li a {//CSS…} to style up! But if you want then you may set a class to a tag as well | ” [null] |
| onLoad | make the value true for loading after the images has been cached. Or false when document is ready (Before image cache) | false |
| defImg | default image URL for the posts which have no image inside it! Just add the URL of the hot linkable image | ‘http://i29.tinypic.com/2namq9h.png‘ |
| imgEna | true to show thumbnail next to the list item [Post Title]. making the value false will instruct the JS to not to load image thumbnail and so the summary feed will be used to load the post title and link. This will obviously save much bandwidth | true |
| imgClass | Set the class of the image: <img class="myClass" src="Image_URL"/> Set the value to null to not append any class |
‘recent-image’ |
| aPermaTitle | Tooltip to be appended on every link using title attribute. The value will be used in the following manner: <a title="Your_PERMALINK_TOOLTIP+Post title" href="Post_URL">POST_Title</a> Set the value null or ” to show only Post title as tooltip |
‘Permalink to’ |
The Default CSS to be used:
As said on the options, you can customize anything using CSS with proper selector. If you have not changed the class of image and ul, then for your ease, you can use the following CSS safely!
ul.itg {
list-style:none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul.itg li {
margin: 4px;
padding: 4px 0;
overflow: hidden;
clear: both;
border-bottom: 1px dashed #066;
}
ul.itg li a {
color: #06F;
text-decoration: none;
font-weight: bold;
}
ul.itg li a:hover {
color:#006;
text-decoration: underline;
}
ul.itg li a img.recent-image {
float: left;
margin: 0 5px 0 0;
padding: 2px;
border: 1px solid #ccc;
background: #E9E9E9;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
For blogger you need to place these codes before the closing ]]></b:skin> and you should get results similar to the image above when called properly!
Download Links and Preparation:
For this widget to work properly, you need to have jQuery framework and also the main code behind this widget: You can download the following items:
- Main Recent or Filtered Posts JavaScript (Compressed) 2.5KB
- Useful CSS file
- See the Project Page at google-code for more download option, including a Project Demo and the Uncompressed JavaScript for developing over it!
- Download the Main Source code – Without compression [For developers]
You can either any free host like Fileden to host the JavaScript files. Obviously you can put the CSS file same as before. [Copying before the closing ]]></b:skin>]. Or you can convert the main javascript to escaped character using Notepad++ or our Online Toolkit as stated here and then paste the Code directly on your Blogger template inside a <script type="text/javascript">//Replace this with the code</script> before the closing </head> tag!
Note that for this widget to work, you will need jQuery framework in your template. If you are unsure how to do this then check this post. In short, just after the closing ]]></b:skin> add the following script tag to include the jQuery framework! Remember that you need to call any other script after the inclusion of this! Else they will not work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Also after that add the Script file you have downloaded. [hosting with FileDen is a good option]
<script type="text/javascript" src="HOT_LINK_TO_THE_JS_DOWNLOADED"></script>
Replace the HOT_LINK_TO_THE_JS_DOWNLOADED with the link to the script file you are hosting! You obviously follow the method stated before [Converting into escaped character and then directly copy pasting]
All the codes are need to be attached before the closing </head> Now you are ready to work with the widget!
Typical Usage:
Make sure that you have the jQuery framework and the main JavaScript on your blogger template!
1: To show Recent Posts:
Add a HTML/JavaScript Widget from your Blogger Dashboard > Layout and add the following lines of codes:
<div id="Your_ID"><img src="http://i28.tinypic.com/555nwk.gif" style="margin-bottom: -2px; margin-right: 10px;"/> Loading… Please wait!</div>
<script type="text/javascript">
RecentFilteredPost({
‘BlogURL’:’http://www.intechgrity.com’,
‘maxPost’:5,
‘containerId’:’#Your_ID’,
‘thumbH’:64,
‘thumbW’:90,
‘ulClass’:’itg’,
‘aPermaTitle’:’Click Here to visit the post’
});
</script>
2: To show Filtered posts using Tags:
Same process, just add this instead!
<div id="swashata"><img src="ajax-loader.gif" style="margin-bottom: -2px; margin-right: 10px;"/> Loading… Please wait!</div>
<script type="text/javascript">
RecentFilteredPost({
‘BlogURL’:’http://www.intechgrity.com’,
‘containerId’:’#swashata’,
‘imgEna’:true,
‘tag’:[‘Featured’,’Google Products’,’PHP JS n Programming’,'(X)HTML n CSS Designing’,’Websites’,’SEO n Adsense’,’Blogger Theme XML’,’Google Products’,’Firefox Addons’]
});
</script>
Obviously, you can change as many options you want, with any value! But write them in the same order as mentioned in the table!
Also make sure that the Id of the div is same as called inside the function! Else it will throw an error. You should exclude the option inside the function to write a div there and then append the list to it!
Known Issue:
So far I have found, only one issue with the code!
- We can call the code only one time per page! Even if we change the UserOptions then also it will add to the previously called selector.
I already have the idea to resolve this, and will start working on this soon, so that we can call this on as many selector we want on a single page, through a single call! But hopefully everything else is working fine, else you may report issue on the project page!
Acknowledgements:
Firstly I would like to thanks Mike at MoreTechTips! for his great tutorial on jQuery and Blogger Feed API. Without going through this tutorial this really would have been tough for me to make this Project!
Also thanks to my co-blogger Pyrotechnicpixie for helping me on developing the Project on many aspects!
So that was our First OPEN SOURCE jQuery based Blogger widget! The best thing is we are not limited to use it only on blogger, but on any general website!
If you have liked this Widget then do spread the news and also blog on this if you wish :).
Also if you need any help regarding the Widget then feel free to ask me here or at the Project page. And do give your feedback on our first Project! I hope to come up with a newer version with loads of other features soon!
![http://i28.tinypic.com/555nwk.gif"](http://i28.tinypic.com/555nwk.gif"){kind=link}
Thanks Swashata for the attribution and nice words.. I really appreciate it.
Congrats on your first Blogger widget.. Posts thumbs is always interesting!
Thanks buddy for your help and comment 🙂
Hi Dude, Extremely nice widget which an in quest since the beginning of the Year, So I want to run two of these widget on my Page, (” target=”_blank”>http://knight-nirvan.blogspot.com). I’ve followed all the steps, installed the Javascript and the CSS. But the main problem, is that my blog is a Tech Blog, i.e I have 4 main categories. Such as Tech News, Creativity ect… I want to have recent post for the different categories with Thumbnails.. I installed one that is “Tech News” with the Tag set to —> ‘tag’:[‘TECH NEWS’]. okay but for the other 3? When am inserting them in a different widget or in the same, its not appearing all at but the Tech New is appearing ! If you can solve this problem for me , it would me, it would me mostly appreciated… Reply me ! Check the problem occurring at ” target=”_blank”>http://knight-nirvan.blogspot.com
Hi Dude, Extremely nice widget which an in quest since the beginning of the Year, So I want to run two of these widget on my Page, (” target=”_blank”>http://knight-nirvan.blogspot.com). I’ve followed all the steps, installed the Javascript and the CSS. But the main problem, is that my blog is a Tech Blog, i.e I have 4 main categories. Such as Tech News, Creativity ect… I want to have recent post for the different categories with Thumbnails.. I installed one that is “Tech News” with the Tag set to —> ‘tag’:[‘TECH NEWS’]. okay but for the other 3? When am inserting them in a different widget or in the same, its not appearing all at but the Tech New is appearing ! If you can solve this problem for me , it would me, it would me mostly appreciated… Reply me ! Check the problem occurring at ” target=”_blank”>http://knight-nirvan.blogspot.com
Hey buddy, Sorry for the late reply! You comment went to the spam folder and I couldn check it as I had many engagement since last month…
Sorry again for that 🙂 … Now for your Query, the answer is already given in the description:
Just add the tags like this in a single widget:
'tag':['TECH NEWS', 'CREATIVITY', 'Tag 3', 'Tag 4']
This should solve your issue. The widget will then filter only the posts from the 4 categories! If you feel any problem, feel free to ask!
My recent post Search the best and cheap Premium Website Hosting Provider using webhostingrating.com
I for the life of me cannot get this to work. Am I correct in my understanding that if I post the entire jquery 1 3 2 script I do not have to link to a host?
Here's what I did:
1. Posted the default CSS above ]]></b:skin>
2. added this <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> after ]]></b:skin>
3. Then pasted the entire long jquery 1 3 2 after that before /head
4. Created am HTML Gadget in Blogger, put in my blog address and all I get is a little animated bar that never stops and say please wait.
What am I doing wrong?
My recent post The Doomsday Machine (1972)
Actually once you have attached the script tag for jQuery1.3.2 from google host, the library is already included! DO NOT COPY PASTE THE WHOLE JQUERY AGAIN… Just follow these steps
1. You have done things correctly till including the CSS and jQuery.
2. Now after the jQuery add this script tag also:
<script type="text/javascript" src="http://recent-filtered-posts-using-jquery-blogspot.googlecode.com/files/recent-filtered-minified-v1.jquery.js"></script>
Now add the HTML widget and it should work!
when will it be possible to add this type of multiple widget. Currently it supports only one. Hope you'll fix it soon.
My recent post Starting with Photography- Some basic tips
I loved your widget but the recent bug (known issue) came as big wall. there fore I tried different method. But I'll be waiting for your fix. I was thinking of trying this, but will it make my blog load slow?
I tried the following method forRecent posts according to your post category widget.
Regards,
YouCanHack
My recent post Recent posts by Category or Labels in Blogger
Thanks! Got my SEM this month! So will start coding a new version next month! 🙂
how to remove the default images ?
my blog look ugly with the default images…
thnk's..
My recent post 19 Ciri – ciri anak metal
Its there on the parameter! You have to set
'defImg':'Image_URL'
Where you have to replace Image_URL with the direct link of your image!
Hi Swashata
I discovered your site and I find it very helpful but I have a question : can you help me to make the same "you may also read" widget in Blogger.
Thanks
You can get the widget here at moretechtips Blog =>http://www.moretechtips.net/2009/04/jquery-gdata-…
thanks for your help !
I am using your CSS It looks beautiful !
thanks for your fast respone
You are most welcome 🙂
I am counting upon you… Still waiting for the bug fixes.
Hi Swashata!
Your widget is exactly I'm looking for, it's perfect!! Congratulations!
How could I do to add some text in it. For example 40 characters in each post. I'm trying to modify it but my knowlegde about programming is limited.
Thanks you in advance
Manuel
Hi Swashata!
This widget is just I was looking for. It's great.
I would like to know how introduce a variable to show a piece of text post.
Thanks you ini advance!
Manuel
All the codes will get updated shortly! Now that we are on wp and have almost finished up customizing our blog the way we want, so now we can conc on more quality open source projects!
Ok, thanks!. I wait the new code so impatient. However, I am trying to implement the widget as it is now and I don’t get results. I follow all the steps (CSS, including framework and call function), but nothing comes out. In fact, when I try to view the example or demonstration in this web I get the same result. Could you help me?. Thank you in advance.
Manuel
Have some patience buddy! This is going to be my next project! Also the error is due to the quotes! I will fix this post asap to make it workable! And the demo is not working because, we have shifted to WP now! 😉
Yes!! I got it!! You were right… the problem was the quotes! You can see running in the blog. Thank you!!!!!
Hello!
Thank you for this fantastic plugin. I’m thinking of using it soon.
I would like to ask how it would be possible to get the date and/or part of the first paragraph of the posts.
Thanks again!
Best wishes
Just wanted to point out that your code makes certain assumptions about the HTML in the posts which may make the script fail. One such assumption is the use of double-quotes for attribute values, when the HTML spec allows single or double-quote values.
I blogged about the fix on my site.
Hello,
First of all I want to thank you for the recent Post widget which has the advantage of dynamic loading. Although, I have a problem and I would like kindly to ask you to provide me some help-suggestion if possible..
I want to load blogger recent comments in two different divs..But,whatever I tried so far it loads all the comments in one div..(all of them are loaded in one div)..Please have a look on the following trial page in order to see what exactly I mean.
http://www.gdoop.com/recent-post-filter.html
Do I have a mistake outhere? Is it a problem of the script itself? Is there any solution?
I would apppreciate your answer
Thank you in advance