Blogger Tips And Tricks 2012

Paper Wall Blogger Template

Paper Wall is an amazing Blogger Template that has a very stylish but simple design..
The Template was designed by Indeziner for Smashing Magazine and converted to Blogger by Deluxe Templates..

This Template is Adsense Ready and comes with these features modded onto it..

1) Integrated Blended Adsense Ads..

2) Integrated Google Analytics..

3) Integrated Add this Bookmarking Widget

4)Modded Title Tags

Demo | Generate and download

Where to get the Analytics Tracking Id

1. If you havent signed up for analytics you can signup at www.google.com/analytics/

2. Now create your website profile.

3. In google analytics home page all of your sites will be displayed..

4. Near every site name you will find something like UA-123456

5. This is the Tracking code for analytics..

Credits

Designer : Indeziner for Smashing Magazine

Converter:Deluxe Templates

Source: http://www.bloggerplugins.org/2009/07/paper-wall-blogger-template.html

SEO Tips for Blogger - Part 1

Search Engine Optimizatio or SEO - All of you might have heard of it??So what exactly is it?

What do we do to make our Blog Friendly to our readers? - We do change the layout and design so that our blog looks elegant to eyes.

What do we do to make our Blog friendly to Search Engines like Google,Yahoo and Bing? - Here is where we should do SEO..
Unlike Wordpress and other blogging platforms,Blogger automatically does some SEO work for us making the job easier for us.Still there are some areas where we can do something

Here is a collection of My SEO tips for my beloved readers..

1) Don't put too much posts on homepage - When you put too much content on homepage, it leads to duplicate content. Means many pages on your blog will have similar content. Your latest post page and your homepage has got the same content rite?

2) Submit a Sitemap to Google Webmaster Tools

3) You will have links to feeds on your pages. Or may be some links to social bookmarking sites. Too many links on a page makes it unfriendly for search engines. So you should add the rel='nofollow' tag to such not so important links..

- Feed links (The blog feed has same content as your blog.So it is important that you make the feed links nofollow)
- Social Bokkmarking links - If you use social bookmark buttons like that for digg,stumble twitter etc, try making them nofollow..
- Links to unimportant pages(unimportant to search engines.. ;) )like contact me page,link to me page,about me page etc..
<a href="link url">link name</a> is a dofollow url
<a href="link url" rel="nofollow">link name</a> is the nofollow version of the same link

4) Use the Title Tag Hack

5) Use Meta Tags
- What you shouldn't do when using meta tags - I have seen many blogs using the same meta tag for all pages of the blog.You should never use such duplicate meta tags, I suggest that you use a separate meta description and keywords for your home page.You can use b:if conditions to do this.

6) Get back links.. Get more links to your site from your friends.. ;) You can also add a Link to your site Widget .

7) Submit your blog to Directories. - One of them is here Blogger Directory

8)I won't add a archive widget.If i do it i will display it on a particular page only. - Why? The archive widget has so many links in it..As i said too many links on a page is unfriendly to search engines.

9)Don't add additional ROBOT meta tags.. Some guys try adding tags like <meta name='robots'...... >
Blogger automatically does some SEO for it.. Don't override it. You know something? Every blogger blog has got a robots.txt file.. see mine.. http://www.bloggerplugins.org/robots.txt Off course we cant edit them.

10)When building back links use your primary keyword as the anchor text. <a href="">Anchor Text</a> - > Just to explain what an Anchor Text is.
I use Blogger Widgets as my Anchor Text.

11) Use Alt tags for images. When you use images try to add alt tags. For example <img src="imageurl"/> can be replaced as <img src="imageurl" alt="Some alternate description for the image"/>

12) Focus on what you write. Always try to write some unique and interesting content.You cant hope to be on top of search engines with copy paste blog posts..

These are some of the ones that i remember..Will update it if i find anymore..

Source: http://www.bloggerplugins.org/2009/07/seo-tips-for-blogger-part-1.html

Gadget Settings

Some Previews of the Gadget with different configurations

About the Various Options

Pull Posts From – By default, the recent posts will be fetched from the blog to which you have added the gadget. If you want to fetch the posts from another Blogger Blog, then you can change this option

External Blogger URL – You need to fill out this field only if you are trying to pull posts from another blogger blog.

Maximum Length of Post Title – Your post titles can be too long. In that case you can limit the title to x number of characters using this parameter.

Snippet Style – You can display the snippet with Post Summary, Post Thumbnail , or both or none.

Snippet Thumbnail – When you upload photos from your PC to blogger using the Blogger Post Editor, Blogger generates a Media Thumbnail of size 72 X 72 px. If you add external images to your blog posts, then Media Thumbnails will be generated. If media thumbnails are not present, the post will be scanned for images or YouTube videos. You can specify which images to use by using this option. The No Image Thumb is a default image which will be used if post has no images or videos(you can turn this off) .

Note:- If you want to grab the images or YouTube thumbnails, then you should have “Site Feeds” set to Full. If you opt for the Media Thumbnail only, then the short feed will be used by default.

Thumbnail Dimensions – Size of the Thumbnail in pixels. The gadget doesn’t generate any Thumbnail. It just uses the media thumbnail,YouTube thumbnail , or any image in the post and scales it to the specified dimensions

Summary Length - If you have opted to display the post Summary, then you can control the length of the summary(in characters)

Post Meta Style – You can display the Post Date, Comment Count and a Read More Link.You can choose any combination of these three.

Font and Font Size– By Default, the container’s font and Font Size is inherited into the Gadget. But if you are using a 3rd party template, then these might not be properly inherited. In that case you can use this Option to over ride these parameters.

Extra Styling – Allows you to specify the position of the Thumbnail, and whether to underline the links or not.

Border Color – If your specify a border color, and if the posts need separation, then a dotted border will be applied between the posts. If you don’t specify a color or if you specify an invalid color, then the border wont be drawn. You can use Hex Color Codes(eg: #000000) or or normal colors (eg : red )

Link Color and Text Color – By default, the link and text colors will be inherited from the blog. But if you want to override this, then you can specify the color in any of the two formats.

Read More Text – This field was intentionally added to help blogs which are not written in English. Initially i used “More »” as the Read more text without taking any user Input. Seeing this on a non- English Blog is a little awkward. So i added this new field :)

Note : - Those who are using the older version of this gadget, please remove it and add the new one.

Add The Gadget to your Blog

Check out the Demo and Sample Configurations to see what the Gadget can do.

Your Suggestions and feedback are always welcome.

Source: http://www.bloggerplugins.org/2009/07/recent-posts-widget-blogger-thumnail.html

Jquery Image Magnifier For Blogger

Jquery Effects Part 1

This hack will help you to post elegant magnifying effects to the images you post in blogger.

Here is a preview of what this script can actually do.

The method. - This is actually a very simple hack.

The Scripts for this amazing hack was developed by Dynamic Drive

First of all you will have to download two files.

One is the script that powers the magnification [http://dynamicdrive.com/dynamicindex4/jquery.magnifier.js]

and second one the the cursor that should be displayed when you hover the mouse over the image.

Upload the cursor file(2nd file) somewhere and note down its link.I would suggest you to use http://www.hotlinkfiles.com/

Now Open up the first file(the js file) and find this line in that..

cursorcss: 'url(magnify.cur), -moz-zoom-in',

replace magnify.cur with the url of the cursor that you just uploaded now.

Save this js file and upload it. note down the urls of this file.

Now we have to add the script to our blogger template.

To do that Goto Blogger Template- > Edit Html

Find this code

</head>

and replace it with the following code[change url_of_jquery_script with the actual url]


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="url_of_jquery_script">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>

Now when you add an image to blogger,use the class magnify..

ie.. use something like


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7hzL55IaCRVzeWJ_IXBnjWkazi5GC8XfhtQqjfoIjqrHVyG_qLbST9RW41Qp9oBb0_DqU1zWsXM6FTClcHa3hwXFZH1VR2Q-chtblbWF_fCdcdYbRO-tiWSardx2DqOSOoGYtr35j78/s400/aishwarya-rai-politician.jpg" class="magnify" magnifyby="5" style="width: 200px; height: 150px;" />

ie when you upload an image,goto the Edit Html mode and replace the style and class tags of the image with the portion marked in red..and then

The code that i used for this image is


<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7hzL55IaCRVzeWJ_IXBnjWkazi5GC8XfhtQqjfoIjqrHVyG_qLbST9RW41Qp9oBb0_DqU1zWsXM6FTClcHa3hwXFZH1VR2Q-chtblbWF_fCdcdYbRO-tiWSardx2DqOSOoGYtr35j78/s400/aishwarya-rai-politician.jpg" alt="" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" />

Changing s400 to s800 will get you a bigger image.. :)

Source: http://www.bloggerplugins.org/2009/07/jquery-image-magnifier-for-blogger.html

How to add Pages to Blogger like in Wordpress

UPDATE - Blogger has now officially released its own version of the pages- More info

Many of you might have wanted to use pages for Blogger like in Wordpress.But unfortunately Blogger doesn't provide any thing like Wordpress Pages.But there is still something that can be done.To know what i am talking about,just have a look at my About Page .

To create a Wordpress like page in blogger,we will first create a normal post in blogger.If you don't want this post to be shown in your feed updates,change the date of the post to something very old[may be an year back.See the pic for details] . If you want to prevent users from posting comments on your pages,you can disable commenting on this particular post[see the pic for details]

Now publish your post.We will use this as a pge.You might want to hide the social bookmarking icons and such other stuff from your ‘’pseudo pages’. Actually our blogger template is full of different divisions and we style each of these divisions using CSS.Using CSS rules,it is also possible to hide some of these divisions.So what must we be doing?We need to hide some unwanted divisions on our new pseudo page.

Ok, to Do this find the </head> tag in your template.Just before this,we will add some additional CSS rules to hide those unwanted parts and divisions.We will use the b:if conditions to make the hiding affect our pseudo page only..[so that these rules don't hide these divisions on other pages]

Just before the ,insert the following

<b:if cond='data:blog.canonicalUrl == "http://www.bloggerplugins.org/2005/06/about-me.html"'>

<style>

.comments-block,.comment-form,.comment-footer,.blog-pager,.feed-links,.comments,.bookmark{display:none;}

</style>

</b:if>

Here i have given some list if divisions which should be hidden.If you need to hide any other divisions you can add this to the list but make sure to separate the different divisions using commas.

Source: http://www.bloggerplugins.org/2009/07/how-to-add-pages-to-blogger-like-in.html

Some Tricks for making links in Blogger Posts

Creating links in blogger is very easy. There is a link Option in our WYSIWYG Editor.When you use this option you can easily add a new link. Now to see the Code of this link just clisk on the Edit Html Option on your Editor[See image for details]

There you will see something like

Additional Options

1.Open The link in New Window

To open the link in a new window,add the target="_blank" option to your link so that the code becomes something like

2.Adding a Relation attribute

Relation attribute can be specified by adding the rel="relation"

The relation attribute is used to specify the relation of the link to the our post. One commonly used relation is external which specifies that the link is a link to an external page

The external relation is not much useful to us.But there is yet another one,

rel="nofollow" - When we add this to a link,we specify the search engines that they shouldn't go exploring this link url from our post page.This thing is important.Having too many links[especially to external pages] is not good for Search Engine Optimization. So if you link to some external website use the rel="nofollow" option

[Note:Don't use the rel="nofollow" option when you are giving credit to the original author of an article that you use in your blog.They deserve to be followed by the search Engines :)]

3.Adding the Title Attribute

If you add a title attribute to a link,then if someone hovers his mouse over that link,the title will be displatyed as a description of the link.

As an example try doing a hover over the next link[W3Schools] it will display Title of the link to W3 Schools.This is beacuse i have given this text as the tilte attribute of that link

To know more about the different attributes available for links visit W3Schools . Its the best place for a beginner.

4.Remove Underlining of a link

In some blogger templates,the links within the posts may be underlined. To remove the underlining you can use the style attribute - text-decoration:none

5.List of Links

If you want to use a list of links ,then you should use the<ul> <ol> and <li tags

<ul> stands for unordered list and <ol> stands for ordered list.:( What does this mean??

Ordered list means the list of links will be numbered. Here is the demo

Ordered List Demo

URL NAME 1

URL NAME 2

URL NAME 3

Ordered List Code

To change this to an unordered list,i.e without numbering, just change <ol> to <ul> and </ol> to </ul>

You can also use the ordered and unordered lists for arranging normal text[other than links]

Source: http://www.bloggerplugins.org/2009/07/some-tricks-in-making-links-in-blogger.html

Using Windows Live Writer for Blogger

Blogger Supports XML-RPC Protocol which enables 3rd part Clients to make posts on Blogger.One of the Best Blogging Clients is Windows Live Writer.It comes for free.They just need you to have a windows live id(Sign up for one if you don’t have any)

Download Windows Live Writer

What is Windows Live Writer?

Its a Software which lets you to make posts to your blog from your desktop.This Software has a very simple and easy to use post editor with live preview and a bunch of very useful features

Features

1.Easy Upload of Images with Effects Watermarks and Borders

livewriter Live Writer Allows you to easily add pictures.In addition to that you can also add watermarks,effects, and special borders to your pictures.See this pic.I have added some watermarking and black and white effect to this photo.I have also added some special border effects

2.Easy Upload of Videos.

Live Writer allows you to easily upload your videos.You can post your video files to youtube and soapbox from this software and publish it on your blog.In addition you can also embed existing youtube videos onto your blog posts

3.Offline Editing is possible Windows live writer helps you to make posts offline and publish it when you want to. You will also get a live preview feature.

4.Availability of Plugins

There are lots of plugins available for Windows Live Writer.Some of them which i use are

a)Table Plugin – This plugin helps us to easily insert tables to our blog posts.See this demo table. :)

Image Upload	borders,Watermarking and other effects
Video Upload	Upload videos to youtube or use existing youtube videos
Availability of plugins	choose plugins that match your needs

b) Code Plugin – This Plugin allows you to insert code into your blog posts.If you are a programmer who posts code snippets in posts,then this will surely be useful.As a demo check out the code presentation at my label cloud post

There are many more plugins available. You can check them out yourself – List Of Plugins

5.Make multiple Posts at the Same Time. – You can run multiple copies of windows live writer at the same time

6. More Options for Hyper links. – There are more options for making link.You can opt to open link in new window,add title to the link and add nofollow tags and lots more.

If you are a noob to Windows Live Writer(like me) just take a look at some of these tips - Windows Live Writer Tips

Did i miss out any nice features or plugins?? Or did i miss out any annoyances?? If i did please let me know so that i can update this post.

A very special thanks to Prasannajeet who brought me back to Windows Live Writer.I haven’t been using this for long.

Source: http://www.bloggerplugins.org/2009/07/using-windows-live-writer-for-blogger.html

Numbering your blogger Comments

This trick helps you to number each of your comments under a particular post..Thanks to Fernando of Quite Random for this awesome trick.You can read his original tutorial at Quite Random

I have tried to make it easier for you.. You can implement the trick in 3 simple replacement steps..(and a little SEO is added onto this hack.)

A small Demo numbered-comments-blogger

Steps involved in implementing this trick

1.Login to your Blogger Dashboard

2.Goto Template >Edit HTML

3.Choose to expand your Widget templates.

4.Find this line of Code

<dl id='comments-block'>

and replace it with

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>

5.Now find this line of code

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

and replace it with

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='clear: both;'>

6.Now find this line of code

<data:commentPostedByMsg/>

and replace it with

<data:commentPostedByMsg/>
<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a rel='nofollow' expr:href='data:comment.url' title='Comment Link' style='text-decoration:none'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter);
</script>
</a>
</span>

So you should have it working in just 3 replacement steps..:)If everything went well,you should now have a numbered commenting system on your blog.

Source: http://www.bloggerplugins.org/2009/08/numbering-your-blogger-comments.html

Light Box Image Viewer For Blogger

Light box is a really elegant image viewer addon using javascript and the prototype framework. First of all i would like to give the credits to the original maker of Light box,Lokesh Dhakar

I have also added some demos of Lightbox to this page.So if you are not sure,what lightbox is,then take a look at the two demos in this Post.This will really help you in building a well styled gallery like blog.

Installation Steps

1.Login to your Blogger Dashboard

2.Go to Design > Edit HTML

3.Find this piece of code

</head>

and replace it with

<!--Light Box Code Starts  Bloggerplugins.ORG-->

<style>

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }



#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }



#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer&gt;#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgERBKuRZHPBUR917LLzyubCgVN_v37C_PR3KzDClEJ5v07ZEfDVVX8Bwq9uxvyBR0HFyAtfE-XdLnKqzeR8JWjm-XWdLVVil8CN8eSV-KOqNeECQZd2tXiCCBSG0ppoh1R7IBmHnOBoa8/) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY51vuYn_dafJ7b2CvpFBNdF7zKFyxtgTsB9mg7Jxx384QFgP0ufoK5wxfIxWspgjaxLyThRBu9p3nTBXFfdx4VijOMx_vuu0kQPSb45ce0QHsfbTX-fiIbfM3kOwN2vzIOojeDPNzjzg/) right 15% no-repeat; }



#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }



#imageData{    padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 

#imageData #caption{ font-weight: bold;    }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      



#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

</style>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>

<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>

<!--Light Box Code Ends Bloggerplugins.ORG-->

</head>

Adding Images for the Lightbox Viewer

Now you have added the scripts and styles needed for the lightbox.Next part is to add our images..

You can also add captions to your images and also group multiple images into albums. First upload your photo using the blogger photo upload tool.Now switch to the edit html view from the post editor

See the instructions in these images. (Click to view a bigger version.. :))

Make sure that you delete the -h from s1600-h .Now you should be able to see the image(which you uploaded) in an overlay LightBox

Options Explained...

adding rel="lightbox" title="Your image Caption" will create a lightbox viewer for the single image.

Demo of a Single Image

Creating an album with light box

If you are making an album out of multiple images, then add rel="lightbox[albumname]" title="Your Image Caption" to each of the images present in that album. Images with the same albumname will constitute a single Light box overlay, and you can traverse through the album using the Next and Previous Buttons. Images in an album can obviously have different captions, but a common albumname. You can make multiple albums in a single post by choosing different album names.

Demo of a Light Box Album

Did you notice that your keyboard arrow keys can be used to navigate through the album? :) I hope this would be very useful for those who own a photography blog.If you have any troubles in implementing this,you can surely contact me via comments or @ Blogger Forums. If you are reading this in a feed reader,the Demos won’t be displayed. To see the demos, visit the actual post page

Source: http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html

Related Posts Widget for Blogger v1

The related posts widget will show a new related posts section below your post.The related posts widget fetches the related posts from those posts having the same label as the current post.

To implement the related posts widget you will have to follow 2 simple replacement steps.

1.Login to your blogger account and get into your Dashboard

2.From there go to Layout > Edit HTML and expand your widget templates(option on the right)

3.Now find this line of code

and replace it with

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><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 .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBeAMGdy2NtpPOMlsvy8zuV53Vbrd_MijteCw2ibVb8zDJA8PAf_QjMPal67d43MBYH6_B80OEFjLCfq3NemPTYTljN-xHSKroEYy7sqrFO9PGaqeuSlWROknit0HGMbniaNb8gSf3OgY/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>

If you want to change the title of your widget you can edit this line of the above code

If you want you can edit the blue and black colors present in this code

4.Now find this line of code

If you cant find it then try finding this one

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts Code Start-->

<!--Remove--><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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

this line determines the number of related posts that are displayed..and by default 6 posts are fetched from each label.

Now you should have a working related posts widget on your blog.If you want to customize the look and feel,then you can alter the CSS rules.OR if you have any doubts or need any modifications,you can surely contact me via comments or at Blogger Forums .The codes are well commented .So this can be easily removed whenever you want..

Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with <!--Remove—>

Update 29/03/2012 : If the script is not working anymore, do change http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js to http://bloggergadgets.googlecode.com/files/related_posts_compressed.js

Sorry for the trouble :-)

Source: http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html

Technorati Rank Widget for Blogger / Blogspot

Technorati is an Internet search engine particularly for searching blogs.Technorati has a ranking system based on the number of references made to the blog.I have now made a widget which will display your technorati rank in a similar way as the feedburner count is displayed.The widget also comes with a Add to Technorati feature which allows your blog readers to favorite your blog at Technorati.Com

You can see a demo of the widget here on my test site.

To get this widget working you will have to get a Technorati API key from here.
Copy out the technorati api key and give the details in the widget installer below..
You should give the following details there..
1)Your Site Url
and
2)Technorati API Key..
If you like my widgets, why not favorite me at technorati using this link :)

I had lost all my technorati ranking and authority when i moved to the new domain..

Note: If you are reading this in a Feed Reader the widget installer wont be displayed.So visit the actual article on the site to install the widget.

Source: http://www.bloggerplugins.org/2008/06/technorati-rank-widget-for-blogger.html

Inline Comments For Blogger / Blogspot

Blogger has now come forward with inline comments like in wordpress.This allows you to show a comment form beneath your blog post just like in wordpress(in fact a little better) inline-comments-for-blogger

To enable the new Comment Form , Go to Settings > Comments and set Comment Form Placement as
Embedded below post and Save the Settings

Save the settings and if everything went right you should get an inline comments form like mine..
If you have a modded template this may not work for you. In that case try these steps.. Go to Template>Edit Html

and find this line in your template code:

Now replace this code with

Sometime you may not get it right even after doing this..If this too doesn't work try the following method Here what we are actually trying to do is that we are finding the Post a comment link which appears after the list of comments and replacing that link with the new comment form..

The normal code which generates the Post a Comment Link looks like this

But this post a comment link would be there at different places in the template.Make sure you find the one which is shown after the list of comments..And now replace this comment link by the new comment form code.. that is

If this too doesn't help or if you get into some errors or if you need some modifications please let me know.. I would be happy to help you..

Source: http://www.bloggerplugins.org/2008/06/inline-comments-for-blogger-blogspot.html

Blogger Widgets

This site,Blogger Widgets mainly deals with widgets for beta blogger.

What is a Blogger Widget?

A blogger widget is some easily installable gadget for your blogger blog.A blogger widget will help you in adding additional features to your blog and also increase the blogs look and feel.

Where can i get Blogger Widgets ?

Blogger has introduced a custom API which lets programmers design new widgets for blogger.You can find a lot of Blogger widgets here on this site.

How to add a Blogger Widget to My Blog ?

Here on this site you will find a lot of one click installers.You just have to click on the One Click installation Widget.Sometimes you will be asked for some details.Just fill them out and then you can choose the title of the widget and also choose which blog you want the widget to be installed(if you have multiple blogs under the same account).Now if every thing went fine the new widget will be installed on your blog and your will be taken to the blogger layout Page.Here you can position the newly installed widget in the appropriate part of your blog page.You can do this by dragging and dropping the widgets to the appropriate position.

Most Popular Widgets

1)Recent Posts Widget- This widget displays the recent posts on your blog as a widget.The widget will show the post title,summary,date and time(you can choose what all to be displayed and how long the summary should be).

Install the Recent Posts Widget on your blog

2)Recent Comments Widget- This widget displays the recent comments that were made on your blog as a widget.You can also customize how the comments should be displayed.

Install the Recent Comments Widget On your Blog

3)Top Commentators Widget - This widget will display the list of the top ten commentators of your blog.The widget will display the name of the commentator as well as provide a link to his blogger profile/website

Install Top Commentators Widget on your blog

4)Blog Translation Widget - This widget provides a widget for translating your blog into other languages.This blogger widget also comes with some good looking flag icons to represent the different languages.

Install Blog Translation Widget on your Blog

5)Technorati Ranks Widget - This widget displays your sites technorati Rank.It also provides an option for your blog readers to favorite your blog at Technorati

Install Technorati Ranks Widget On your Blog

These are the Top 5 One Click Installable Blogger Widgets on this blog.I will try to add more popular widgets to this list as soon as possible.So you may bookmark this page for future reference.In addition to these blogger widgets, you can also use template tweaking methods or template tweaks to improve the look and feel of your blog

Source: http://www.bloggerplugins.org/2008/06/blogger-widgets.html

Embed Google Search Results within your Blogger Blog

You might have noticed the new embedded search results on this site.If you have a fair knowledge of the structure of a blogger template you can easily implement the same..

Before we start take a look at the Adsense TOS

AdSense for search results pages may show only a single ad link unit in addition to the ads Google serves with the search results. No other ads may be displayed on your search results page

This really complicates the procedure..First if all make a blank post in blogger with the title Search Results preferably on some earlier date so that the post wont appear to the readers..

Now that you have made the post note down the url of the post.In my case it is

http://www.bloggerplugins.org/2005/06/search-results.html

Ok now goto the adsense site and make a custom search engine giving options such that the search results will appear on the url of our blank blog post..Get the ad codes for the search box and also for the search results

Our Aim is that we shouldn't display any other ads on this search page.

Note- Backup your template first

Now let us see the basic structure of a normal blogger template(i am concentrating only on the parts that we need so i have assumed all div elements as empty).A normal blogger template will have something like this(off course there would be more content within each of the tags..)

Here we are going to display just the Header-wrapper and the footerwrapper and remove all the content from the content-wrapper

So how will we remove it..We can remove them using conditions..

We use the condition to check if the url is the search result page's url..

Here is what i have used for my search result page.

<b:if cond='data:blog.url != "http://www.bloggerplugins.org/2005/06/search-results.html"'>

The coditions to be done when it is not the search result url

<b:else/>

The Conditions to be done if it is the Search Result Url

</b:if>

We are going to hide the entire content of the content-wrapper if the url is the search result url..We are going to do this using the b:if conditions mentioned above

and the result will be something like this

Now save your template and goto the search results page now and see if any adsense ads are shown there..

Verify it further by ensuring that the url http://pagead2.googlesyndication.com/pagead/show_ads.js is not present in the Firefox's Source view of the page

If you are 100% sure that there are no ads appearing on that page. Then goto your template again and replace The Conditions to be done if it is the Search Result Url(Leave it as such for now) with the search results code from google(You may add proper styling and all) Now save your template again.. and now add the adsense searchbox as a HTML/Javascript widget in your blog(You can choose for other methods too). Now if everything went fine when you search something the search results would be displayed on that Search Results posts page that we made. I know it is a little bit complicated.But if you need help from me just contact me.. I will try to fix it out..Actually we can control what all should be displayed on the search results page... Note:-I have used those comments in the code pictures just to make it more simpler.. You may not find them in your template..If you have added adsense ads in the header or footer you will have to hide them on the search results page using b:if conditions

Source: http://www.bloggerplugins.org/2008/06/embed-google-search-results-within-your.html

Showing the Old Commet Form along with the new Inline Comment Form

Blogger has released the new Inline Comments form.If you haven't implemented it yet implement it at first.Now if you also like to have the old commenting system on your blog you can add the old popup comment window onto your blogs..

For this first get your Blog ID.To get it just goto Layout/Settings/Posting in your blog's dashboard.Now note the url

The marked out portion will be your blog's ID
.Note it down as you will have to use this later in this tutorial

Now find the following piece of code

and Replace it with the following if you need the popup comment form

If you need the comment form to open in the same window then replace with the following

Now you will have to change 707079334502450236 with your blogID and you are done..
You can change the text and other stuff and make it more interesting..

Source: http://www.bloggerplugins.org/2008/06/showing-old-commet-form-along-with-new.html

Blogger Tips And Tricks 2012

Paper Wall Blogger Template

SEO Tips for Blogger - Part 1

Recent Posts with Thumbnails for Blogger

Gadget Settings

Some Previews of the Gadget with different configurations

About the Various Options

Add The Gadget to your Blog

Jquery Image Magnifier For Blogger

How to add Pages to Blogger like in Wordpress

Some Tricks for making links in Blogger Posts

Using Windows Live Writer for Blogger

What is Windows Live Writer?

Features

Numbering your blogger Comments

Steps involved in implementing this trick

Light Box Image Viewer For Blogger

Installation Steps

Adding Images for the Lightbox Viewer

Creating an album with light box

Related Posts Widget For Blogger

Related Posts Widget for Blogger v1

Technorati Rank Widget for Blogger / Blogspot

Inline Comments For Blogger / Blogspot

Blogger Widgets

Embed Google Search Results within your Blogger Blog

Showing the Old Commet Form along with the new Inline Comment Form

Adv

Popular Posts

Featured Posts

Advertising

Category

Blog Archive