Its very easy to get Related Posts in WordPress but now getting Related Posts Widget in Blogger is also too easy. Many people have Asked Me About how to Add this Related Post plugin for Blogger just like I have done. After reading, to admin's comment in this post I've decided to post it here. Just check it out!
Just follow the instructions below to add "Related Post" widget in Blogger.
Step 1
Go to Layout => Edit HTML in your blog
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i548.photobucket.com/albums/ii355/gohitech/newconcept_bullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://gohitech.googlecode.com/files/Post.js' type='text/javascript'/>
Now save your Template.
Step 2
Now look for <p><data:post.body/></p> in the template. Make sure to "Expand Widget Template" in the Edit HTML page.
Add following code below <p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
Save your template and you are done with two step installation of code.
If you have any problem please use comments form below.
|
Saturday, October 3, 2009
Show Related Posts in Blogger
Thursday, October 1, 2009
Add Social Bookmark Widget/Links to Blogger
Social Bookmark Links are widely used by bloggers to help their readers share the useful contents to the world! Digg, Technorati, Delicious, Stumble Upon, Facebook etc are widely used onlinesocial bookmarking and sharing communities.
This post explains how to add Social Bookmark Links below post body(content) in Blogger(blogspot) blogs. It's very simple, just do the following steps:
Note:Please Note: Before Editing your Template, Save a copy of your current template by clicking 'Download Full Template' in 'Edit HTML' page of the Blogger 'Layout' Window and 'Preview' the changes before Saving
Steps:
1 Go to Blogger Dashboard - click Edit Layout - then click Edit HTML
2 Select Expand Widget Templates as shown in the image below:
3 Then Search(Ctrl+F) the code given below in your template:
<br /><data:post.body/></p>
4 paste the below code after above searched lines:
<!-- Start of social bookmarks -->
<b><i>Share this:</i>
|<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a> |
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Twitter</a> |
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Technorati</a> |
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Del.icio.us</a> |
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>StumbleUpon</a> |
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'>Facebook</a> |
</b>
<!-- End of social bookmarks -->
Wednesday, July 1, 2009
11 Useful SpeedLinks for Blogger Users
Here are some of the best tutorials and sites for Blogger users which have caught my attention this week:
1. Customized Feedburner Subscription Box After reading a thread on the Blogger Buster forums about customizing Feedburner's email subscription box, Doug Cloud has written an excellent tutorial to explain how he created a version to match his template design using Photoshop and CSS styling. If you haven't already visited Doug's blog, I really do suggest you pop over to see a beautiful Blogger powered design...
2. Add Yahoo! Buzz Buttons to your Blogger template Over at Woork, you can read how to add Yahoo! Buzz links to your Blogger template to benefit from this new social bookmarking system. While you're there, check out the amazing new design!
3. Utilize Blogger to reduce email overload
As part of an article explaining methods of reducing email overload, Digital Inspiration suggests using Blogger! I won't explain the details here as the post itself is an excellent read :)
4. iBlogSpot with Lifecast (iPhone App Review)
Over at The Blog Herald, you can read a review of Lifecast: an iPhone application for those using Blogger.
5. Weebly (An alternative to Google Pages)
As many of you may be aware, Google Pages will be phased out by the end of the year. So if you're looking for a free alternative host for your scripts and template files, Weebly is an excellent option. (Thanks to Fernandoo1 for the tip!)
6. Wowzio Widgets
Alisha of the Wowzio team let me know about this new service which automatically produces useful widgets for your blog based on the content from your blog feed. It certainly seems easy to use, and you can preview your widgets right away.
7. Show the current date in your blog
Over at ThemeLib, you can find a useful tutorial to display the current date in your blog with only minor tweaks to your template.
8. Show off your followers (new feature for Blogger)
I'm dying to try out this latest new feature for Blogger, but my dashboard hasn't been updated yet! If you'd like to know more, head over to Blogger Buzz to read this introductory post.
10. Ratings Widget for Blogger (With Popular Posts Widget for your Sidebar)
Although Blogger has recently introduced "star ratings" for our posts, this still lacks a fundamental function which I'm sure we'd all love to use: a popular posts widget for to showcase the most popular posts as determined by our readers.
Yellow Turnip has developed a ratings widget which you can add to your template with ease. There's no need to register, AND you can use a popular posts widget too!
11. Blogger Showcase
This Blogger powered site showcases the best of Blogger designs and is well worth a visit just to see how well it's been designed! You can vote for your favorites and submit your own designs for consideration:
Create Tag Cloud For Your Blog
You may have seen "tag clouds" in other blogs which feature keywords from the blog posts in a cloud format. These are different to "label clouds" which are constructed of the labels you use for your Blogger posts. You can see an example of a "tag cloud" I constructed for Blogger Buster here:
I created this tag cloud for free over at ZoomClouds, which allows you to customise the size, colour scheme and included tags of your cloud. To create a tag cloud for your own blog, here's what you'll need to do:
1. Head on over to ZoomClouds and create your free account. This will allow you to use the tag cloud service and store your designs on site.2. Now it's time to create your first tag cloud! Sign in to your ZoomClouds account and click on "create cloud|" near the top of the page.
3. Give your cloud a name and description, and submit your RSS or Atom feed. For Bloggers this will either be "/feeds/posts/default?alt=rss" or /atom.xml" at the end of your blog address (eg: http://yourblog.blogspot.com/feeds/posts/default?alt=rss).
4. Select how many days worth of content you want to include in your cloud. The maximum will depend on how many posts are included in your feed, so you may want to consider changing your feed settings if you want to include all of your posts in the tag cloud.
5. Click "create cloud" to create your cloud based on these settings.
6. You can then view your cloud with the default ZoomClouds design to see how it can look. To change the appearance of your cloud, click on "design" near the top of the screen and choose your settings, including border colour, fonts and more. You can save multiple templates of the same cloud here too.
7. To get the code for your cloud, click on "design" and scroll down the page a little until you see the code box. Select all of the code (Ctrl+A) and copy to your clipboard. You can then insert this into your blog template where you would like it to be displayed.
8. If there are tags in your cloud which you would prefer to be left out, you can choose this by clicking on "Filters" near the top of your ZoomClouds dashboard and adding each unwanted tag in the box supplied. Similarly, you can also add tags that you want to be included in the cloud which aren't yet featured.
Tag clouds could be used instead of label tags in your blog, or indeed as well as labels, since they are a reflection of your post content, rather than the labels you give to your posts. Example usage would be in a sidebar widget, though you may also want to consider featuring one at the top of your posts (see this post for a tutorial), or even in a blog post as I have done here!
Technorati Tags: tag+cloud | blog+tags | labels | zoomclouds | free+widgets