How to Add Favicon to Blogger?, When you create a blog in Blogger, the default favicon you will notice in your browser navigation bar is Bloggers default icon as favicon. If you want to add custom favicon to blogger and set an enrich favicon in your blogspot blogs then this is the final place for you.

Now you can set Favicon (Favorite Icon) as you need and which suits to your blog logo and design. Follow the below given steps to add favicon in your blogspot blog with ease.



A "favorite icon" or favicon (pronounced fav-eye-con) is a 16x16 pixels icon that appears next to a website's URL in the address bar of a web browser. To see the demo just see this image here and see my blogs favicon.

Before going ahead you must have your image(16x16 or 32x32) be either a .gif or a .png, get your image code ready to use ahead in the post as given below.



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidCr2LEib-iRLGtDJ38EAQ4eqo1m9QhjkjyEzjjM7Azo2a-PwzUDPVeqKUy4jB2wKfPnnmLuvE2lU185jg6zQ8nCuwaHDMIc4LUXJD_QzwrL2ntixO_fNspsa4YcqRo7MMru5EwHLJ3cNh/s1600/Favicon.png" border="0" />

Steps to Add Favicon to Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.





#Step 2. Find </head> tag and just before the </head> tag add One of the following HTML image code. (Add.gif or .png code for firefox and .ico code for IE)



<link rel="icon" href="static_favicon.ico"/>

<link rel="icon" href="animated_favicon.gif"/>

<link rel="icon" href="static_favicon.png"/>

After Adding one of the above favicon image type, your code should be something like this:

<link href='http://www.siddharthr.in/favicon%20%281%29.ico' rel='icon'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGr5wGYbwUOYw1v7sXw_mvq6qp47W23o4yPBHWOM2N5vRxDImxXhbV6gZ1-3UUE7Q1TU7ZuDk2Vzhz4En_f9CJWDcn4ApVDBldbShn7aT14rttCXDIiZPchAW89nEW_2eLHZGq6iovGWd/s1600/favicon.png' rel='icon'/>

</head>

For those of you wanting desperately to have your favicon to work in Internet Explorer you have to use a .ico file, since it appears that Internet Explorer simply does not want to support the .png or other formats for the favicon.



You can’t upload a .ico file to Blogger.com, that means you will need to host your favicon somewhere other that on Blogger.com. An option could be Google Page Creator.



Some more help (resources) for adding a favicon in blogger.

• HTML-Kit favicon generator (download as favicon package) – Enables you to create a static or animated favicon; you can even create a favicon quickly using your Twitter username!


• Use Favicon Validator for making sure that the favicon works.


• Use image converterlink to convert your .jpg, .gif or .png image into .ico image

Video to know & set Favicon in your Blogspot Blogs







#Step 3. Save template and done!.

If it does not work for you leave a comment and we will see if it can be sorted out. Leave a response.

Advertise here banners is a great way to make money from your blog. There are millions of Advertisers (Sponsors) in the internet market who want to put their ads on the High traffic blogs & Websites. If your blog is getting handsome amount of traffic then you should try to add some Ad slot for the advertisers and you can earn a good amount of money by just selling some ad space. Just Copy HTML Code for Ad banners and put on your blog.

Today i was creating the custom Advertise Here banners for my blog. I thought to share it with all my readers so you can easily embed Sponsors Ad Slot in your Blogger Account. Let see how to "Add Advertise Here Banners" in Blogger and Attract Advertisers.





Steps to Add Advertise Here Banners in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.













#Step 2. Copy below code and paste it just before the ]]></b:skin> code.

.adslot {

border:2px solid aliceBlue;

margin:2px;

}



#Step 3. Now Go to Design > Page Elements and Add a HTML/JavaScript Gadget.



- Give Title Name as "Sponsors" or Whatever else you want to put.

- Paste below image code in the content area and save your widget.

<img border="0" class="adslot" alt="Advertise wit us banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYa3HwHm1mEO0igaqERwO_efNCuUB1CZ6It90x5tF57SGN2huaU7SNaPT61gU6Fj3VPWFPU6rCVahbwdLgoV07hSsxcXwpZ-QJieFMlVgHmSKBVZzWKvD3MHDsFw2w2By-7kl2-pCjMGY/s400/AdSpace+120-125.png">

Note: Repeat above given image code 3 times and you will be able to see 4 Advertise here banners on your blog.

- You can put Hyperlink on click of image if you want, which redirects users to your contact me or about me pages.



Update: Added some more background images to use as an advertising banner.

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDL4UZLD65sMucuiwT6JNItYhgMb9g6TYWxttCnnvAUsa1L2QrD5LiJd_7A3tD3dJHSdqzTZbsV690vsP6yz7eywTm69TCeA8aJYLsy9Zy7Moug3T-57XWymzT7iA2vct-rekjr8Wj3-_/s800/Advertise+Here+Money.png" alt='Advertise Here Banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMCYoADCKMvSj07bt9CRka08k5qdwYm0_WP8Y4G_KWVoJKzZmEeCBmfdWw0Nvcr-xYET7UrkbXbVux0qV50Q6yJ1CLIZfGc_eRhQWhFVQm54Qx0p7Kt7JzbfMWLnvIjGZxKDRQ_9dyoo2A/s800/Advertise+Here.png" alt='Advertise Here' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGnz3jsqZ_XKPC5k0jxO1Meme5vTJFnJbh_3nwZ85dGhGNruuJEVdQjBL7yS9zEjZKBakarimDXg7UmRPkX24mvIoU7_i3L6hUlCd77BxY-M5b97tFPpUwYF0oHWrMFaOh_lGDzOAoqWYQ/s800/Ad+Banner.png" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNujWqtssHw0i38w9r4jvFs8c_zbdY6U_-w1qqFiXI3oVFmTRnzYqEtgtCX_XM9U17Pfq5eV_q0YtwChuEsd3IgqKRHX9b9v7rlpSJ60dimFLtW0HO6pJxA5yLJnSEoYAgjQng1nlIcz4H/s1600/Ad+Spot.jpg" alt='Advertise Here' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6kRXegcAKgDGtukWIpziq0Dqj9zb9sgSPr0XNF0pol9FgEhWZJ-S9qQaZo1EXuBPlQyfsaPi-nCq7WRl57dqebycq9nH8bccIi3KHEPb1KtMxPJf25LFnCUBfuIHZHs2nUNUomaQiCKt8/s1600/125x125ad.png" alt='125*125 Ad spot banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8UaTle1q-ioVilWjpA12GRdxzFL4omENdObhcAF_ahOVL8X2ZrhHvPAwgasY56It19E9mvJLguNpR8ipRvPcrv3ghNXY4UwimUN83m8DzhAlBznbc_NX8RofJFlOSUXSBfDGTnFtuYFr/s1600/Your+Ad+Here.jpg" alt='Your Ad Here' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNBcbYkO2yeurSinfVpmCL-Fr3Uyu5x9pu-OhWzopMwKy50WKh9Bo8zMdKJvkpVV6XIHCgnnfwknD3xaaIOa_umUuApNpGIJqO7WkoXcdCXqVhKnyjze60Nu-v0FlOUksX-cUfxNnfolVb/s1600/banner_125x125.png" alt='Banner 125*125' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXnWRHj4N08Q1XpCNjAihIXwXATtgNDbZhGlBsh5KVJvdQKIHmcNREku8okfgk_eEE93V9PIc7HSdeukEITn3Bne4j0WDyaaJWnYciqgTikFvPUhC3SbeKhFUS1oRyb-1VHRpGYZwcBXp/s1600/125-advertise-banner.gif" alt='HTML Code for Ad Banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELtIrc9uCQB7cM3-ydnbG5iLQGvLSunKdeSrNES9VNIlFpmnmM2wYMvhPniox8mTNsMP7bMxTAagI1AzwqNYl0a4J_HfrYoLZNu3hPaZDOQVO63Df41DQQImE_RiVyUMp8N41O_yA1vdq/s1600/Ad-Banner.jpg" alt='Ad Banner HTML Code' />



If you need any help please Leave a response.

Now Add Best Numbered Page Navigation Widget in Blogger with Scroll Effect using little bit of jQuery and CSS code. To have a Pagination Functionality in blogger can increase your website or blog's page visit counter/user traffic tremendously. Paginator 3000 is a New Page Navigation with Scroll for Blogger.

While working with this Paginator 3000 widget your can set how many post every Page for your blog you want to display in this pagination. You also can set how Many number will show in Your page Navigation. Below is a guide on how you can add this widget in your blogger blog.



Steps to Add Numbered Page Navigation Widget with Scroll Effect in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML. Don’t click the "Expand Widget Templates" check box.











#Step 2. Find this code:

]]></b:skin>

and replace it with this code:

.paginator {

margin-top:60px;

font-size:1em;

}

.paginator table {

border-collapse:collapse;

table-layout:fixed;

width:100%;

}

.paginator table td {

padding:0;

white-space:nowrap;

text-align:center;

}

.paginator span {

display:block;

padding:3px 0;

color:#fff;

}

.paginator span strong,

.paginator span a {

padding:2px 6px;

}

.paginator span strong {

background:#ff6c24;

font-style:normal;

font-weight:normal;

}

.paginator .scroll_bar {

width:100%; height:20px;

position:relative;

margin-top:10px;

}

.paginator .scroll_trough {

width:100%; height:3px;

background:#ccc;

overflow:hidden;

}

.paginator .scroll_thumb {

position:absolute;

z-index:2;

width:0; height:3px;

top:0; left:0;

font-size:1px;

background:#363636;

}

.paginator .scroll_knob {

position:absolute;

top:-5px; left:50%;

margin-left:-10px;

width:20px; height:20px;

overflow:hidden;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAYn95U-ljarmX8Rqq_qYy_0SqEiZzGQvKCWO0OChguXTNiAzvVj8Cg9YPISIop1Du9s4umujgJoiptfoT0WFmAKH2AE2NWuizvYLkHvOY7my-pzLy3ZOU892Zth6mgJ0jhER9-ArsNmk/s1600/slider_knob.gif) no-repeat 50% 50%;

cursor:pointer; cursor:hand;

}

.paginator .current_page_mark {

position:absolute;

z-index:1;

top:0; left:0;

width:0; height:3px;

overflow:hidden;

background:#ff6c24;

}

.fullsize .scroll_thumb {

display:none;

}

.paginator_pages {

width:600px;

text-align:right;

font-size:0.8em;

color:#808080;

margin-top:-10px;

}

]]></b:skin>



#Step 3. Now find this code:

</body>

and replace it with this code:

<script src='https://sites.google.com/site/besthowtoblogger/blogspot/paginator3000.js' type='text/javascript'></script>

<script type='text/javascript'>

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=6;

</script>

<script src='https://sites.google.com/site/besthowtoblogger/blogspot/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

</body>



Further more if you want to customize number of posts per page and number to display on the blog you can change it based on your blog settings.

var postperpage=7;

var numshowpage=6;

postperpage: How many post every page for your blog.

numshowpage: How many number will show in your page navigation.



- Note: If you have less number of posts then to see the scroll knob use less postperpage number.



I hope it will work on your blogspot blog and make your blog easy to navigate for all the users. If you need any help please Leave a response.



See Working Demo here:

Update: If you are using inbuilt Labels Widget and Template Designer then you must have to use the below given label hack to see the pagination on labeled pages.

- Try to find the below given kind of code in your template (check Expand widget Template checked) and replace the highlighted part given below with the existing code. (Don't search for whole code just find any one line from below given code, and see if that is the code which we want)

<b:if cond='data:display == &quot;list&quot;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=5&quot;'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

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

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=5&quot;'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if>- You can change max-result=5 to your suitable number and done!.



Credit:

This beautiful widget is designed like Plug-in from WP Paginator.

- idea by ecto (ecto.ru)

- coded by karaboz (karaboz.ru)

- converted by (abu-farhan.com)

Twitter has just launched an official retweet counter button in collaboration with tweetmeme. This is a very good news for all bloggers who uses twitter to tweet their thoughts on twitter, and if you are running a blog then this new twitter button will allow you to easily share your blog posts and website pages with your followers. The Tweet count button shows how many times the URL has been Tweeted.

Now You can choose to display or hide the count box, or place it above or next to the Tweet Button with ease. You already have tweetmeme and the tweet counter green buttons as a small widget. I have already posted about Best Social Bookmarking Widget for Blogger which includes slick counter buttons, in that widget one is retweet button with counter. In this post we will learn how to add horizontal, vertical and simple retweet buttons in your blogspot blog.





Steps to Add Official Twitter Button in Blogger With Counter and Without Counter

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2.Now choose your Twitter button type from - http://twitter.com/goodies/tweetbutton page. Customize following options which are available currently.

• Button : Customize your button settings.


• Tweet text : This is the text that people will include in their Tweet when they share from your website:


• URL : Suggest a default Tweet for users.


• Language : This is the language that the button will render in on your website. People will see the Tweet dialog in their selected language for Twitter.com.

Choose Vertical count, horizontal or No count option, whichever suite best for your blog.



#Step 3. You can Recommend People to follow.





Recommend up to two Twitter accounts for users to follow after they share content from your website. These accounts could include your own, or that of a contributor or a partner.



#Step 4. Preview your button and Copy the code.





Demo code:



<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="vertical" data-via="YOUR-TWEETER-USER_NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>



Your code should be look like the one i have given above.



#Step 5. Now in Blogger navigate to Design > Edit HTML Section and find this code in your template: <data:post.body/> and After getting it just place the below codes after it, if you want button to have at beginning of post else place it after the code to display button at the end of the post.



Twitter code for Vertical Counter Button:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='float:right; margin-left:10px;'>

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="vertical" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>



Twitter code for Horizontal & Sleek Counter Button:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='float:right; margin-left:10px;'>

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="horizontal" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>



Add below twitter code for Simple Button:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='float:right; margin-left:10px;'>

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="none" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>



#Step 5. Don't Forget to change YOUR_TWITTER_USER-NAME with your twitter username TWEET-TEXT with the text which you think should automatically add before each tweet made by users. and Save template and done!.



Official video from Twitter team for this Twitter share buttons:







What do you think about this new twitter buttons?, do you like it or not. Share your thoughts.

Today we will see How to Share Adsense Revenue for Multiple Authors in Blogger. To have multiple authors in a single blogger blog is very common now a days, and if your blog is having more than one author's then it is quite possible that the co-author wants to put his/her Google Ads code on their own posts.

If you are using wordpress then this is thing can be achieved with Plug-in itself, but in case of blogger you need to do it manually. So below here is a hack for how you can share Google Adsense revenue with multiple authors while using blogger.



If you are thinking about how to distribute or share the revenue with other authors of your blog to give there share, then the simple solution is is to show the adds of that author. Google Adsense will give him the exact revenue he deserves for doing that post. This way you can share the blog revenue with them more precisely because every author gets his own ad displayed in all the posts he/she does.



Steps on How to Share Google Adsense Revenue in Blogger with Co-Authors

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2. Find this code:

<p><data:post.body/></p>

and replace it wit this code:

<p><data:post.body/></p>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/12753704574838247184&quot;'>

PASTE THE AD CODE OF Author 1 HERE

</b:if>

<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/12753704574838247184&quot;'>

PASTE THE AD CODE OF Author 2 HERE

</b:if>

<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/12753704574838247184&quot;'>

PASTE THE AD CODE OF Author 3 HERE

</b:if>

</b:if>

<br/>

Note: To know your profile id, Go to your Dashboard and click on your View Profile Hyperlink and watch out in address bar for your profile id. See below images to know more.

* Go to Dashboard > Click on View Profile.





* See your address bar and you will find your blogger profile ID.





#Step 3. Replace blogger profile id with author's profile ID and save your template. Now when ever co-author will publish post blogger will check that from which blogger profile it has been posted and will show relevant author's Adsense code.



Note: There is already a for the blogger on How to Share Google Adsense Revenue in Blogger with multiple authors, but the limitation of that hack is they are using name as a reference and if author is changing the name of his/her then you need to change the code each time.



The above hack will work in every scenario, because i have put blogger profile id into use, which will never going to be change until user deletes their account :)



Hope you have liked this post, keep sharing this article with your friends if you like it. Let me know if you want to know something more or comment below your views about this post.

How to show adsense in specific post only?. This is quite a different scenario, if you want to exclude or remove Adsense ads from particular posts in Blogger. I am writing this post specially for my online friend ejaji, he wants solution on How to Exclude Adsense Ads From Specific Posts in Blogger.

Question:

"I have Adsense on my blogger blog. I have put the Adsense code in the template so that the ads show up automatically in every post. However, I need to exclude Adsense on a couple of posts. Is there any way of doing that? I know that, in Wordpress, there are plugins that do just that, but I need the same solution in blogger. Please help fast!"

How to Remove/Exclude Adsense Ads From Specific Posts in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

UPDATE: Add Two lines of javaScript and hide All div wrapped google ads.

Put div around Google ads like given below:

If you have more than one Google Ads on your page then you need to modify your code something like this:



<div

id="GoogleAds1">

GOOGLE ADSENSE UNIT 1

<div>



<div id="GoogleAds2">

GOOGLE ADSENSE UNIT 2

<div>

.

.

.

Up to the Number of Ad Units you have.



and JavaScript to be added at the end of each post should be something like this:





<script type="text/javascript">

var Ads1 = document.getElementById('GoogleAds1');

var Ads2 = document.getElementById('GoogleAds2');

.

.

.

Ads1.parentNode.removeChild(Ads1);

Ads2.parentNode.removeChild(Ads2);

.

.

.

</script>

Up to the Number of Ad Units you have.



Note: Below is another way to Hide Google Adsense from Particular Post (use this if you want to exclue ads from 3-4 posts only, else use the solution i have given above).



#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2. Now Repeat below code (containing Adsense html code, generated from Google Adsense Account) as many times as you have google ads unit on your blog: For Demo purpose i have written below code keeping into mind that i am using only one Google Ads unit [468*15 - 4 link unit].



<b:if cond='data:blog.url == &quot;http://besthowtoblogger.blogspot.com/2010/06/how-to-replace-followers-title-with.html&quot;'>


<span style="display:none;">



&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-5820705378592492&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x15, created 6/7/10 */
google_ad_slot = &quot;4327800214&quot;;
google_ad_width = 468;
google_ad_height = 15;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;



</span>



<b:else/>



&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-5820705378592492&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x15, created 6/7/10 */
google_ad_slot = &quot;4327800214&quot;;
google_ad_width = 468;
google_ad_height = 15;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;



</b:if>

Similar to above code if you are using Ad unit or Link unit for each place you have to write above code which will remove ads from specific posts in blogger.



You can add multiple post URL's in the code above and can exclude ads from that posts also.



#Step 3. Save template and done!.



Hope this works for you, let me know in case of any difficulty, comment below your problem in brief and i will be able to solve it. :)

How many bloggers are there who wants to replace "Followers" Title With an Image in Blogger Siderbar?. Today i received a mail from TheoMat, asking help and hence inspired me to write this post on the topic of how to replace Google Followers title with image in Blogger sidebar.

I have already made a post about How to Replace Sidebar Widget's Title with an Image, but this hack will apply for all the widget's excepting Google provided "Followers" Widget.

Steps to Replace "Followers" Title With an Image in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2.Copy below code and paste it just before the ]]></b:skin> code and save template. This code will hide Title from the "Followers" widget.

h2.title{display:none;}

#Step 3. Now Navigate to Design > Page Element Tab.



#Step 4. Add your image code just above the Follower Widget(refer below screen shot).





Click Save and now you will be able to replace "Followers" Title With an Image in Blogger with 100% Success :)

Now you can display profile images or avatar in blogger comments very easily, if you have a profile picture in blogger then whenever you comment on another blog you will see your profile image over there. After formally announced the Blogger Comment avatars you should know that it means you will see the profiles pictures of the commentators near to the comments made. Here is a screen shot for Avatars on Blogger Comments



this is the part that will show up on the main page.

Now i think you are aware from what we are going to do, so now we will see how Avatars on Blogger Comments can show with little code in no time.





Steps to Add & Display Profile Images in Blogger Comments



#Step 1. Log in to your Blogger Dashboard and Navigate to Settings > Comments and select Show profile images on comment radio button.



"if you have a bespoken UN customized template used then you will see the avatars

on the comments on your blog without any change in code."



#Step 2. If you are using any other customized template you will have to add some codes into your template. Go to Blogger Layout > Edit HTML and checked the Expand the widget templates check box.







#Step 3. Find this line of code:



<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

if you don't find the code given above then try to find the code given below.

<dl id='comments-block'>



And replace it with below code:

&ltdl expr:class='data:post.avatarIndentClass' id='comments-block'>



#Step 4. Now find all occurrence of the code given below

<a expr:name='data:comment.anchorName'/>

and replace each of it with this code:

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

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

<data:comment.authorAvatarImage/>

</div>

</b:if>

#Step 4. Save template and done!.

Comment here if you have any doubt or issue regarding adding avatars on blogger comments.

Breadcrumbs or breadcrumb is a navigation used in user interface, typically appear horizontally across the top of a web page, usually below title bars or headers in blog area.

I suggest every blogger who uses blogger as a blogging platform, should add breadcrumbs in blogger to gain SEO Advantage and to support easy page navigation to end users. The term "Breadcrumbs" comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.



Typical breadcrumbs look like this:

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

Steps to Add Breadcrumbs in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML.





#Step 2. Find this code:

<b:include data='top' name='status-message'/>

and replace it wit this code:

<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

#Step 3. Now Find this code:

<b:includable id='main' var='top'>

and Replace it with this code

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'> »

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

» Unlabelled

</b:if>

» <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == ""'>

<a expr:href='data:blog.homepageUrl'>Home</a> » All posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

#Step 4. Now Find this code:

]]></b:skin>

and Replace it with the code given below

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

]]></b:skin>

#Step 5. Save template and done!.

If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.

if you have any query you can always comment here!

This post is for blogspot users who want to attach a signature in their Blogger Blogs. After Receiving an e-mail from one of my blog reader i have posted this article which will guide you through and let you know that How you can add Signature in Blogger like the image given here.

Before Adding the signature you must have an image of your signature of any size, but i suggest you to use small signature image. you can use Microsoft Excel or Word to Create a signature image and save it as .jpg or .png, after having an image you need to upload it to your server.



I will suggest you to upload it into one of your blog post and once you have uploaded the image you can go into your post's EDIT HTML section and copy the<img src='url_of_your_signature_image' style='border:0px;'/> Code. Once you have copied that code you can delete that code but copy the code in some notepad for further use.



Steps to Add Signature Image in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2. Find any of this code:

<div class='post-footer-line post-footer-line-1'>

OR

<p class='post-footer-line post-footer-line-1'>

OR

<data:post.body/>



Put image code you have copied already after above code and save you template.



after adding code you code should look something like this:

<div class='post-footer-line post-footer-line-1'>

<img src='url_of_your_signature_image' style='border:0px;'/>

That's it, now you will find that at the end of each blog post your signature image is displaying very well.



if you have any difficulty while implementing this hack, comment below your problem.

How to replace blogger sidebar widget title with any customize image would be a good hack for so many blogger's. I have noticed that in blogger help forum many of the blogspot users are asking for the help about how they can put an image instead of sidebar title.

suppose you need to put an image Replacing title in your sidebar with image can be very helpful when you want to design your custom design unique blog.





Demo Question asked by: Matthew Floratos

I'm looking to replace the traditional side bar title like "Archives" or "Tags" with images so that I can match the blog's aesthetic with fonts not available to Blogger. I've looked around in the template HTML, but it's a bit above me. Can anybody give be a quick pointer as regards to how I can replace widget names, which are traditionally text, with images? (If it's even possible at all, that is.)

So below here you will find the steps through which you can replace the title of the widget with image and yes answer of the question given above.



Prerequisites: You have already every image which you are going to replace with title text in sidebar.



# Step 1: Go to your Blogger Dashboard and Navigate to Layout > Edit HTML Section and check Expand Widget Templates check box.







# Step 2: Then use "Ctrl+F" to search for id='BlogArchive1' (for Archives gadget).

You may find this set(or something close to this) of codes:

<b:widget id="BlogArchive1" locked="false" title="Archives" type="HTML">

<b:includable id="main">

<b:if cond="data:title != &quot;&quot;">

</b:if></b:includable></b:widget>

<h2 class="title">

<data:title></data:title></h2>

# Step 3: <data:title></data:title> is your sidebar title data tag and is responsible for display the title text for that widget. To use an image, replace it with your image source URL like this:

<img src="YOURI_IMAGE_URL" alt='Image Name' /># Step 4: Save your template and done :)

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors. If you are a new blogger in blogging era and want to design your own customize template or modify the existing one, this tutorial is for you. so let's go ahead and add a small bubble comment count in front of your blogger post area. find working demo on this blog :)

This tutorial will add comments bubble icons to each of your post titles displaying the total count of the comments for that post. You have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog.

Steps to add bubble comments count:

STEP #1: Log in to your blogger “Dash Board”. Navigate to Layout > Edit HTML section and a give tick to “Expand widget Template”.





STEP #2:

Find ]]></b:skin> in your template code and place the below code just before ]]></b:skin>

.comment-bubble {

float : right;

width : 48px;
height : 48px;

background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipN-9YsnBW0miVyvKIvxli_iz24d5MzLJPcKmR3fmFTPx0qwt6qnLPgkXvyP28fsIMlW9JhtXqCZbSCg1vINPG789a8bBZPQsW_dUmdqz_ITDuaSH0bMDuChz_Fa60lfA9o0lpFl00cv6M/s1600/Comment+Bubble+%2815%29.png) no-repeat;

font-size : 18px;

margin-top : -15px;

margin-right : 2px;

text-align : center;

position:absolute;

}

Note: To Align bubble image right of the title remove position:absolute; line from #step 2 code.

Now find the below code and add the red code inside the code.

<b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>

<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

Now click on Preview button and have a look at your post first, if every thing is correct then save template and done. Instead of adding the above image, you can add your own image or you can choose one of the image given below.

IMPORTANT: You may use any image instead of the one linked in the code above (STEP #2), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

To use this images [Right Click and "Copy Image Address/Location"]

So what is the output? are you succeed and get a bubble comment count on your blog?