Create Table of Contents in Blogger sorted by Date(Archived) or Labels in Blogger

Previously we have already posted the hack on Bloganol about creating Table of contents page in blogger.This is the second post and totally new idea for creating Table of Contents page for your blogger blog which is created by the blog abu-farhan.com.In this post we will talk about creating Table of Content page on Blogger in which the posts title are sorted by Date(archived) or by the Post Labels.


Table of Contents sorted by Date

For creating the table of contents page in your blog by post date or Sorted by Archives Copy the following code and paste it in your blog Post.Click here to see the demo of this Hack.

<script src="http://deineshd.110mb.com/scripts/tocbyarchivemin.js">
</script>
<script src="http://www.bloganol.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>


Table of Contents sorted by Labels

For creating the table of contents page in your blog  Sorted by Labels Copy the following code and paste it in your blog Post.Click here to see the demo of this Hack.
<script style="text/javascript" src="http://deineshd.110mb.com/scripts/blogtoc-min.js"></script>
<script src="http://www.bloganol.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>


In the above code dont forget to replace http://www.bloganol.com with your blog URL before you publish the code.

Now Show Commentators Photo next to Comments with Blogger

After the inline comment below each post in blogger now Blogger has announced one more feature on the occasion of its 10th Birthday.The new feature is showing the commentators photo next to comments in Blogger.It means you don't need to perform any hack to show commentators photo next to comments in Blogger.

To setup this Feature in your Blog goto Blogger Settings Section then goto Comments Section.Now check Yes on Show profile images on comments? and the Save Settings.After this you are done.

You can too Upload the Blogger profile picture when you leave comment too.From the comment preview, click "Add photo" to upload a photo to your Blogger profile.From the next time you comment in any blogger blog your photo will be automatically seen next to comments in blogger.Goodluck!

Create auto Expandable Posts in Blogger with no image thumbnails

Previously we have presented you the blogger hack to create auto expandable posts in blogger with image thumbnails.The hack become very useful and famous to many bloggers.Many bloggers want the same hack with no image thumbnails therefore we have brought this hack of creating auto expandable posts in blogger with no images thumbnails.

This hack is also like the other hacks you have performed before.You just have to replace some block of codes with our provided block of codes and see the hack working.But remember to backup your blogger template before you perform any blogger hack.The hack begins below.

Start with signing into your blogger account.Then goto Layout Tab then Edit Html Sub tab.On the Edit Html Page check Expand Widget Templates.

Now search for <data:post.body/> and replace it with the following block of codes.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'/>
<script type='text/javascript'>
var blogID = &quot;YOURBLOG ID&quot;;
function retriveSummaryPost<data:post.id/>(json){document.getElementById(&quot;summary<data:post.id/>&quot;).innerHTML
= json.entry.summary.$t + &quot;...&quot;}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement(&quot;script&quot;);
script.src = &quot;http://www.blogger.com/feeds/&quot;+blogID+&quot;/posts/summary/&quot;+POSTID+&quot;?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>&quot;;
script.type = &quot;text/javascript&quot;; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>(&quot;<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post_body'><data:post.body/></div>
</b:if>

After you replace the code save your Template.
In the above code you will find YOURBLOG ID.You have to replace this with your blog ID.Its really easy.To learn to find your blog ID read the blogger Totorial here.

Create auto expandable posts (or auto readmore) in blogger with image thumbnails

If we go back to the method of creating auto expandable posts it has really changed a lot.First we have to use <span class="fullpost"> tags in each posts for creating expandable posts.This method was really boring and contains lots of drawbacks.Therefore there should be new easy method for creating expandable posts and then new method is here.

This new method of creating auto readmore helps you to create all of your posts expandable from the first post of your blog.It also shows the thumbnail of the post in the front page.You dont have to use any tags for it.You just have to add some codes to your blog and the work is done.If you want to create these types of expandable posts the follow the simple steps below.

Before you perform any hack remember to backup your template so that you might restore your previous template in future.For this click download full template in your blogger Edit HTML page.

First of all search for the following code in your blog Edit HTML page.

<data:post.body>

Now in the second step replace the above code with the following block of codes.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more>></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Now in the last step paste the following block of code just above </head> in your blog.

<script type='text/javascript'>
summary_noimg = 450;
summary_img =350;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://deineshd.110mb.com/read-more_auto.js' type='text/javascript'/>
 

Now Save your Template to see the result.

Add captions to your Blogger Posts Images

Captions means the short explanation, or description accompanying an illustration or a photograph.Using Captions for images in your blog posts will make you easy to describe that picture.So i have brought you a tutorial that helps you show the captions just below the images in the cool way.

To show the captions to your blog posts images first paste the following code between <head> and </head> Tags in your Template and save your Template.

<style type="text/css">
.caption {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 0px 5px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}

.caption p.caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>

After you Save the Template you have to apply the style for the images in the posts.For that use the code in your blog posts as in the same style as below.

<div class="caption" style="width: 410px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3Hop5cY_1J9h_TsJYUS6LutATNAZ15BPcpD3uVAkoicCrGK67b_Nf7DLLcBDsU0A2ZA5VMfPHXdgJ7CX7CmsMOqFoSnF6IiAJS9w1BNuzu6PpG_4ilJKf7uZUyqN5fbrXFQKSNN3lyA/s400/revolution+lifestyle+Blogger+Template.png"/><p class="caption-text">This is the screenshot of the Great Revolution Lifestyle Blogger Template.
</p></div>

Here I have used width 410px for the image.always use width 10px more than the width of the image.Enjoy

Give style to your Blog Link Titles

NiceTitle is a relatively simple script that creates a div-container that pops up when a link (with the title attribute is hovered. This script shows the title of the link plus the URL links redirect to when the links are hovered.

How to Set Up this Script?

---

Setting up this script is also same like adding other codes in Blogger.You just need to Paste the CSS plus JavaScript code in your blog Code Section.To setup this script in your blog Just follow the simple steps below.

1. Download nicetitle.js and Upload it to your Googlepages account.

2. After that Goto Edit Html Page from your Blogger Dashboard after you Log in to your Blogger Account.

3. After that add the following lines of code just before </head> in your Template.

<script type="text/javascript" src="nicetitle.js"></script>

4. Next step is you should add style to this Script.For that Add the following block of codes just above ]]</b:skin> in your Template.

div.nicetitle {
background-color: #A38531;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
padding: 4px;
position: absolute; top: 0; left: 0;
text-align: left;
width: 25em;
z-index: 20;
}

div.nicetitle p {
margin: 0;
padding: 0 3px;
}

div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
}

After you complete the above steps Save your Template and don't forget to use Title in your Links.If you have any questions then simply tell us about it either by Commenting or Contacting us.

Comment numbering in Blogger

Last day when I was converting a wordpress theme into Blogger I saw the comment numbering in the wordpress theme and I tried to show the Comment numbering in that Blogger Theme.So I searched the hack to show comment numbering and Finally found that hack in randomness.

It was not so hard to show comment numbering in Blogger.It is just like showing commentators photo inside comments in Blogger.So I have brought this hack to you.Just follow the tutorial below.

Goto Blogger Edit Html page , Expand Widget Templates and Search for the Following block of codes.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Now in second step , replace the above block of codes with the following block of codes.

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

Now in last Step you need to style the numbering.For that add the following codes just above ]]></b:skin>: in your Template.

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

/*since the numbers are actually links, we need to force the color properties*/

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

After you complete the above steps,Save the Template and see the comment numbering in your blog.If yu got any problem then let us know about it.

Show Commentators Photo inside comments in Blogger

This is just another and important hack in the Bloggers hacks directory.This hack helps you show the photo of the commentator embedded on the left side of the comment or below the commentator's name.I have also performed this hack in my blog.Now whenever Blogger users comment in my blog with their Blogger Profile then their photo will be obviously shown in the left side of their comment just like below.

Isn't it great?It has got many features like:It attracts more users to Comment on your blog,Makes your blog professional looking and the comments seem easy to manage.It is not so hard to perform this hack in your blog.For that you must follow the following tutorial.

First of all copy the following code and Paste it in your blog Just above </head> tag.

<script src='http://bloganolutilities.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script> 

Now in Second step search for the following Block of code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

After you Find searching the whole block of code,select the Codes and replace it with the following block of codes.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<div class='commentphoto' style='float:left;margin:5px;'/>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

After you replace the code Save your the Template and see the photos of your Commentators.Enjoy.

How to create section to add Gadgets in your header section?

Creating a section in blog header lets you add gadgets in your blog below and above your blog header.It is much more easy to create a section to add gadgets below and above your blog header.Follow the simple tutorials below and know how to create it.

Search for the code with id='header' in the code section of your blog without expanding widget templates.The block of code looks like this.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bloganol Sample Blog (Header)' type='Header'/>
</b:section>
</div>

Now change showaddelement='no' to showaddelement='Yes' and maxwidgets='5' like below.Here maxwidgets='5' means you can add maximum 5 widgets in your header section.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Bloganol Sample Blog (Header)' type='Header'/>
</b:section>
</div>

After you finish this save your Template.Here are the snapshots related to this hack.

Before:

After:

Reactions : A new feature from Blogger draft

Yesterday after a long time I visited blogger in draft blog and came to know the new feature of Blogger.The new feature is that now Blogger is Embedded with their own Reactions widget or hack.

All the blogger users can access this service.To enable Blogger Reactions in your blog log in to http://draft.blogger.com/ and go to your Layouts page. From there, click the “Edit” link for the Blog Posts gadget and then check the “Reactions” checkbox. You can edit the Reactions buttons by clicking "Edit" or clicking the buttons themselves as shown in the Image below.

You can customize the position of reactions within the post by dragging in the arrange items box.You can customize the skin of the Reactions according to your blog Theme.Here are some snapshots of the reactions widget.

Install Syntax Highlighter for better code Viewing in Blogger

Syntax highlighter is a tool developed by Google Code that help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.

Is is simple to install syntax highlighter for your blog.First Download Syntax Highlighter into Your Computer.After that Extract the Files and Upload it to Your Google Pages Account.


Now in second step Login Into Blogger -> Goto Edit Html Page and Paste the following code between <head> and </head> Tags in your Template.

<link href='http://GOOGLEPAGES USERNAME.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushPython.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushVb.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushRuby.js' type='text/javascript'/>

In the above Code Replace GOOGLEPAGES USERNAME with your Googlepages username where you have Uploaded the Files.

In the Third step Paste the following Code just before </body> Tag in your Template.

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>

After you Complete the above steps Save your Template.Now you have to ways to implement Highlighter style in your Blog post Codes.

By Using <pre> and </pre> Tags.

While Creating or Editing your Blog Posts write the codes between <pre> and </pre> with name Code and Style c-sharp as in the following Example.

<pre name="code" class="c-sharp">
The Code Goes Here......
</pre>

Second is by Using Text area.

Use the Text Area as given in the following Example.

<textarea name="code" class="c#" cols="60" rows="10">
... The code Goes here ...
</textarea>

Thats all about this Blogger hack.If you want more blogger hacks then Visit Blogger hack directory Page or If you want free Blogger templates then visit Blogger Templates directory Page.

A blogger hack to show related Posts below Each blogger Posts

In the Lists of Blogger hacks we have added a new and Important Blogger Hack Created by Blogger accessories to show Related Posts below each Post in Blogger blogs.This hack helps to generate internal blog Traffic and more page Views.


There are Altogether three methods for showing Related posts below each post in Blogger.Among them I am going to do is Method no 3 which is the easiest and More reliable.To Learn to show related posts in Blogger Follow the simple Steps below.

Before you start any Blogger Hack Please Backup your Blogger Template

First of all Goto Blogger Edit Html Page,Expand Widget Templates and Paste the Following Code just above </head> in your blogger Template.

<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 {
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://i263.photobucket.com/albums/ii150/mohamedrias/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 type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Now in second Step Search for <p><data:post.body/></p> and Replace it with the Following Code.

<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>

After you Complete the above steps Save your blogger Template and see the hack working.

A blogger hack for Creating numbered Page navigation in Blogger

Till now we have served you lots of Blogger Hacks.But this is the Greatest Blogger hack created by Blogger Accessories and modified by Bloggerbuster I have Ever served.You Might have observed this hack in Wordpress blogs.There are altogether two methods for creating Page navigation in blogger and They are:

• Customizing the template code
• Adding as an HTML/JavaScript widget (gadget) below the main posts section

This hack is slightly modified by Bloggerbuster for the easiness of the users which you can find at Numbered Page Navigation for Blogger.Not Only this You can experience more Blogger hacks in this Blogger hacks directory Page.

Show Technorati blog Reactions link below each posts

Many people know Technorati Link Count Widget as Technorati view Blog Reactions Link,whatever It is same.When some people Links on your post Technorati tracks the Links and makes it possible to display the links with the help of this Widget.



In another sense it is also a blogger hack that helps you display the number of reactions of Links associated that that post.In the Original Technorati Code you can provide only one Link and it shows the reactions only for that Link otherwise you should have to paste the code in each and every post.

To put Link Count Widget on your blog Goto blogger Edit Html Page and Expand Template Widget.This Link seems Good when it is placed with comments count Link.For that search for <span class='post-labels'> .............</span> and Paste the following Just after that Code.

| <script src='http://embed.technorati.com/linkcount' type='text/javascript'/>
<a class='tr-linkcount' expr:href='&quot;http://technorati.com/search/&quot; + data:post.url ' id='technauthority' style='background: url(http://static.technorati.com/static/css/img/icn/talkbubble.png) no-repeat; background-position:right; padding-right:20px;' target='_blank'>View blog reactions</a>

Here data:post.url Explains the Link of the Individual post.

Once you set up this Code in your blog the code will automatically detect the number of Reactions for that post and automatically shows the number of Reactions..

Show Top Entrecard Droppers in Blogger

Showing Entrecard Top Droppers is also just like showing Recent Entrecard Droppers in your blog.To show Top Entrecard Droppers in your blog Follow the Simple Steps that Follows Below.

Step 1
Sign in into your Entrecard Account.

Step 2
After that Goto statistics Page.

Step 3
Copy Feed Location from small Feed Logo at Statistics Page.

Step 4
After that Add a new Page Element in blogger Then Click Feed.

Step 5
Paste Your Feed Address there and Click continue.

Step 6
Here you will see the Top Droppers List.Change the Title and Click Save.

After you complete the above steps Preview your blog and You will see the Top Entrecard droppers most in the last 30 days.

Show Entrecard Recent Droppers

Showing Entrecard recent Droppers is also like showing Recent Posts and Recent Comments in your blog or is More easier than that.learn how to show recent Entrecard droppers in your blog.

Step 1:Sign in into your Entrecard Account.
Step 2:Right Click the RSS icon at Top Right then Click " Copy Link location".

Step 3:Sign in into Blogger
Step 4:Goto Blogger layout Section.
Step 5:Click on Add a new Gadget.After that a pop-up window will appear and Then Click Feed.
Step 6:Now Paste your Feed URl obtained from Step 2 there.
Step 7:Now change the Feed Title if you like and then Click Save.

A simple hack to increase your Feedburner 's Feedcount

Everyone has a will to see more digits in their Feedburner's Feedcount Widget.If you are among them then this hack surely works on you.If you like to increase your Feedburner's Feedcount Hundred times more within a day then watch this video delivered by thenextweb.com.

Add share on Facebook Link and buttons on your blog

Add Share on Facebook Link or button on your blog to make it easier for the content to be shared on Facebook.Copy and Paste the following block of codes into your blog.

Share on Facebook

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>

Share on Facebook

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top left; }</style><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>

Share

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top right; text-decoration:none; } </style> <a href="http://www.facebook.com/share.php?u=<url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>

Hide Posts count in Labels Widget

It is very easy to hide posts count in your labels widget.First of all sign in to blogger.After that goto Layout and then Edit HTML page.Now Expand Widget Templates by Checking on "Expand Widget Templates" and Find the following code.

<span dir="ltr">(<data:label.count>)</data:label.count></span>

All you have to do now is delete that code.Mission Accomplished!

Sidebar with rectangular Border and Round Header

Hey friends I have brought a cool sidebar hack which makes your blogs sidebar looks like Woork and Bloggerbuster Sidebar.

First of all Goto Blogger's Edit Html Page (Sign in->Dashboard->Layout->Edit HTML).After that Paste the Following code Between <head> and </head> Tags in that Page.If you find the Code with .sidebar h2 { then replace that whole code .

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

This code is for the Original Minima with Sidebar 220px which gives style to Sidebar Title.The Image used is of 220X10 size. If you have got Sidebar more than this then Make a picture Like this or Edit This to the width equal to your Sidebar.Then Upload that Image to Image host like Photobucket,Imageshack and replace the above Image Url with that Uploaded Image Url.

Now the second and the Last Step.Paste the following code with the above code in your Template.

.sidebar .widget-content {
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
}
.sidebar .widget {
margin: 0 0 20px 0;
padding: 0;
}

This code gives style to Sidebar Content.After you complete this tep Save your Template and see the result.If you like this post then please link love us .This helps us to do more good works in future.