Popular Posts gadget for blogger

Sunday, December 20, 2009
Labels:


Here is a gadget for your blog to show popular posts on your blog. The posts displayed are selected based the number of comments on the post. This gadget is customizable and you can show any number of posts.

To add this gadget to your blog go to > Layout > Add a Gadget > HTML/Javascript and add the below code :
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i )
{
var href = "'" obj.value.items[i].link "'";
var item = "<li>" "<a href=" href ">" obj.value.items[i].title "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fbloggerflick.blogspot.com&num=10" type="text/javascript"></script>
Replace the code in red with your blog url and num=10 indicates the number of posts to be displayed.

Now, save your gadget. This gadget does not works on all blogs try your luck or use Random Posts gadget for blogger.

Random posts gadget for blogger

Sunday, December 20, 2009
Labels:


Random posts gadget is used to display posts from your blog at random. All the posts will be selected from your blog archive. Each time the blog page is refreshed the posts displayed by gadget also changes. This gadget helps in digging your old posts from blog archieve.

To add this gadget go to > Layout > Add a Gadget > HTML/Javascript and add the 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>
To change the number of posts to be displayed, change the code in red to your required value.

Business Ads Ready : 3 column blogger template

Saturday, December 19, 2009
Labels: ,
Business Ads Ready : 3 column blogger template




This template is Ads ready and is designed by Ipietoon. This design is very clean and it has all the feautres from menu to post summary and also a drop down menu. Just view demo for more info.

Features of the template :
  • Fixed Width Template
  • 3 column template
  • Three column at lower section
  • Right Sidebar
  • Ads Ready
  • Top Menu Links
  • Compatible With Mozilla, Chrome and IE7
  • Breadcumb navigation
  • Search Box Ready
  • Beautiful Comment System
  • Featured post, that you can wrap your adsense
  • Easy customize adsense section
Installation Instructions :
  • Download a template and unzip.
  • Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
  • Supports your previous template [Download full Template].
  • Find and upload your template.
  • Enjoy your new blog design.

To display codes [CSS, XML, HTML and Javascript] in posts

Saturday, December 19, 2009
Labels:


Many of bloggers are not aware of displaying codes [CSS, XML, HTML and Javascript] in blogger posts. If anyone tries to post normally the code is not visible. The code to be posted should be friendly.

It can be customized in two methods
  • Elliotswan Postable
  • Firefox Addon
Elliotswan Postable
The code to be posted can be made friendly at Elliotswan.com. Just open the site, post the code and click on make it friendly. Make Code Post Friendly : http://www.elliotswan.com/postable/

Firefox Addon
Install GreaseMonkey https://addons.mozilla.org/en-US/firefox/addon/748
and open this script http://userscripts.org/scripts/source/42696.user.js.

Install the script and you will find "HTML Encode Selection" button by the side of "Publish Now" button in post editor. Now, to make any code postable select the entire code in "Edit HTML" mode and click on "HTML Encode Selection". The code will be automatically generated.

* This method works only in old post editor.

Making the code highlight
After making the code postable, you have to highlight the code in your post for clear view. To do this here is a hack :

To add this go to > Layout >  Edit HTML and search for ]]></b:skin> and add the below code before this tag.
.code {
margin : 15px 15px 15px 25px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f2f2f2;
border : 2px solid #dcdcdc;
}
.code li {
font-size : 14px;
line-height : 20px;
font-family : Arial;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
You can customize this code and can change colors to match your template.

Now whenever you create a new post include the code between :
<div class="code">
Insert your code [CSS, XML, HTML and Javascript] here.
</div>
This is the best way to add codes in your blog posts. If you find any difficulty just add comments.

LinkWithin related posts with thumbnails

Saturday, December 19, 2009
Labels:

If anyone feels difficulty in installing Related Posts with thumbnails gadget that is already published in BloggerFlick, then here is a simple method.

You can also get similar gadget from LinkWithin . There are many features included in this gadget, some of them are :

Show Related stories under each post
LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.

Don't Let Your Past Stories Go to Waste!
We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

Increase Pageviews, Keep Readers Engaged
The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

Elegant, Unobtrusive Design
Our widget is minimally styled and blends in with your site design.

Free and Easy to Install
The widget is free and ad-free. It takes a minute to get the widget up and running on your blog, no signup required!

All you need is to visit site : http://www.linkwithin.com/learn

Related Posts with thumbnails for blogger

Saturday, December 19, 2009
Labels:


Simple related posts gadget is replaced by this new 'Related Posts with thumnails'. It has a feature of  displaying the thumbnails of images from the posts and attracts the users which results in increase of page views per user. This gadget is created by BloggerPlugins and is listed here.

Similar gadget is also available  from Linkwithin and is very simple to install in your blog. Finally, this gadget helps in retrieving all your stories from Blog Archieve.

To add this gadget to your blog go to > Layout > Edit HTML and search for </head> and add the below code above this tag.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Now search for <div class='post-footer-line post-footer-line-1'> and add the below code after this tag.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot;   data:label.name   &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Maximum number of posts displayed can be changed by changing the value in
  • var maxresults=5;
Title of the related posts can be changed from
  • var relatedpoststitle="Related Posts";
Find difficulty in adding the gadget to your blog ? Please post comments.

Recent Posts with thumbnails gadget

Saturday, December 19, 2009
Labels: ,


After posting 'Recent posts gadget for blogger' here is another gadget for recent posts but this time to show up thumbnails in the post along with the post titles. This gadget is actually by BloggerTricks designed for a template and can be used for your blog too.

Here is the screenshot of the gadget :



To add this gadget go to > Layout > Add a Gadget > HTML/Javascript and add the below code.
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[1] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[2] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[3] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[4] = "http://i48.tinypic.com/mwz9ec.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "Comments";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 10;
summaryColor = "#000";
icon2 = " ";
numposts = 6;
home_page = "http://bloggerflick.blogspot.com/";
</script>

<script src="http://h1.ripway.com/BloggerFlick/Scripts/RecentpostsThumbnails.js" type="text/javascript"></script>
Replace the code in red with your blog URL.
  • boxwidth > Width of the widget
  • cellspacing > Space between cells (default one is good)
  • borderColor > Border color
  • thumbwidth > Width of the thumbnail
  • thumbheight > Height of the thumbnail
  • fntsize > Font size of the title
  • acolor > Color of the title
  • aBold > you want bold titles? [true or false]
  • numposts > How many posts you want to show ?
  • home_page > http://YOURBLOG.blogspot.com/
Everything in the code can be customizable and you can change any value based on your requirement.

Join mybloglog community for more hacks : BloggerFlick On MyBlogLog