Related Posts Widget for Blogger with Thumbnails

3
in , , ,

This is next version of 'Relataed Posts Widget for Blogger'. As title reads it displays the related posts with thumbnails at the bottom of every post. It is very simple and easy to configure into your blog. You can also setup Related posts widget without thumbnails.

Below code replicated from Aneesh's BloggerPlugins, thanks to Aneesh.

How To Install:
1. Go to Dashboard --> Design --> Edit HTML --> Select 'Expand Widget Templates'
2. Search for </head>
3. and replace it with below code
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
4. Search for <div class='post-footer-line post-footer-line-1'>
5. Copy below code next to it
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
6. Now save your template, you are done

You can find this widgets from below providers.

Top 10 blogs/websites for Related Posts Widget for Blogger with Thumbnails:

Read more

Related Posts Widget for Blogger

1
in , , ,

Ok, if you started blogging niche topics like SEO or Money-Online or what ever your topic is, it is very difficult to reach visitors with a single post, why because it is hard to describe these topics in oneshot.

Related Posts Widget will displays bottom of every reading post which contains the similar posts.

How it works?
This hack will grab the lable reding post and look for the posts posted under same label then displays selected number of posts below each post. It includes two section, first one is adding CSS in header section, second adding the hack in body section. You can find both the codes from below providers.

Steps to follow:

1. Go to Blogger Dashboard, Design –> Edit HTML
2. Back up your existing Template before making any changes!
3. Make sure to check the "Expand Widget Templates" box.
4. Search for the </head> tag.
5. Add the following style code just before the </head> tag
<style> #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 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

 6. Now search for <data:post.body/>. In some of the templates this code may look like this

<div class='post-body>
or
<data:post.body/>

7. Add the below code immediately after <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><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> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Now Save your template, you are done. Go to any of your post, related posts should display below your post.

Condition: Your post should contain label to work this blogger hack.

Top 10 blogs/website for Related Posts Widget For Blogger:

Read more

Random Posts Widget for Blogger with Thumbnails

0
in , ,

Read more

Random Posts Widget for Blogger

0
in

Ok here is my post on Random Posts Widget for Blogger. It will display your posts on your blogger sidebar randomly. Generally if you look at related posts they would be return similar kind of post, for example if you are reading a post from Automobiles or money-making or recipes or medicine, related posts will return similar kind posts where your visitors may not bet interested on them.

Ok, random posts widget will return random posts irrespective of reading posts, this could give better scope to your reader to move on to next posts.

How to install Random Posts Widget for Blogger:
1. Go to Dashboard --> Design --> Page Elements --> Clicl Add a Gadget --> Select HTML/JavaScript copy/paste code below code

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>
";
document.write(item);}}
}document.write('</ul>
');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

Those are all the steps necessary to implement the Random Post Widget to blogger. I hope you and your readers thoroughly enjoy it!

Top 10 blogs/websits providing Random Posts Widget for Blogger

Read more

30 Blogger Widgets From Blogroll

0
in , ,

Blogger-WidgetsBlogspot has undergone major changes recently, this has attracted lot of bloggers to start their blogs. Blogger development team has added several new features. Also countless of new blogger widgets, blogger plugins has been developed around the globe. I am listing few best blogger widgets and blogger plugins that will definitely  boost your blog reader experience.

1. Recent Posts Widget by Feed2JS - Excellent plugin for Recent posts. It is easy to install, fill in the form and click the button to generate widget code.
2. Recent Post Widget by BloggerPlugins – A highly customizable blogger widget for Recent  Posts. You can very well choose the number of posts to display.
3. Numbered Page Navigation by BloggerPlugins - Page Navigation is a really awesome and long awaited feature.
3. Numbered Page Navigation by AbuFarhan – Another blogger hack for numbered page navigation.
4. Recent Comments Widgets by Blogger-Templates – This  is another plugin for Recent posts. Fill in the options in the form and one click widget code generation.
5. Recent Comments Widget by BloggerPlugins – A highly customizable blogger widget for recent comments. You can choose  number of comments to display.
6. Recent Comments Widget by Blogger Templates Designs – Yet another recent comments widget with high customizable options, and can be  installed with one-click.
7. Recent Comments Widgets by MadToMatoe – Another Recent Comments widget for blogger blogs. You can customize the number of posts to display as you wish.
8. Advanced Recent Comments Widget by Csabi – Another highly customizable recent comments widget for blogger blog.
9. Top Commentators Widget by BloggerPlugins – Exllent blogger widget for top commentators.  This is  available in two versions.
10. Google Translate Mini-Flags Widget by MadToMatoe - Very useful translation plugin powered by 'Google Translate'.
11. Translation Widget by BloggerPlugins – Another blogger widget for language translations.
12. Label Cloud Plugin by phydeaux3 – Most popular label cloud generation plugin for blogger. You can customize with various options as you require.
13. Archive Calendar Widget by PurpleMoggy - Calendar widget with customizable options for Archive posts.
14. Archive Calendar Widget by phydeaux3 – Calendar widget with customizable options for Archive posts. Most customizable widget with better browsing experience.
15. Picasa Web Albums Slideshow Widget by Blogger Templates Designs – Unique plugin to show photo slideshow from picasa account.
16. Search Form Widget by Blogger Templates Designs – Search form widget for your Blog. Your can add this code anywhere your require. 
17. Google Talk Widget by Blogger Templates Designs – This makes your readers to communicate with you directly.
18. Sudoku Game Widget by Blogger Templates Designs – Install this plugin to integrate sudoku puzzle game in your blogger blog, to make your readers to spend more time on it.
19. Rating Widget by Outbrain – This will give an option to your reader to give ratings to your posts. Easy to integrate.
20. Twitter Profile Widget by BloggerBuster – This will add twitter profile and twitter updates to your blogger blog.
21. Alexa Traffic Widget by TechKnowl – Display your Alexa statistics with this widget.
22. Flash MP3 Player Widget by TechKnowl – Play mp3 song in your blogger blog.  
23. Multi-tab TOC Widget by Beautiful Beta – This will add multi-tab table of contents section in your blogger blog. Popular among blogger users.
24. Tab View Widget by Hoctro – The coolest plugin showing tabbed posts with animated post excerpts. A must for your blog's sidebar.
25. Random/Rotating Banner Widget by FreeYaSoul – Very useful widget for displaying rotating banners in your blog's header.
26. Social Bookmarking Widget by Lasvak – Most easily installable bookmarking widget for blogger blog.
27. Paypal Donation Widgets by Etienne – You can integrate this for donations.
28. Podcating Plugin by Talkr – Register and get free podcasting plugin for your blogger blog.
29. What's Next? Section Widget by eblogtemplates - Add Wordpress style 'What's Next' section below blogger posts with this blogger widget.
30. Bookmarking Widget by SocioFluid - Best social bookmarking plugin for blogger blog.

Read more

Numbered Page Navigation for Blogger

5
in , , , ,

I am sure you are here to make your blog more viewable and keep it professional.

Ok then, Numbered page navigation will give a better look than Blogger's default feature. It will display the total number of pages available on your blog with hyperlinks. You can very well customize this hack with the numbers posts you want to display per page.

Ok, make sure the page number under "Dashboard --> Settings --> Formatting --> Show at most" is matching with the max-results of this hack are matching. This will give you better display.

For example, in this hack if you selected max-results = 10, make sure you have selected the Show at most = 10 from Settings of your blog.

STEP 1 - Adding CSS Style


Go to Blogger Dashboard > Layout > Edit HTML. Always Download Full Template for Backup. Do NOT click on Expand Widget Templates. Now look for
]]></b:skin>

Add below code ABOVE it.
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageOf {color:#d8d8d8 !important;}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 3px 5px;
margin: 2px;
font-weight: bold;
border: 1px solid #EFEFEF;
color: #000;
background-color: #EFEFEF;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #EFEFEF;
color: #EFEFEF;
background-color: #000;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

STEP 2 - Adding JavaSript


Look for
</body>

And add below code above it.

<script type='text/javascript'>
var pageCount=10;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src="http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js" type="text/javascript">

Here you can change Prev and Next Text.
var postperpage=10;
var numshowpage=5;
Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation
e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;

Save your Template.


Below are the top 10 websites that provides the Numbered Page Navigation hack.

If you need any help in setting this template hack please contact me through your comments. If you like my effort you can also appreciate me though comments section :). Looking forward to serve you more & more better.

Read more

 
Design by ThemeShift | Bloggerized by Lasantha - Free Blogger Templates | Best Web Hosting