Eblogger Tricks.com

Attractive Vertical CCS Menu With Rounded Corners for Blogger

2012-02-14T03:08:00.001+01:00

Last week I showed you how you can add attractive horizontal CSS menu to your Blogger blog. It is meant to fit into the header or between header and post. If this does not suit the layout of your template you might want to add a vertical CSS Menu in the sidebar instead. In this post I am going to show you how you can do just that.

How to add an attractive CSS Menu with rounded corners to your Blogger blog

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag.

Note: You can change width, colors,... to your needs.

4. Save your template.

5. Now go to Design --> Page Elements and click on "Add a gadget".

6. Select "HTML/JavaScript", then add the code given below.

<li><a href="#"><b><b>JavaScript</b></b></a></li>

<li><a href="#"><b><b>Advertise</b></b></a></li>

<li><a href="#"><b><b>About</b></b></a></li>

<li><a href="#"><b><b>Contact</b></b></a></li>

</ul>

7. Save.

That’s all!

Good luck!

Attractive Horizontal CSS Menu for Blogger Blogs

2012-02-07T02:23:00.001+01:00

If your template (custom or otherwise) does not already have one, you might want to add a cool horizontal menu to your Blogger blog so that visitors can navigate the content more easily. Not long ago, I happened across an attactive horizontal CSS menu which I would like to make available to you in this post. To add it to your Blogger blog follow the steps below.

Here is a Demo.

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag.

IMPORTANT: Please host mainbg.jpg

and navi-bg.jpg

images yourself.

4. Save your template.

5. Now go to Design --> Page Elements and click on "Add a gadget".

6. Select "HTML/JavaScript", then add the code given below.

<ul id="nav">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">PHP</a></li>
<li><a href="#" title="#">MySQL</a></li>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
<div class="clear"></div>

7. Save.

That’s all!

Good luck!

Blogger Hack: How to Add Post Titles to Read More Links

2012-01-31T01:19:00.001+01:00

In this post I am going to show you a neat little hack that lets you add post titles to read more links on your Blogger blog.

Blogger's Jump-Link (Read More) feature enables you to display summaries of your blog posts on the home page as well as all non-item pages.

You can configure the text displayed for the Jump Link (which links to the item page of the post) by editing the Blog Posts gadget in Design -->Page Elements. However, I have found it useful to add the full title of the post beside the corresponding Jump Link text to make it absolutely clear which post it links to.

How to add post titles to read more links in Blogger

This is a very easy customization. The modified Jump Link will inherit any style you have currently applied to this section. It takes just three simple steps to add this feature to your Blogger blog.

1. Sign in to Blogger, then go to Design --> Edit HTML and check the ‚Expand widget templates’ box.

2. Search for (Ctrl + F) the following section of code:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

3. Replace it with the following code:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>

        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/> <data:post.title /></a>

</div>
</b:if>

Preview the change you have just made. If all is working well, you should now see the title of your post displayed beside the text you have chosen for your Jump Link. You can then Save your template and enjoy this quick and useful tweak to your Blogger template.

That’s all!

Good luck!

Numbered Page Navigation for Blogger

2012-01-24T01:49:00.001+01:00

In this post I am going to show you how to add a simple andelegant numbered page navigation widget to your Blogger blog.

What is Numbered Page Navigation ?

In Blogger, by default, you see Older Posts and Newer Posts links near the bottom of the page which is a useful, but very basic way to let your blog visitors navigate to other posts on your blog. But, there is one tiny problem… people tnd not to notice those Newer and Older Posts links, which means less pageviews to your blog.

If you want to increase your blog pageviews you can use this cool looking, advanced numbered page navigation widget.

How to add a cool numbered page navigation widget to your Blogger blog

1. Sign into your Blogger account, then go to Settings --> Formatting. Choose the number of posts you want to display on your homepage.

2. Go to Design --> Edit HTML, then check the box next to ‘Expand widget templates’.

3. Search for (Ctrl + F)

</body>

4. Copy and paste the following code directly above that line:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script type='text/javascript'>
//<![CDATA[

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

//]]>
</script>
</b:if>
</b:if>

In the above code, edit the part highlighted in red according to Step 1. It determines the number of posts to be displayed on each page. (Make sure that the number you set is same like the one in Step 1.)

5. Search for (Ctrl + F) all the occurrences of the following code:

'data:label.url'

and replace that line with

'data:label.url + "?&max-results=5"'

Once again, the number in the above line depends on the number you set in the STEP 1.

6. Now it ist time for the styling part.

(a) Default

7. Find the following line:

]]></b:skin>

8. Copy the code below and paste it immediately above said line.

.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
border-top: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

9. Save the changes.

That’s all!

Good luck!

P.S.: Look for more navigation styles in the near future.

How to Add Custom Fonts to Blogger and Use Them for Titles and Posts

2012-01-17T01:51:00.001+01:00

In this post I am going to show you how you can add various custom fonts to your Blogger blog. They can be used for post titles as well as posts. Adding custom fonts to blogger with the use of cufon has been possible for quite a while, but that method is rather complicated and difficult and increases the loading time of your Blogger blog.

How to add custom fonts to Blogger and use them for titles and posts

Now i am going to show you an easy way to add custom fonts to your Blogger blog. Special bonus: it doesn't affect the loading time of your blog at all. You will be able to add two API custom fonts. Both offer very useful fonts, so choose the one that better fits the overall style of your blog.

1. Google API (For now, the easiest and best method to add fonts, but the font styles are rather limited. More will be added by Google in the near future.)

2. Kernest API (A very good collection of fonts. Quite useful.)

I. How to install custom fonts from Google API

1. Go to Google API. You will see fonts written like below.

2. Just hover your mouse over the font you like and you will see a link that says „click to embed font name“. Just click the link or font you want to use.

3. Now you will be shown the Get the code button and a demo of how your font looks in different sizes.

4. Click the Get the code button and you will be given the code.

The code will look something like this:

5. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

6. Search for (CTRL + F) the </head> tag.

7. Now just paste the code(s) you copied from Google API immediately before the </head> tag. Congratulation! You placed the font codes succesfully.

8. Now you need to define in your css which titles or post body should show the custom font(s). To do this, you need to know a few css codes of your template, especially which css property defines your particular font style.

If you want to use the custom font for your header title, you need to know in which css part of your template the font-family for your header has been defined. Because most bloggers are using custom templates, the css for each of you is different. Therefore it is difficult for me to tell exactly where you will find the css for the header title and where the one for sidebar titles. I am just going to tell you the basic css style you need to add in your template considering the default codes the Blogger templates use.

#header h1 {font-family:FontName;} */ This css style for Header Title /*

.description {font-family:FontName;} */ This css style for Header description /*

.sidebar h2 {font-family:FontName;} */ This css style for Sidebar Title /*

.post h3 {font-family:FontName;} */ This css style for post Title /*

.post {font-family:FontName;} */ This css style for post body /*

#footer h2 {font-family:FontName;} */ This css style for footer Title /*

body {font-family:FontName;} */ This css style for whole template /*

Please don’t forget to exchange the FontName with the name of the your custom font that you added to your template.

The important things are:
a. Where in your template you want to use the custom font.
b. Finding the css property defining that part of your template.
c. After finding it, defining the font-family in its css like I have shown above.

That’s all!

If you want to use multiple fonts or want to style them in bold or italic, please visit this page. Just you have to make small changes to the codes you get.

II. How to install custom fonts from Kernestl API

1. Go to Kernest.com.

2. You will see a page like the one below. You will find an option to search for fonts. You can search them by writing the name of the font and hitting enter or by browsing them with tags like popular fonts or latest fonts or by designer.

3. After selecting the font you like, you will see a domain embed url. Just click it.

4. Now a pop-up window will open. Just type your blog URLand hit add.

5. Below the font you will find the code you need to place in Blogger. Just copy those codes to your notepad. The code look like this:

6. You just need to take the code in red and place it before the </head> tag as you did with the Google API fonts.

7. Once again you need to define the font style css. Itis the same process I described told above for Google API Fonts (please look up I. step 8).

That’s all!

Good luck!

How to Add Sexy Social Bookmarks v2 to Your Blogger Blog

2012-01-10T01:18:00.001+01:00

In this post I am going to show you how you can add the newest version of Sexy Social Bookmarks to your Blogger blog. The creator of the great-looking Sexy Social Bookmarks is http://www.cssreflex.com/. For this second version of Sexy Social Bookmarks you will have to use JQuery. I recommend hosting the two images that are necessary for Sexy Bookmarks in Google Code or another other hosting service (I use Photobucket). Don't try to host these images in Blogger. If you do so, this sexy bookmarks widget will not work correctly.

How to add Sexy Social Bookmarks v2 to your Blogger blog

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Check the "Expand Widget Templates" box.

3. Search for (Ctrl + F) the </head> tag.

4. Add (copy + paste) the following code before </head> tag.

Note: Please host the images yourself. You can download them here or here. (You have to change the image URL where it says background-image: url).

5. Now search for the <data:post.body/> tag.

6. Copy the following code and paste it immediately after <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
</b:if>

7. Save your template.

That’s all!

Good luck!

How to Add a JQuery Featured Content Slider to Your Blogger Blog

2012-01-03T01:41:00.001+01:00

In this short tutorial I am going to show you how you can add a great JQquery-based featured content slider to your Blogger blog (or any other website). By following the instructions given below, you can add this featured content slider to your blog in a matter of minutes. Please remember to use images with 307px width and 254px height for this slider. I recommend DOWNLOADING the JavaScript files and hosting them yourself. You can see a demo of this slider here.

How to add a JQuery featured content slider to your Blogger blog

1. Login to Blogger, the go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag.

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4. Save your template.

5. Go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and insert the code given below:

NOTE: Replace SLIDE-X-LINK-HERE with your real featured posts links and SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the following example:

8. Save.

That’s all!

Good luck!

How to Display Most Recent Twitter Tweets Using JQuery

2011-12-27T01:25:00.001+01:00

Are you looking for an easy way to display your recent Twitter tweets inside your website or Blogger blog? Then ypu’ve come to the right place. In this short post I am going to show you how you can add recent tweets to your website with the use of JQuery. One of the advantages of this method is that your recent tweets will load fast. Another plus is that it is very easy change the number of tweets that will be displayed on your blog or website. Advanced details about this method can be found at: http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

How to display most recent Twitter tweets using JQuery

Please follow these steps to add this recent tweets widget to your Blogger blog.

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag.

NOTE: Replace ebloggertricks with your twitter username.

5: Number of tweets must appear.

4. Save your template.

5. Now go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and add the following code:

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/ebloggertricks">Follow me on twitter</a></li></ul>
</div>

8. Save.

That’s all!

Good luck!

How to Hide Deleted Comments in Blogger

2011-12-20T00:10:00.001+01:00

When you simply delete a comment on your Blogger blog you will see an message along the lines of „This post has been removed by the author“. This messages give your blogger blog a rather ugly appearance. But with the little trick I am going to show you in this post you can hide deleted comments easily. If you would like to hide all deleted comments on your Blogger blog, then simply follow the steps below.

How to hide deleted comments in Blogger

1. Sign in to Blogger, then go to Dashboard --> Layout --> Edit HTML.

2. Click on "Expand Widget Templates".

3. Search for (Ctrl + F) for the following line of code:

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

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'><img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'><data:comment.authorAvatarImage/></b:if>
<data:comment.author/>
<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='data:comment.url' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd>
</b:loop>

4. Copy the code below and paste it immediately after <b:loop values='data:post.comments' var='comment'>.

<b:if cond='data:comment.isDeleted'>

<b:else/>

5. Copy the following code and paste it just before </b:loop>.

</b:if>

6. Save your template.

That’s all!

Good luck!

How to Add Flickr Photostream to Your Blogger Blog

2011-12-19T23:40:00.001+01:00

In this post I am going to show you how you can add a Flickr photostream to your Blogger blog. If you would like to add this cool widget to your Blogger blog please follow the steps given below.

1. Login to your Flickr account.

2. Click on "Your Photostream".

3. Now you are on your Flickr Photostream page.

4. Look at the address in the address bar of your browser. It will look something like this:

5. You can see your Flickr ID. It will be something like this:

38647261@N03

6. Copy your Flickr ID.

7. Sign in to Blogger. Go to Dashboard --> Layout --> Page Elements.

8. Click on 'Add a Gadget'.

9. Select 'HTML/JavaScript' and add the following code:

Note: Replace YOUR-FLICKR-ID with your Flickr ID.

10. Save.

That’s all!

Good luck!

How to Add Random Rotating Images to the Header of Your Blogger Blog

2011-12-13T00:32:00.001+01:00

In this short tutorial I am going to show you how to add random rotating images to your Blogger blog’s header background. After adding this neat feature to your blogger blog, the header image of your blog will rotate/change with each page refresh. Before implementing this tweak, you need to create (or find) header images that suit the topic of your blog. In this tutorial I am going to show how to rotate 5 header images.

How to add random rotating images to the header of your Blogger blog

1. Log in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Find (Ctrl + F) the <body> tag.

3. Copy the following code and paste it immediately below the <body> tag.

Important note: Replace "URL-OF-HEADER-IMAGE-X" with the URLs of your images.

If the above code doesn't work for your blog, then replace "#header-wrapper" with "#header". (ID or Class of your header section).

You can add any number of images, it doesn’t have to be 5. But remember to change "4*Math.random()" according to the number of images you want to add. For example, if you want to add 8 different images to your blog header background, the code should be changed to "7*Math.random()". Look at the following example:

4. Save your template. Refresh your site few times to see the result. Your header image will be rotate.

That’s all!

Good luck!

How to Add an Attactive Subscribe Section with Search Box to Your Blogger Blog

2011-12-05T23:47:00.001+01:00

In this post I am going to show you how you can add a more attractive Subscribe Section + Search Box to your Blogger blog. This neat subscribe section includes Feedburner feed and Email subscriptions boxes, Twitter and Facebook boxes for your respective profiles and some major Social networking buttons (Digg,Twitter, Facebook, StumbleUpon, Delicious) to share your posts on social networks. These social network buttons are powered by Assthis.com. A Search box can be found above the Subscribe section. You should not change anything in the search box code. To be able to add this widget to the sidebar of your Blogger blog without doing any modification, the sidebar must be at least 305 px wide. Adding this Subscribe Section + Search Box, which is very easy to configure, to your blog will only take a few seconds. If you would like to add this widget to your blog or a website,then follow the steps given below.

How to add an attactive Subscribe Section with Search Box to your Blogger blog

1. Login to Blogger. Then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag:

4. Save your template.

5. Now go to Design --> Page Elements and click on "Add a gadget".

6. Select "HTML/JavaScript" and add the code given below, then click save.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvwDojM1I/AAAAAAAADgU/tBRpYkXIVho/rss.png" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TKgvv1xjnUI/AAAAAAAADgE/XnHFsRwk1Js/email.png" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvvhhVo_I/AAAAAAAADf8/IE38PfZs7sE/twitter.png" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvv-pobaI/AAAAAAAADgM/1wAlSk8_1yY/facebook.png" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.ebloggertricks.com/" target="_blank">Eblogger Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9fsSTv4I/AAAAAAAAB90/lJxosSNM6jE/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9MH_zqNI/AAAAAAAAB9E/PahHr5GN6dI/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9NTh41aI/AAAAAAAAB9U/2RkBR3wbLBY/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9M5a4BZI/AAAAAAAAB9M/xoWTjnPVepc/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9e_Kpo-I/AAAAAAAAB9s/1WqjOIz3B_A/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9eJ5RTWI/AAAAAAAAB9c/tYvdT6xgaLw/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9egD8XSI/AAAAAAAAB9k/rZY5eofO2SY/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Important: Don’t forget to replace

FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.

That’s all!

Good luck!

How to Create a Google Plus Page for Your Blogger Blog

2011-11-29T00:16:00.001+01:00

Not long ago, Google introduced Google+. This new service is similar to other social networks and makes it easier for businesses, site managers and bloggers to connect with the customers and readers, and that’s the reason why you should think about getting a Google+ page for your Blogger blog. Not only can your readers/visitors recommend your blog and your posts with a +1 or add you to a circle to follow you long-term. They can actually spend time with you (and your team), face-to-face-to-face.

How to Create a Google Plus Page for Your Blogger Blog

1. Go to Google Plus and create a page.

2. Now select the "Product or Band" category and Add your info.

3. After adding the info click on "Create".

4. Now you can customize the public profile of your page. Add "Tagline" and "Profile Photo". Then Click on "Continue".

5. Now you can tell your circles about your new page if you want.

6. Click on the "Finish" button.

7. The next window will look this. Congratulations, you have successfully created a Google plus page for your Blogger blog/website.

8. Click on the name of your page if you want to edit your profile. Finally, your Google plus page will look like this:

That’s all!

Good luck!

How to Add a Google Docs Contact Form to Your Blogger Blog

2011-11-21T23:16:00.001+01:00

A lot of people have jumped on the WordPress or the Tumblr train, but there are still quite a number of people holding out on Blogger. Google is keeping up with the Joneses with its new Blogger in Draft interface, and the blogging service still provides a cheaper alternative for total customization and original domain names for personal (and even professional) blogs.

As a Blogger user, you may have occasionally wondered, “How can I make one of those cool contact forms that all the other blogs in the world seem to have?” Fortunately, if you also happen to use Google Docs, this can be achieved with relative ease.

1. Creating the Form

Log in to Google Docs and create a new form as shown in the first picture below. You can choose a title for your form to keep yourself organized, but you could also leave this section of your form as “Untitled” and it wouldn’t make any difference. In order to make it a truly legitimate contact page, you should provide users with the “paragraph text” question type. This allows enough room for lengthy questions or comments.

Note: The default form automatically inserts two sample questions. Make sure to delete the second sample, or else you will have a phantom inquiry that you don’t really need. However, if you want to add more questions using different answer formats (checkboxes, multiple choice,...), you are free to do so. You can even make the answers required for items such as contact details. After you are done, make sure to save it.

2. Ripping the Form

You may already know that Google forms tend to stick to non-customizable templates that often don’t mesh at all with your blog’s design. Sure, there’s the option to embed the form using an iFrame code, but it still retains the same format as the pre-designed cookie-cutter templates. Luckily, there is a way around that.

After completing your form, go back to your Docs homepage and open up the spreadsheet of the form you have just created. By the way, this spreadsheet will allow you to see all the submissions to your form. When you get to this page, select “Form” on the menu bar and then click “Go to live form“.

When looking at your form page, you should use whatever feature your browser allows for looking at the source code of the page. Since I am using Chrome on my Mac for this tutorial, I merely used my trackpad to open the contextual menu and selected “View Page Source“. (If you are using Firefox, you might want to get the Firebug add-on.)

Right now, things might get a bit tedious, so pay close attention. You should use the Find function of your browser (CTRL + F) to locate the term “form action“. When you find it, you should see the following code:

Remember where this line of code is, and then find this next bit of code:

</script></div>

Copy everything from the first mentioned line of code down to the next mentioned line of code. If you would feel more comfortable pasting this code in a text app, then do it. You will be using it shortly.

3. Installing the Form

After copying the selected code to your clipboard, you should sign in to your Blogger dashboard. For this tutorial, I am using the Blogger in Draft interface, but if you are using the original user interface, you will still be able to follow along.

First, you should create a new page for your blog and entitle it “Contact Me” or something similar. After opening it, go directly to the HTML editing section of the page and paste the code from above.

Now you have basically completed the task of installing the form on your Blogger blog. At this point, your preview should look similar to the image below. Note that previews are going to be different for different people based on the machine they are using.

4. Customizing the Form

Sometimes there will arise problems such as there being too much space between the page title and the form itself or the answer box being too wide for the width of the blog. These minor problems can be easily fixed.

If you are having issues with there being too much space between the title and the questions, search for any br tags and delete them. However, if you are having issues with the width of the answer box, search for the following line of code:

By simply adjusting the “cols” value to a lesser number, you can change the width of the blog to suit smaller screens or alternate browsers. Furthermore, you can actually change the fonts of the questions while editing the page. With enough customization, you can end up with something like the following image.

In this post I have shown you a quick and efficient way to place a style-matching Google Docs form on your Blogger blog, and the tutorial could easily be adapted for any other blog or website. You can do a lot more than what you see here, so make sure you play around with your document and the customization for a little while.

Good luck!

How to Add a Lightbox Style Contact Form to Your Blogger Blog

2011-11-15T00:48:00.001+01:00

While doing a little reasearch on customization methods for Blogger blogs, one thing that really impressed me was how easy it is to add a Lightbox-style contact form to blogs and websites using ThickBox:

Using Thickbox to display a contact form in this way enables your readers to email you without having to leave the page. This functionality can be added in a simple HTML gadget, and there is no need to edit the HTML of your template at all.

In this post, I am going explain how to add a lightbox-style contact form to your Blogger blog using Thickbox and a free Kontactr account.

How to create a contact form with Kontactr

Currently, Blogger does not offer the option to integrate a contact form natively in your blog(s). Since you cannot (easily) use PHP in your Blogger template, the easiest solution is to use an external service to generate a good-looking contact form.

My preferred service for simple contact forms is Kontactr - I've been using this service for a couple of years now, and have found it to be both reliable and easy to implement.

1. Head over to Kontactr and create a free account. It takes only a few minutes to register and set up your very own contact form which you will be using to appear in your lightbox-style display:

2. Once you've created your account and contact form, you will be presented with a page like this:

Write down the URL for your contact form – you will need to add it to our HTML gadget shortly.

How to add a „Contact Me“ gadget to your Blogger blog

You will be using Thickbox to generate the functionality for your neat lightbox-style contact form. Unlike the original Lightbox script, Thickbox enables you to embed rich content in your display. You will be embedding your contact form within an iframe using this functionality.

1. Sign in to Blogger. Go to Dashboard --> Design --> Page Elements, then choose to add a new HTML/JavaScript gadget in the area you would like your "Contact Me" link to appear.

2. Copy and paste the following code into your HTML gadget, replacing "URL-OF-YOUR-KONTACTR-FORM" with the URL of your own contact form, and "Send me an Email" with the text you would like to display:

3. Beneath the code you've just inserted, paste the following section of CSS code:

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {   font: 12px Arial, Helvetica, sans-serif;   color: #333333;
}
#TB_secondLine {   font: 10px Arial, Helvetica, sans-serif;   color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {   position: fixed;   z-index:100;   top: 0px;   left: 0px;   height:100%;   width:100%;
}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {   background-color:#000;   filter:alpha(opacity=75);   -moz-opacity: 0.75;   opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */      position: absolute;      height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {   position: fixed;   background: #ffffff;   z-index: 102;   color:#000000;   display:none;   border: 4px solid #525252;   text-align:left;   top:50%;   left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {   display:block;   margin: 15px 0 0 15px;   border-right: 1px solid #ccc;   border-bottom: 1px solid #ccc;   border-top: 1px solid #666;   border-left: 1px solid #666;
}
#TB_caption{   height:25px;   padding:7px 30px 10px 25px;   float:left;
}
#TB_closeWindow{   height:25px;   padding:11px 25px 10px 0;   float:right;
}
#TB_closeAjaxWindow{   padding:7px 10px 5px 0;   margin-bottom:1px;   text-align:right;   float:right;
}
#TB_ajaxWindowTitle{   float:left;   padding:7px 0 5px 10px;   margin-bottom:1px;
}
#TB_title{   background-color:#e8e8e8;   height:27px;
}
#TB_ajaxContent{   clear:both;   padding:2px 15px 15px 15px;   overflow:auto;   text-align:left;   line-height:1.4em;
}
#TB_ajaxContent.TB_modal{   padding:15px;
}
#TB_ajaxContent p{   padding:5px 0px 5px 0px;
}
#TB_load{   position: fixed;   display:none;   height:13px;   width:208px;   z-index:103;   top: 50%;   left: 50%;   margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{   z-index:99;   position:fixed;   top: 0;   left: 0;   background-color:#fff;   border:none;   filter:alpha(opacity=0);   -moz-opacity: 0;   opacity: 0;   height:100%;   width:100%;
}
* html #TB_HideSelect { /* ie6 hack */      position: absolute;      height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{   clear:both;   border:none;   margin-bottom:-1px;   margin-top:1px;   _margin-bottom:1px;
}

4. Save your gadget and preview your blog. You should now see a simple text link in your layout which, when clicked, brings up a lightbox-style contact form in which your Kontactr email form is embedded!

Advanced methods

To demonstrate this method, I decided to use Kontactr for embedding a simple free contact form.

However, you can use this exact same method to display an alternative contact form (or indeed any other webpage) on your Blogger blog. Simply replace URL-OF-YOUR-KONTACTR-FORM with the URL of the page you would like to display. This technique canalso be used to display large images by using the URL of a hosted image.

The scripts required to operate the Thickbox function are reliably hosted on Google Code (thanks Bloggerbuster). If you prefer to host these scripts yourself, you can download the scripts the official ThickBox page.

Good luck!

Post Summaries with Thumbnails for Blogger Blogs - No JavaScript Required!!

2011-11-07T22:57:00.001+01:00

The ability to display post summaries and automatic thumbnails is one of the most sought-after customizations for Blogger blogs. Using such a feature enables you to create good-looking a cohesive layout on non-item pages, while the entire posts and full-sized images are shown on item pages.

Recent changes to Blogger's functionality make it possible to achieve this using only Blogger code - no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts!

With only a few small changes to the template of your Blogger blog, you can display post summaries and thumbnails on the home page or in the sidebar using this easy to manage hack.

How to add Blogger post summaries and thumbnails to your Blogger blog in three simple steps

Here is the step-by-step guide to the easiest solution for adding post summaries and thumbnails to your Blogger blog:

1. Back up your template!

It is important to create a back up of your Blogger template before making any edits. This ensures you can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design -–> Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

2. Add the code to display summaries and thumbnails on non-item pages

The next step is to add the Blogger code which will display a summary and thumbnail of our posts. Go to Design -–> Edit HTML and check the „Expand widget templates“ box. Then search (CTrl + F) for the following line of code:

<data:post.body />

Replace said line with the following code:

<b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Preview the change to your template and you'll see that your posts will appear in a format similar to this:

As seen in the screenshot above, the thumbnail appears above the summary. You can align the thumbnail more cohesively to the left or right of the summary by adding CSS to your template.

At this point, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your blog.

3. Add CSS to align the thumbnail image

While still on the Design -–> Edit HTML section of your dashboard, search for (Ctrl + F) the following line:

</b:skin>

Directly above this line, paste the following CSS statement:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text. It will look like this:

If you would prefer to align your thumbnail image to the right, exchange float: left; with float: right;

Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated summaries and thumbnails!

How this customization displays summaries and thumbnails

While simple to add to our Blogger template in order for the function to work, there is a lot of complex conditional code in use to ensure the summaries display as they should.

First, the code checks if the page being viewed is an item page or not. If the page is not an item page, the summary/thumbnail code will come into effect.

The second check finds out if a post snippet is available (meaning: if the post contains some text). If there is a snippet, the code checks if a thumbnail is available; if it is, it displays the thumbnail followed by the snippet. Where no thumbnail is available (the post does not contain an image), only the snippet is displayed.

If there is no snippet available for a particular post, the complete body of text is displayed normally. This ensures that posts with no content or which feature only an image are displayed normally; no thumbnail is displayed, and any images are displayed at full size.

Finally, the code checks if the post contains the  tag. If it does not contain this specific tag, a "Read more" link will be displayed beneath the snippet, thereby ensuring that visitors can easily click through to read the post page. Where a jump-link is present, this is displayed as normal after the snippet.

Note: The code presented above is best suited for blogs with a newspaper/magazine-style layout and ones with a narrow design. Altenatively, you can use it to display the summaries and thumbnails in a widget.

P.S.: If your blog is using stand alone pages then this code may create problems. STAND ALONE PAGES MAY NOT BE SEEN AFTER INSTALLING IT!!

That’s all!

Good luck!

How to Add a Custom Favicon to Blogger Without Editing HTML

2011-10-31T23:34:00.001+01:00

Now all Blogger in Draft users can add a custom favicon to their blogs via the Design | Page Elements tab by clicking Edit on the new "Favicon" setting right above the navbar element.

For many bloggers, having a custom favicon (the tiny image displayed in your browser’s window or tab) is the finishing touch that ties together the design and identity of a great looking blog. Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog.

Blogger in Draft

How to add a custom favicon to your Blogger blog without editing HTML

1. Login to your Blogger in Draft account. Then go to Design --> Page Elements.

2. Now click on "Edit" on the "Favicon" setting above the navbar element.

A new window will open where you can select an image from your hard drive to replace the default favicon image.

Important note: This initial launch only supports .ico files, but you can easily convert your JPEG, PNG, or any other non-.ico image file using your own image software. There are also many conversion tools available online, and a quick Google Search will bring up a handful of options such as http://www.icoconverter.com/.

3. After uploading your chosen image, click on save.

Now you can see your new favicon instead of the Blogger default one.

Refresh your site a few times and you can see your new favicon in the window ort ab of your browser.

That’s all!

Good luck!

How to Embed the Yahoo Media Player Into Your Blogger Blog

2011-10-24T22:54:00.001+02:00

The Yahoo Media Player is one of the most convenient solutions if you want to play audio files from your website or blog. It is very easy to embed into your site and will only display when you click on the name of the audio file. The Yahoo Media Player needs very little time to load and visitors can play all audio files of your website/blog using the playlist function.

Here is a short overview of the main features of the Yahoo Media Player:

Adds audio to your site with one line of HTML
Uses simple, easy-to-hack HTML instead of complicated proprietary markup, ushering in the REAL Media Web
Magical floating design never gets lost, is available when you need it, gets out of your way when you don't need it
Automatically finds all audio links on your page, turning your page into a playlist
Plays all your blog entries with a single button click
Allows you to put the play buttons where they belong: IN CONTEXT
Keeps the user in the page rather than sending them away to a media player
Picks up your images and adds them as cover art
Requires no download, install or maintenance

How to embed the Yahoo Media Player into your Blogger blog

Follow these simple steps to embed the Yahoo Media Player into your Blogger blog:

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag .

3. Copy the following code and paste it just before the </head> tag.

4. Save your template.

5. Now go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and add the code given below (By the way, you can also add this code into Edit Html section of your Post Editor.):

Important note:

Replace "DIRECT_URL_OF_YOUR_MP3-FILE" with your .mp3 file direct url.
Replace "Name_Of_the_Mp3_File" with any name you like.

Look at the following example:

<a href="http://mediaplayer.yahoo.com/example1.mp3">First link</a>

8. Save.

For further information about the Yahoo Media Player please visit: http://mediaplayer.yahoo.com/.

That’s all!

Good luck!

How to Add the IntenseDebate Comment System to Your Blogger Blog

2011-10-17T21:58:00.001+02:00

IntenseDebate is one of the most popular and feature-rich comment systems for WordPress, Blogger, Tumblr and many other blogging/CMS platforms. In this post I am going to show you how you can add the IntenseDebate comment system to your Blogger blog.

IntenseDebate lets you do a whole lot more than is possible with Blogger’s default comment system. Her eis a short list of the main features of IntenseDebate comments.

IntenseDebate features:

Comment Threading.
Reply-By-Email.
Email Notifications.
Commenter Profiles.
Moderation/Blacklisting.
Reputation Points & Comment Voting.
Plugins API.
OpenID.
Widgets.
Twitter Connect.
Facebook Connect.
RSS Readers & Tracking.

HTML Formatting

You can customize your links and add some photos to your comments. IntenseDebate supports the following HTML tags: <a>, <b>, <i>, <u>, <em>, <p>, <blockquote>, <br>, <strong>, <strike>, <img>.

Gravatar

IntenseDebate offers full Gravatar support. If you have a Gravatar it will be uploaded automatically during the signup process for IntenseDebate. You can choose to use your Gravatar or upload a different profile pic.

Before you go about adding the IntenseDebate comment system,you should backup your Blogger template. Save the backup template file on your hard drive.

How to Add the IntenseDebate comment system to your Blogger blog

1. Create an account at IntenseDebate.com.

2. Add your blog to IntenseDebate: http://intensedebate.com/install

3. Now you will see the following window. It is here that you have to select some option.

1. How would you like to install IntenseDebate?

Select the "Template" option.

2. Which blog posts should have IntenseDebate comments enabled?

Only on new posts
- Your old comments will be displayed using your blog's native comment system

On all blog posts
- IntenseDebate comments will be available on all posts, but your existing comments will be hidden.

Select the "On all blog posts" option.

Note: If you want to keep "Blogger default comments of your old blog posts" you need to select "Only on new posts".

4. Scroll all the way down to the bottom of the instructions.

Now upload the template you have saved to your desktop (see above, before Step 1).

5. After uploading your template you will see a screen like the one below. Copy the modified template code from the textfield.

6. Now login to Blogger. Go to Dashboard --> Design --> Edit HTML.

7. Select the entire code in the Edit Template text box and delete it. You need to have a blank text box.

8. Paste the code you have copied in step 5 inside the empty text box.

9. Save your modified template.

You should see the IntenseDebate comment form under your blog posts.

That’s all!

Good luck!

How to Add a Perfect Share Box to Your Blogger Blog

2011-10-10T22:48:00.001+02:00

In this post I am going to show you how you can add a beautiful and useful share box to your Blogger blog. This share box containsthe official Tweet button with counter, the official Facebook share button with counter, the official Google Buzz button with counter, and the official Stumbleupon button with counter, as well as a BlogThis! link, an Email This! link, a Print This! link, a Comments count link and the ubiquitous Facebook like button. All of these have been configured for Blogger blogs, so you can add this share box quickly and easily.

How to add a perfect share box to your Blogger blog

Please follow the simple steps given below to add this share box to your blog.

1. Login to Blogger. Go to Dashboard --> Design --> Edit HTML.

2. Click on "Expand Widget Templates".

3. Find (Ctrl + F) the following line of code:

4. Copy the Share Box code given below and paste it directly below the above line of code:

[Note: If you cannot find <div class='post-header-line-1'/>, please enter the code below just before <data:post.body/>.]

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.multisharebox {
background: none repeat scroll 0 0 #EFEFEF;
float: right;
margin: 5px 0px 3px 10px;
padding: 0 5px 0;
text-shadow: 0 1px 0 #FFFFFF;
width: 260px;
border:4px solid #d8dfea;
}
.fb-like-boxtop {
background: none repeat scroll 0 0 #EDEFF4;
border: 1px solid #D8DFEA;
color: #000000;
float: right;
font-size: 11px;
margin: 0 0;
padding: 5px 10px;
text-align: left;
width: 230px;
}
.fb-like-boxtop a {
color: #000000;
text-decoration:none;
}
.fb-like-boxtop a:hover {
color: #000000;
text-decoration:underline;
}
.fb-like-box {
background: none repeat scroll 0 0 #EDEFF4;
border: 1px solid #D8DFEA;
color: #000000;
float: right;
font-size: 11px;
height: 60px;
margin: 5px 0;
overflow: hidden;
padding: 5px 10px;
text-align: left;
width: 230px;
}
</style>

<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/></td>
<td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=230&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>

</b:if>

Note: This share box will appear only on the post pages of your Blogger blog. If you want to show it on each and every page, then simply remove the green lines from the code.

5. Save your template.

Customization

If you want the Share Box to be shown on the leaft instead of the default, please replace the following code:

.multisharebox {
background: none repeat scroll 0 0 #EFEFEF;
float: right;
margin: 5px 0px 3px 10px;
padding: 0 5px 0;
text-shadow: 0 1px 0 #FFFFFF;
width: 260px;
border:4px solid #d8dfea;
}

with the one below one:

.multisharebox {
background: none repeat scroll 0 0 #EFEFEF;
border: 4px solid #D8DFEA;
float: left;
margin: 5px 10px 3px 0;
padding: 0 5px;
text-shadow: 0 1px 0 #FFFFFF;
width: 260px;
}

That’s all!

Good luck!

How to Set Up a Facebook Fan Page for Your Blogger Blog

2011-10-03T21:17:00.001+02:00

In this post I am going to show you how to create a Facebook fan page for your Blogger blog and, after that, how to set it up to publish your blog posts/articles. Then your facebook friends will be able to read your blog posts on your your facebook fan page and, hopefully, will become fans of your blog. This is a very god way to make your blog more popular. Please follow the steps below.

1. Login to your Facebook Account.

2. Now go to the following link:

http://www.facebook.com/pages/create.php

3. You will see a screen like the one below. Fill in the necessary information and click on "Create Page".

4. You have created a Facebook fan page. You can see a screen like this:

5. Now you need to import your blog posts to the new fan page. Click on "Edit Page".

6. In next window click on the "Edit" link in the "Notes" section.

You will see a screen like this:

7. Now click on "Import a blog".

8. Insert your website URL and click on "Start Importing".

9. Next you will see a confirmation window:

Click on "Confirm Import".

10. You are done! From now on, whenever you publish a blog post, it will automatically be published on your Facebook fan page as well.

You can add a picture to your fan page, configure settings,... as you like.

Good luck!

How to Show Blogger Widgets Only On Select Pages

2011-09-26T21:03:00.001+02:00

On Wordpress blogs it is very easy to show widgets and ads and pretty much anything that can be put in the sidebar only on selct pages, for instance the home page, archive pages, and so on. Unfortunately, things are not as easy on Blogger because here all sidebar widgets are, by default, linked to all pages. In this post I am going to show you a method that lets you choose on which pages a specific widget will appear.

How to show Blogger widgets on select pages only

1. Sign in to Blogger. Go to Dashboard --> Design. Add widget and position it where you like.

2. Now go to Edit HTML and check "Expand Widget Templates".

3. Search for (Ctrl + F)

<b:widget id='HTML3' locked='false' title='The title/name you gave to your widget' type='HTML'>

The number in red can be pretty much anything. It depends on the number of widgets you added before the one you want to show only on select pages .If you don’t know the number just search for

<b:widget id='HTML

You will find a number of codes starting like this, so you need to look for the name of the widget you want to show on different pages.

4. Now add one of the codes in red as shown below.

If you want the widget to appear only on the home page

<b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To display a widget on all posts pages but not on the home page

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To display a widget only on archive pages

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

That’s all!

Good luck!

P.S.: If you have any problems with this hack, please leave a comment.

How to Add a Mootools Recent Posts Slider to Your Blogger Blog

2011-09-20T21:48:00.001+02:00

It is my aim to present you the best widgets and gadgets for your Blogger blog. In this post I am going to show you how to install the stylish Mootools Recent Posts Slider. Sliders are a very good way to make your template look more attactive - they are a real eyecatcher.

How to add a Mootools Recent Posts Slider to your Blogger blog

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Find (Ctrl + F) the ]]></b:skin> tag.

3. Copy the following code and paste it directly after the ]]></b:skin> tag.

4. Now find the following line of code:

5. Copy the following code and paste it just before said line:

<div id='featabout'>
<div id='featabout-wrapper'>
<div class='featured'>
<div class='top'/>
<div class='mid'>
<div id='featured'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 606px;
height: 220px;
z-index:5;
border: 1px solid #000;
overflow:hidden;
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 80px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
<div id='myGallery'>
<script type='text/javascript'>
//<![CDATA[
function rp(json) {
for (var i = startposts; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Read More)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showposttitle == true) document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent);
document.write('...' + readmorelink);
}
}
}
}
//]]>
</script>
<div class='imageElement'>
<h2><script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkTmNZtfI/AAAAAAAAAAY/AFA7z-uPRzo/jquery+slider1.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkX2_Ie4I/AAAAAAAAAAg/UtcyiDMmQvM/jquery+slider2.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkbtD9zSI/AAAAAAAAAAo/LhX8RCn8SiA/jquery+slider3.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
<img class='thumbnail' src='http://2.bp.blogspot.com/_pZaV-NlP_3s/SwYkgdPc4aI/AAAAAAAAAAw/prTy94a0Y8k/jquery+slider4.jpg'/>
</div>
<div class='imageElement'>
<h2><script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://www.ebloggertricks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
<img class='thumbnail' src='http://4.bp.blogspot.com/_pZaV-NlP_3s/SwYkk1JAXgI/AAAAAAAAAA4/kDXw6ZDtCu0/jquery+slider5.jpg'/>
</div>
</div>
</div>
</div>
<div class='bot'/>
</div></div></div>

Replace "http://www.ebloggertricks.com" with your blog address.

Replace images addresses with the addresses of your images.

Note: You can place the above code where you like. The placement just before <div id='main-wrapper'> is for explanation purposes only.

6. Save your template and you are done.

The result will look similar to this:

Good luck!

How to Add a Beautiful Subscribe Section to Blogger

2011-09-13T17:33:00.002+02:00

Who wouldn’t want toadd a beautiful subscribe section to their Blogger blog? If you’re interested in engaging your readers and getting them to share your content just follow the simple steps below.

1. Login to Blogger, then go to Dashboard –> Layout --> Edit HTML.

2. Find the </head> tag.

3. Copy the code you find below and paste it just before the </head> tag.

<style type='text/css'>
 
#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}
 
#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }
 
#sectionmy .sectionmy2 h2.rss { background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S209wcnxO5I/AAAAAAAAAw4/I7aEXRVYR8s/RSS.png) no-repeat top left; }
 
#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S209s4_wFoI/AAAAAAAAAww/8VovLp1Yxlg/EmailRSS.png) no-repeat top left; }
 
#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S209oJTU3UI/AAAAAAAAAwo/28dTiLvxvDQ/twitter.png) no-repeat top left; }
 
#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }
 
</style>

Important: Please host RSS.png , EmailRSS.png , twitter.png yourself.

4. Now go to Layout --> Page Elements and click on "Add a gadget".

5. Select "HTML/JavaScript" and add the code given below, then click save.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">
 
<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>
 
<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>
 
<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>
 
</div></div>
</div>

NOTE: Please replace YOUR-RSS-FEED-URL, YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL, YOUR-TWITTER-URL with your URLs.

Look at the following example:

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">
 
<h2 class="subscription rss"><a href="http://feeds2.feedburner.com/blogspot/WyNa">SUBSCRIBE VIA RSS</a></h2>
 
<h2 class="subscription email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa&loc=en_US">SUBSCRIBE VIA EMAIL</a></h2>
 
<h2 class="subscription twitter"><a href="http://www.twitter.com/ebloggertricks">FOLLOW ON TWITTER</a></h2>
 
</div></div>
</div>

That’s all!

Good luck!

How to Highlight Authors Comments on Blogger Blogs

2011-09-06T15:55:00.001+02:00

When you visit a lot of blogs you will certainly have seen some where the comments of ist author were highlighted in color. They are highligted to differentiate the comments of the author(s) from the ones by readers. You may be interested in finding out how to implement this neat feature on your blog. Quite a few templates have this hack pre-installed, but if you are not using one of those please keep on reading this post.

How to highlight author’s comments on Blogger blogs

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML. Check the „Expand Widget Templates“ box.

2. Now search for (Ctrl + F)

]]></b:skin>

3. Copy and paste the following code directly before said line.

.comment-body-author {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Change the line background: #ffffff; to background: url(http://DIRECT_LINK_OF_THE_IMAGE.jpg) ; if you want to show a background image instead of white color.

Alternatively, you can also change the color to anything you like by inserting the corresponding color code.

4. Search for the following lines of code and insert the codes in green as shown:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

</b:if>

5. Save the template.

That’s all!

Good luck!