1.Log in to your Dashboard--> Design- ->Template

2.Click Edit HTML

3. Put checked marked in Expand Widget Templates

4. Find this tag by using Ctrl+F </head>  tag

5. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src='http://bloggertrickandtoolz.googlecode.com/files/bloggertricksandtoolz.com-scrolltopcontrol.js' type='text/javascript'></script>                           

5.Now Click Save Template

Special Thanks : Sameera Chaturanga

1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> tag

<style type='text/css'>                                 

#Bttoolz Author Box {                                  

background: none repeat scroll 0 0 #EDEDED;                                    

padding: 10px;                                     

margin-top:10px;}                                     

.authoravatar {float:left;margin-right:10px;padding:4px;background:#ccc;border:1px solid #222222;}                                 

.postauthor {float:left;}                                  

</style>

4.Now Scroll down to where you see <data:post.body/> tag.

5.Copy below code and paste it just After <data:post.body/> tag.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------<div style='clear:both'/> <div id='Bttoolz Author Box'><!-- Author Bio-->  

<!-- Code By templatedoctor.blogspot.com -->

<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.author == "NAME OF AUTHOR"'><img class='authoravatar' height='39' src='IMAGE URL OF AUTHOR' width='39'/><div class='postauthor'> <h3><a href='AUTHOR'URL Here'>NAME OF AUTHOR </a></h3><p> NOTES ABOUT Your Self </p></div><div style='clear:both'/> </b:if>-----------------------------------------------------------------------------------------------------------------------------------------------------------------

6. Now Save Template And You are done..

How To Add New Official Google +1 Button to Blogger

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </Head> tag

4.Copy below code and paste it just before the </Head> tag

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

5.Now Scroll down to where you see this <div class="post-header-line-1"> tag

6.Copy below code and paste it just before the <div class="post-header-line-1"> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='post-share-buttons' style='float:right;margin-right:10px;'><g:plusone size="small"></g:plusone></div></b:if>