Hey
Blogger friends, Today i have come up with another cool blogger hack.
It’s about showing recent posts with/without thumbnail from any
particular label/category in blogger. As you can see in my sidebar, I
have listed recent posts from each category, but i have done this in
wordpress. So if you want to do same with your blogger blog, You just
need to add some simple script to your blogger template. You can find
some default gadgets in blogger “Add page element” section to show
recent posts, but they don’t provide an option to show recent posts from
a particular category. So in this post, I will guide on how to show the
recent posts with thumbnail in blogger.
Know The Code
Before installing the code, you must know what the code contains and how can you use it.
1 | <script style= 'text/javascript' src= 'http://smashingtips.com/blogger/recent.js' ></script> |
2 | <script style= 'text/javascript' > |
4 | var showpostthumbnails = true ; |
5 | var displayseparator = true ; |
6 | var showcommentnum = true ; |
7 | var showpostdate = true ; |
9 | <script src= 'http://smashingtips.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent' ></script> |
As you can see in the above snippet, we got 5 variables.
This line controls the number of recent posts shown. You can change the number ’3′ to any number you wish.
1 | var showpostthumbnails = true ; |
This
is used to enable or disable thumbnails in the recent posts. You can
either have them or disable them. It’s your wish. To enable thumbnail,
you must set it “true” and to disable it set it to “false”.
1 | var showcommentnum = true ; |
You
can either show the number of comments or disable it. It’s also same as
before, you must set it to “true” to enable the comment and set it to
“false” to disable it.
1 | var showpostdate = true ; |
It’s used to show the date. Either set it to “true” to show date or set it to “false” to hide it.
1 | <script src= 'http://smashingtips.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent' ></script> |
This
line tells the json to pull recent posts from which blog. You need to
edit this link to show recent posts of your blog or just show recent
posts from a particular category.
To show recent posts from your entire blog, you can just change the domain “http://smashingtips.com” to your blog domain.
If you want to show the recent posts from a specific label, then you need to change the link that line of code to below this.
1 | <script src= 'http://smashingtips.com/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=recent' ></script> |
In
the above code, you need to change two parameters. First one is the
domain name and the second one is the category name. For example, i want
to show recent posts from label called “featured”, so i used its name
in that link.
If you want to use this script either to show
featured posts or for showing recent posts from other existing
categories in your blogger blog, then just change the keyword “featured”
to your label name.
Installing the widget
To add the recent posts from particular category, Just follow the below steps
- Login to your Blogger Account
- Select your blog
- Navigate to the Layout page of your blog
- Select Add a gadget in the layout where you want to add
- Choose HTML/Javascript gadget
- Place the following code in the text area and give it a title as you wish
1 | <script style= 'text/javascript' src= 'http://smashingtips.com/blogger/recent.js' ></script> |
2 | <script style= 'text/javascript' > |
4 | var showpostthumbnails = true ; |
5 | var displayseparator = true ; |
6 | var showcommentnum = true ; |
7 | var showpostdate = true ; |
9 | <script src= 'http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent' ></script> |
Remember to change your name of blog and other parameters. The above code is to show recent posts of your blog.
If you want to show recent posts from particular category, then you must add the following code instead of the above one.
1 | <script style= 'text/javascript' src= 'http://smashingtips.com/blogger/recent.js' ></script> |
2 | <script style= 'text/javascript' > |
4 | var showpostthumbnails = true ; |
5 | var displayseparator = true ; |
6 | var showcommentnum = true ; |
7 | var showpostdate = true ; |
9 | <script src= 'http://9gagbloggerclone.blogspot.in/feeds/posts/default/-/categoryname?orderby=published&alt=json-in-script&callback=recent' ></script> |
As you read in the beginning itself, remember to change the parameters as you wish.
Styling your Recent Posts
The
above codes only fetches the recent posts from your blog. Most likely
it must be suiting your current sidebar layout. But in case its messing
up your current theme, then here is the styling code which you may need.
Let’s us see the recent posts structure and how you can modify it.
So
each link as the above structure. If by chance the above widget is
messing up with your template. Then you need to do the following
modifications in CSS.
5 | padding : 0 ; display : block ; |
9 | font-family : Georgia, serif ; |
10 | border-bottom : 1px solid #ccc ; |
15 | #recentposts ul li img.thumbnail { |
16 | border : 1px solid #DDD ; |
18 | background-color : white ; |
23 | .recentposts ul li a:link, .recentposts ul li a:visited, .recentposts ul li a:active { |
27 | background-image : none !important ; |
31 | #recentposts ul li span.meta { |
34 | text-transform : uppercase ; |
38 | <div id= "recentposts" ><ul> |
39 | <script style= 'text/javascript' src= 'http://smashingtips.com/blogger/recent.js' ></script> |
40 | <script style= 'text/javascript' > |
42 | var showpostthumbnails = true; |
43 | var displayseparator = true; |
44 | var showcommentnum = true; |
45 | var showpostdate = true; |
47 | <script src= 'http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent' ></script></ul></div> |
So
now we have placed the links within a div section called “Recentposts”
and similarly in CSS we have specified proper style for the div section.
So now you can try the above code for adding the recents posts in your site.
Show posts from Particular Label below the post
Now
if you want to show the recent posts from a particular label for
example “featured” posts below the post, then you need to add the above
code into your template following the below steps.
Go to your Template section of your blog. And place the code to your edit HTML.
Once you reach that page, Select “Expand Widget Templates” and search for :
Now
place the original recent posts code from below to the edit html page.
It is also the same code as above, but just we need to encode the script
to make it work.
8 | padding : 0;display:block; |
12 | font-family: Georgia, serif; |
13 | border-bottom: 1px solid #ccc; |
20 | #recentposts ul li img.thumbnail { |
21 | border: 1px solid #DDD; |
23 | background-color: white; |
28 | .recentposts ul li a:link, .recentposts ul li a:visited, .recentposts ul li a:active { |
32 | background-image: none !important; |
36 | #recentposts ul li span.meta { |
39 | text-transform: uppercase; |
43 | < div id = 'recentposts' >< ul > |
44 | <script
style='text/javascript'
src='http://smashingtips.com/blogger/recent.js'></script> |
45 | <script style='text/javascript'> |
47 | var showpostthumbnails = true; |
48 | var displayseparator = true; |
49 | var showcommentnum = true; |
50 | var showpostdate = true; |
52 | <script
src='http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent'></script></ ul ></ div > |
Showing Adsense ad and Recent Posts side by side
If
you want to show recent posts along with some subscription form or
along with an adsense ad, then you need to edit this code in the CSS.
2 | width : 100% ; // Change Width as required |
3 | float : left ; // Keep it as you want according to your template. |
Conclusion
I
wanted to cover everything related to recent posts widget in blogger,
but still there are lots of other things you can add to this. So i will
make a second part of this post with few more modifications to the
script.
If you want any other specific hacks or some modifications
to your blogger, mention in comments i would like to write about them.
0 comments:
Post a Comment