How to Make Blogger Blogs Mobile Phone Compatible? .If you are running a blogspot blog then you should think about making your blogger blogs mobile friendly. Actually today i was seeing my Google Analytic account and i was surprised when i saw in the browser details that 15% of the users are using mobile browsers.

I also noticed that my blog is getting more visitors from the US region, where majority of users using mobile phones, tablets and iPhones. So i have decided to make my blog(http://besthowtoblogger.blogspot.com) mobile compatible. Below here you will find how to make blogger blog mobile phone compatible.





Steps to Make Blogger Blog Mobile Phone Compatible

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 Check the Expand Widget Templates Check box.







#Step 2. Find this code:

<b:include data='blog' name='all-head-content'/>

and replace it with this code.

<b:include data='blog' name='all-head-content'/>

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

#Step 3. Save template and done!.



If you need any help please Leave a response.

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.

Blogger has just launched Popular Posts Widget in Blogger for all blogspot user, and i would like to guide you on how to add this popular posts widget in blogger. You can show this widget with thumbnail and without thumbnail. You will also be able to show text snippet of your post.

The Popular Posts gadget will help your readers quickly find out which of your posts have been viewed the most by your readers. The gadget also comes with several different styles and configurations. To add one of the best gadget you have to follow some simple steps given below.



Steps to Add Popular Posts Widget With Thumbnail in Blogger



#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Page Element.





#Step 2. Now Find Popular Posts Gadget and (Click on Plus sign) Add it, before adding gadget you can configure the settings as per your need given in #step 3.



#Step 3. You can choose most viewed, snippet, thumbnail and title of the widget. (Recommended settings from me are as given below.

1. Enter Title of the widget as "Popular Posts".


2. In Most Viewed Choose All time.


3. If you want your popular posts with thumbnail and snippet then check bot check boxes else choose as per your need. ( I suggest you not to use any of these both)

#Step 4. Click on Save button and done!.

Update: Currently you will find this Gadget only in Blogger in Draft. Login with your blogger credential and add this wonderful widget.

If you need any help please Leave a response.

Now you can use your own image as your blogger blogs background. If you want the answer of the question "How to Change Background Image in Blogger" and use your own custom image for your blogs background, keep reading this post.

After blogger has launched the Blogger Template Designer, one of the most requested features was the ability to upload your own background image. Though blogger provides hundreds of professional stock photos from iStockPhoto, they know how many of you are serious photo buffs and would like to use your own beautiful photo as your blog's background image.



Steps to Change Background Image of Your Blog in Blogger

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

#Step 1. Go to Blogger in Draft. Log in to your Blogger Dashboard and Navigate to Design > Template Designer > Background.



#Step 2. click on Background Image, and you’ll notice a new “Upload image” option, which will allow you to select and upload your image. Upload your custom image and save the template.



For images that fill the entire background, we recommend using a resolution of 1800 pixels wide and 1600 pixels high, and file size less than 200KB to minimize the loading time of your blog pages. We support JPEG, GIF, and PNG format images.

After uploading a photo, you will see additional options that are not available for the built-in images: Alignment, Repeat, and Scroll options.

• Alignment: You can adjust horizontal (left, center, right) and vertical (top and bottom) alignment of your background image.


• Repeat (Tile): If you have a small image, you can have it repeat horizontally and/or vertically to fill the page. Otherwise, we recommend that you choose a page background color that blends in with your background image.


• Scroll: By default, your image stays in place while readers scroll the page contents. By selecting the “Scroll with page” option, both the background image and page contents scroll together. We recommend that you use an image that blends into your background color or set your image to tile vertically if you choose this option.

This feature is available on Blogger in Draft right now, so please go ahead and check it out!



#Step 3. Save template and done!.

If you need any help please Leave a response.

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.

Alert your friends and fellows in real time on information that they care about through SMS. It is very useful for everyone if you know how to Add/Start Google SMS Channel Link/Gadget in Blogger. I have said for Bloggers this is very helpful because it might be help you and your readers to get synchronous.

Using Google SMS Channel, As a subscriber you can subscribe to channels and you also can create your own channels and invite others to join. You might have seen SMS Channel of Best How To Blogger, you will find that in right sidebar as SMS Symbol.

Before subscribing to or creating an SMS Channel, you need to verify your mobile number.



This article is specially for my online friend Manohar, who want to know how to add Google SMS channel link as a Widget in Blogger. Below here is a exact question asked by manohar :

how can i add my google sms channel link as a gadget to my blog.

Useful Links for Google SMS Channel Creation and FAQ :

• http://labs.google.co.in/smschannels/browse


• http://labs.google.co.in/smschannels/help?cr=in#subscribe


• http://labs.google.co.in/smschannels/help?cr=in#create_channel

Steps to Google SMS Channel Widget in Blogger



#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Page Element.



#Step 2. Add below code in HTML/JavaScript widget:

<a href="http://labs.google.co.in/smschannels/subscribe/BestHowToBlogger"><img border="0" src="http://1.bp.blogspot.com/_1fqu8LzmPN8/S_yGe4oHUII/AAAAAAAAFbc/dONGxdHQ_MQ/s1600/Subscibe+to+SMS.jpg" alt="Subscribe via Google SMS Channel"></a>Change above Red color text with your Google SMS Channel code.



#Step 3. Save Widget and done!.



So benefit of using google sms channel is, you may use the Google SMS service to get news alerts and weather information on your phone.



You don’t really need a mobile phone to send an SMS to your group as there’s an option in Google SMS channels that lets you can compose and send SMS messages via the web itself. It supports English, Hindi, Telugu, Tamil, Malayalam and Kannada.



Done! Let me know in case you need more information :)

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.

Recent Comments Widget will display excerpts of the most recent comments that have been posted to the articles in your blog. While displaying recent comments you can customize number of comments and comment excerpts size.

You can choose whether to display the post title and comment date or not. Below is a steps on How to Add Recent Comments Widget in Blogger.

Steps to Add Recent Comments Widget in Blogger

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Page Elements.





#Step 2. Click on Add a Gadget from layout where you want to put your recent comments and select HTML/javaScript.







#Step 3. Put the code given below in HTML/javaScript Page Element after making highlighted changes if you want.

<script style='text/javascript' src='http://sites.google.com/site/besthowtoblogger/about-me/recentcommentswidgets.js'></script>

<script style='text/javascript'>var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src='http://besthowtoblogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>

First Replace the blog url with your Blog URL in above code, and then change the below items as per your requirements.



var a_rc=5 ( Defines number of comments to display on blogger)



var m_rc=true ( Shows comment date, if False will not display comment date)



var n_rc=true (Shows Post Title , if False will not display Post Title)



var o_rc=100 ( Shows how much summarize text you want to show for the comments, you can change it as per your requiremnts)



#Step 4. Click Save and done!.

If your are using blogger blog and want to change some xml or css or html code in your blogger template then, it is advisable for you to have a full Backup of your blogger template. I know that this is very basic and common sense that before making any changes to the template the user should have backup of the full original template.

I am insisting to have copy of your blogger template, because once if you have made any bad changes and you are not that much use to with XML, then after saving bad changes you lose your previous template code.





Steps to Take Full Backup of 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. Click on Download Full Template link.







#Step 3. Click OK button and save your template.



- If you need to upload that template again, just click on Browse button and give the path to the template file and click Upload button and done!.



Video of How to Take Full Backup of Your Blogger Template

You might have seen a Link or Button image saying "Return to the top of the page" or "Back to Top" or "Jump to Top" on lot of websites and blogs. I will explain you how to add such functionality in your blogger blog.

Before starting let's have some basic knowledge about Anchor Tag - Intradocument Linking

Intradocument linking is linking to a location on the same page.



To link to a location on the same page, you need two anchor tags.



Hyperlink Reference <a href=></a>

Name Tag <a name=></a>



This configuration is used for the common Back to Top link on HTML pages.



The code is:



<a href="#destination_name">Destination</a>



The href destination is preceded by the pound sign.



The matching Name Tag: Provides a location to jump to.



<a name="destination_name"></a>



The <a name=> tag is placed at the desired location you wish to jump to. The name must match the hyperlink tag exactly, excluding the pound sign.

Steps to Add Jump to Top Link in blogger:

#Step 1: Go to your blogger dashboard.

#Step 2: Navigate to Layout > Edit HTML.



#Step 3: Find this line of code:



<body>



and replace it with this code:



<body id='top'>



#Step 4: Add this code at the bottom(footer) of your code:



<a href='#'>^ Back to Top ^</a>



#Step 5: Save Template and Done.

How to Add Image Which Link Back to Top

In above steps i have explained how to add link which lead to Back to Top, now let's try to add Image instead of link.



In #Step 4 above add code like this:



<a href="#"> <img src="Image_source_URL" alt='Back to top'/> </a>



Below here some images for you, to use this images [Right Click and "Copy Image Address/Location"]:







If you are facing any trouble then let me know.

After giving Import Blog - Export Blog - Delete Blog functionality in blogger, so many blogspot users have deleted their blogger blog accidentally. if you also have deleted your blog and want to recover or restore your blog from blogger then below is a detailed post regarding how you can reactivate your accidentally deleted blog.

• Go to the Dashboard and you will see a list of your blogs, some of which may be hidden (at the bottom of the list of blogs you will find statement like - "Displaying 1 of 9 blogs - Show All")

Note: You can recover your blog if it is deleted LESS than 90 days ago (3 Months).

• Just click on "Undelete this blog" and you would have restored your accidentally deleted blog.

This is the way by which you can recover your deleted blogspot blogs. :) if you have any doubt regarding this post or any other for the blogger, comments are on :)

This is in no way a science or guarantee; it's simply a few suggestions with which many bloggers have found success.

Set your blog to Send Pings. When this setting is activated, your blog will be included in various "recently updated" lists on the web as well as other blog-related services.

Activate Your Navbar. Do this and you might start to see the effects right away! One of the features on the Blogger Navbar is a button called NextBlog - click it to visit the next Navbar-enabled blog.



Install Email This Post. If you use Email This Post on your blog, people will be able to forward your posts to friends. This may not have an immediate impact on your site stats but it enables others to publicize your blog for you.

Turn on Post Pages. By publishing every post as its very own web page with Post Pages, you ensure that your entries are way more link-able and more attractive to search engines.



Turn on your site feed. When people subscribe to your site feed in their newsreaders, they're very likely going to read your post.



Add your blog to Blogger's listings. When you add your blog to our listings it shows up in Nextblog, Recently Updated, and other places. It's like opting-in to traffic.



Write quality content and do it well. If your "style" is bad writing, worse grammar, no punctuation, and an ugly design, that might be okay for a niche crowd. But the idea here is to achieve mass appeal, so fix yourself up a bit.



Publish regular updates. Simple: the more you blog, the more traffic you'll get.



Think of your audience. A good way to build an audience is to speak to one in particular. When you keep your audience in mind, your writing gains focus. Focus goes a long way toward repeat visitors.





Keep search engines in mind. There are a few things you can do to make your blog more search engine friendly. Use post titles and post page archiving. This will automatically give each of your post pages an intelligent name based on the title of your post. Also, try to be descriptive when you blog. A well crafted post about something very specific can end up very near the top results of a search.



Keep your posts and paragraphs short. Strive for succinct posts that pump pertinent new information into the blogosphere and move on. Keep it short and sweet so visitors can pop in, read up, and click on.

Put your blog URL in your email signature. Think of how many forwarded emails you've seen in your day, and just imagine the possibilities.



Sumbit your address to blog search sites and directories. People look for blog content at Technorati every day, are you on their list? You should be. Submit your blog's url to Technorati, Daypop, Blogdex, Popdex, and any other site of that ilk you come across.



Link to other blogs. Links are the currency of the blogosphere and it takes money to make money so start linking.



Install a blogroll. It's a very simple yet effective social networking scheme and it has the same result as a simple link if not stronger: traffic! So if you don't have one yet, sign up for a blogroll and get that link-list going.



Be an active commenter. This is in the same vein as linking. Most comment systems also provide a way for you to leave a link back to your blog which begs a visit at the very least. So if you feel inspired, leave a comment or two in your blog travels. It behooves you.



Enable Following on your blog. Following a is a great way to keep your friends updated on the latest activity on your blog. New blogs will have this blog feature enabled by default, but for older blogs you will have to enable it from the Layout | Page Elements tab.



So go ahead and generate hug friend following and lots of traffic too.