How To Add JS-Kit Rating to Blogger

Hi,This is very cool gadget. this gadget allow to your visitors to rating your blog posts. so i think this is very important gadget to every bloggers. this gadget given by js-kit.com. i think thsi very cool and charm widget! please read this steps and add this gadget to your blog..Thank You.

1.Log in to your dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates

3.Scroll down to where you see this

<data:post.body/>

4.Copy one of the code below and paste it immediately after the line <data:post.body/>

Code 1

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title">
</div>

Result :

Code 2

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title" view="score">
</div>

Result :

5.Now again scroll down to where you see the </body> tag.

6.Add below code just before the </body> tag.

<script src="http://js-kit.com/ratings.js"></script>

7.Save Templates

Now you are done

How To Add "Follow This Blog" Link to Blogger

How To Add "Follow This Blog" Link to Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: <data:post.body/>

4.Copy below code and paste it just after the line <data:post.body/> .

<p><a href="http://www.blogger.com/follow-blog.g?blogID=YOUR-BLOG-ID" target="_blank">Follow This Blog !!!</a></p>

NOTE: Replace YOUR-BLOG-ID with your real blogger blog ID.

Look at the example below.

<p><a href="http://www.blogger.com/follow-blog.g?blogID=2450319500557625029" target="_blank">Follow This Blog !!!</a></p>

Result:

Follow This Blog !!!


5.Click on "Save Templates" and now you are done.

Cheers.!


Picture From : www.bloggertrickandtools.com

How To Add HTML Picture Codes to Blogger / Basic

How To Add HTML Picture Codes to Blogger / Basic

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3cl7bATinvPDzr46d4yCD0d6e5hiY_kY-CG2Yfo92AQieVSf4FTh5wNfY0TMgQ_a6JXxRsjKNg4MeVyjscUe6icp24Oi3MM32agqVWdrkEQsx93SBzaxfTB8YdrGY34TzGbROd81OQnY/" width="125" height="125" alt="Blogger tricks and toolz" />

Look at the example below:



4. Now Click on Save "Html Java Script" and You are done..

Cheers







Picture From : www.Bloggertrickandtoolz.com

How To Upload/Install a Blogger Template

Hi guys` today i'm gonna show you How To Upload/Install a New Blogger Template To Blogger..this very easy job..so please download your new blogger template to your computer. If the template is contained in a zip file, ensure you have extracted the XML template.

How To Upload/Install a Blogger Template.

1.Login to your Blogger Dashboard.

2.Click on "Desing".

3.Click on "Edit HTML".

4.Click on "Browse".

5.Now select your new blogger template file and click on "Open".

 6.Click on "Upload".

7.Now confirmation message will appear.Click on "KEEP WIDGETS".

You are done.

Picture from http://icons.mysitemyway.com/free-clipart-icons/1/blogger-logo-icon-id/125732/style-id/907/matte-white-square-icons/social-media-logos/

How To Check Your Web Page Load Time

This is cool system to check your web page load time..do you  want  check your web page load time please click below link and check it..Thank you.

Website Speed Test

How To Add Author info Widget in Blogger

How To Add Author info Widget in Blogger

1.Log in to your dashboard-->Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: ]]></b:skin> Tag.

4.Copy below code and put it before ]]></b:skin>

.author_info {
float: left;
width: 533px;                 /* Set Width of Widget As you want */
padding: 10px;
border: 1px solid #a1cb26;    /* Border of Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6;          /* Background Color of Widget*/
}
.author_info h3 {
font-size:17px;
color:#001530;                /* Text color of "This Post is Written" by */
margin-bottom: 5px;
}
.author_photo {
float: left;
margin: 0 10px 0 5px;
}
.author_photo img {
border: 3px solid #ccc;       /* Border color of Image*/
 height: 100px; width:100px;  /*Height and Width of Avatar of Author */
}

5.Now Scroll down to where you see this: <data:post.body/>

6.Add Following code after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjXujFQbR1tSalJQUxCsubU3XO1wRnH4NEWbVtJUyzca5hvOQIhrewvO3zUVRY2RIe5LGdYO5sy1LGdonnur93rzQ_DZK7o45xiEm7RBS_tUe47TQ46TkH88UFfpo2jbfIfsS7DWiaCo/'/></div>
<h3>This post is written by:<a href='http://www.bloggertricksandtoolz.com'>Sameera</a> </h3>

<p>I am Sameera and write trick and tips on blogger, wordpress and different hacks. <a href='http://www.bloggertricksandtoolz.com/about'>Click Here</a> to Know more about Author.</p><p>If you like This post, you can follow bloggertricksandtoolz.com on <a href='http://twitter.com/bloggertoolz'><b>Twitter</b></a> or Be fan on <a href='http://www.facebook.com/pages/Blogger-Tricks-And-Toolz/142779799101916' target='_blank'><b>Facebook</b></a>.</p>
</div>

</b:if>

Note: Change Read color to with your content and change green color to your prefered Text.

7. Click Save Template and you are almost done.

Cheers

How To Add Back to Top Button for Blogger

How To Add Back to Top Button for Blogger

1.Login to your blogger dashboard and go to Desing --&amp; Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<!--Back to top Start bloggertricksandtoolz.com--><a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzMK4JJknB4zvTGxG2RTW8yiMX-gxnJEjz8-4-HcKsjpxBEXE3CPZCwckKSOnq-6JHy_rGJbVlUkrzSO6DYVSMrinQ4uhGF3CI5W9RHSeqUIBPWFNInt5UgGOeU15r-GTdL5zl8_Vefw/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UjadZlSmtKYiCTb3pgPK3G9utkR9lM28CIEtfI_kL2ae8nqtp01s59ML8RSIDesw08KMPuU1OgosoOLUVh1cn3Npz0cLCbiAs4vZaiuhyY1gZ6j6Y-gsHgmFZ39QLFUzA6oaOO_G4Bs/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhyphenhyphenLsXQ81r-D99kT-dMyI8_iItETfYxLoM0_xe8MSPqbyoX46CUZ5xS7Ji9Rbs81ei2TbW_pnKB89p5g6G3b1JewmLYX1fgk9qIkIs8fWGTEJI-wIOUyRwHrSFGmBoI8fI96N6DcTrRQ/&#39;" /></a><!--BACK2TOP-IMAGE-STOPS--> 
<!--Back to top End bloggertricksandtoolz.com-->

Note: Change Back to Top Button name as you like

4.Now You are done.

Cheers

How To Compatible Blogger Blog With Mobile Phones

Many blog readers is reading blog using mobile phones with opera mobile browser. but many blogs cannot view on mobile phones because it is not a comaptible with mobile phones. so this tutorial i'm gonna show you how to compatible your blog with mobile phones. it is very easy to do' so guys follow the simple steps below thank you!

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

2.Scroll down to where you see below code:

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

3.Now copy below code and paste it just before the above line.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

4.save your template and you are done.

How To Add Three Columns To Your Blogger Footer Section

Hey! Friends`are you know how to add 3 coulmns to your blogger footer section..many websites and blogs has three column footer.  footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design. there are only 6 steps to do this..this footer hack is specially for blogs that have different  widths and styles.ok..try this very easy tutorial.. i hope you like this blogger hack..thankyou..

1.Log in to your Dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

4.Replace the line <b:section class='footer' id='footer'/> of above code with below code

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

5.Now find the </b:skin> tag in your template

6.Immediately before above line, add the below lines of code

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

7.Now Save Templates,Your Are done

How To Add Cool CSS Style Demo and Download Button to Your Blogger

How To Add Cool CSS Style Demo and Download Button to Your Blogger



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'>
.button {
   border-top: 1px solid #97b9de;
   background: #c417d4;
   background: -webkit-gradient(linear, left top, left bottom, from(#133466), to(#c417d4));
   background: -moz-linear-gradient(top, #133466, #c417d4);
   padding: 7px 14px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 20px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #8d00d4;
   background: #8d00d4;
   color: #ffffff;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
</style>

4.Click on Save Template,

5.Now click on 'Add a Gadget' on the sidebar.

6.Select 'HTML/Javascript' and add the one of code given below

<a class="button" href="YOUR DEMO URL HERE" rel="nofollow" target="_blank">Demo</a>&nbsp;&nbsp;<a class="button" href="YOUR DOWNLOAD URL HERE" rel="nofollow" target="_blank">Download</a></div>

Note: Replace YOUR DEMO URL HERE, Demo, YOUR DOWNLOAD URL HERE , Download , with your content.

7. Now Click on Save "Html Java Script" and You are done..

How To Remove The Blogger Navbar

How To Remove The Blogger Navbar  

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

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

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

#navbar-iframe { height:0px; visibility:hidden; display:none }

4.Now Save template, you are done.

Cheers

Embed Text Resizing Widget to Blogger

Embed Text Resizing Widget to Blogger

1.Login to your blogger dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.


Style 1:

Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">+</span></a>

Style 2 :

Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">Small</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">Medium</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">Large</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">Larger</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">Largest</span></a>

Look the example below:



Style 1:

Change Text Size

+ + + + +


Style 2:

Change Text Size

Small
Medium
Large
Larger
Largest



Now you are done.

Cheers !

How To Change Blogger Favicon

How To Change Blogger Favicon

1.Log in to your dashboard-->> Desing- ->> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see <title><data:blog.pageTitle/></title> tag.

4.Now immediately after that add below code

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Note: Replace URL of your icon file with your icon file Url.


Look at the example below:

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNIN9CcRtfVFX1Mw8f_k5ayIWlDCGO8_Hip0SgYYfsdkwhoXux6hBd4VAxAQieE_CQ_9vd1CWRq8MAWcvC0s0b6trWZSr7Exv59HhVFC8lEvhh2e2Vu20rRr1-5kaoaHlwGskRLDjHGQ/' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

5. Save your template You are done.

Cheers.!

How To Add "Follow This Blog" Link to Blogger

How To Add "Follow This Blog" Link to Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: <data:post.body/>

4.Copy below code and paste it just after the line <data:post.body/> .

<p><a href="http://www.blogger.com/follow-blog.g?blogID=YOUR-BLOG-ID" target="_blank">Follow This Blog !!!</a></p>

NOTE: Replace YOUR-BLOG-ID with your real blogger blog ID.

Look at the example below.

<p><a href="http://www.blogger.com/follow-blog.g?blogID=2450319500557625029" target="_blank">Follow This Blog !!!</a></p>

Result:

Follow This Blog !!!


5.Click on "Save Templates" and now you are done.

Cheers.!

How To Add Table of Contents to Blogger

How To Add Table of Contents to Blogger

1.Login to your blogger dashboard--> desing and go to Edit Posts-->> Edit Pages

2.Now Create new page

3 Copy below code and paste it your page.

<script src="http://bloggertrickandtoolz.googlecode.com/files/Bloggertricksandtoolz.com.txt">
</script> 
<script src="http://btricks-tools.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 
</script>

Note: Replace http://btricks-tools.blogspot.com with your blog site Url.

4. Now Save your page you are done.

How To Add Back to Top Button for Blogger

How To Add Back to Top Button for Blogger

1.Login to your blogger dashboard and go to Desing --&amp; Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<!--Back to top Start btricks-tools.blogspot.com--><a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzMK4JJknB4zvTGxG2RTW8yiMX-gxnJEjz8-4-HcKsjpxBEXE3CPZCwckKSOnq-6JHy_rGJbVlUkrzSO6DYVSMrinQ4uhGF3CI5W9RHSeqUIBPWFNInt5UgGOeU15r-GTdL5zl8_Vefw/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UjadZlSmtKYiCTb3pgPK3G9utkR9lM28CIEtfI_kL2ae8nqtp01s59ML8RSIDesw08KMPuU1OgosoOLUVh1cn3Npz0cLCbiAs4vZaiuhyY1gZ6j6Y-gsHgmFZ39QLFUzA6oaOO_G4Bs/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhyphenhyphenLsXQ81r-D99kT-dMyI8_iItETfYxLoM0_xe8MSPqbyoX46CUZ5xS7Ji9Rbs81ei2TbW_pnKB89p5g6G3b1JewmLYX1fgk9qIkIs8fWGTEJI-wIOUyRwHrSFGmBoI8fI96N6DcTrRQ/&#39;" /></a><!--BACK2TOP-IMAGE-STOPS--> 
<!--Back to top End/btricks-tools.blogspot.com-->

Note: Change Back to Top Button name as you like

4.Now You are done.

Cheers

Most Useful Blogger Post Editor Keyboard Shortcuts List

Most Useful Blogger Post Editor Keyboard Shortcuts List

Keyboard Shortcuts	Function
CTRL + Z	To Undo
CTRL + X	To Cut
CTRL + C	To Copy
CTRL + V	To Paste
CTRL + B	To Bold
CTRL + A	To Highlight all the text
CTRL + S	To Auto Save and Keep editing
CTRL + D	To Save as Draft
CTRL + F	To Find a Word or Phrase
CTRL + G	Indic Transliteration
CTRL + Y	To Redo
CTRL + U	To Underline
CTRL + I	Change To Italic
CTRL + P	To Publish the post
CTRL + SHIFT + P	To Preview the post
CTRL + SHIFT + A	To Insert Hyperlink

Blogger Updated New Interface / How to Get Started

Blogger Updated New Interface / How to Get Started 

Blogger updated new Interface, new interface is available for all Blogger in Draft users, It looks very cool, see below more screenshots.













How to Get Started this ? please visit draft.blogger.com  and  see a your blogger account new Dashboard looks,

Cheers.!

How To Add HTML Link to Your Blogger / Basic

How To Add HTML Link to Your Blogger / Basic

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<a href="http://www.http://btricks-tools.blogspot.com//">Blogger Tricks and tools</a>

Look at the example below:

Blogger Tricks and toolz

4. Now Click on Save "Html Java Script" and You are done..

Cheers

How To Move Blog To Another Account Blogger

Many newbie blogger like me not know how to move blog or sites to new blogger account, so why this important because if in future you want change account email, sell the sites, or lost password on old account this is good ways to make you still have your blog And now how to do this, you can see all images bellow and do step by step with read some tips too :

Select Blog

choose blog or sites you will move to new account

Permission

After that you can go to setting >> permission

Added New Email

Added new email address and make sure that email address done have a blog or done register at blogger.com

Confirmation Email

Click link at email and you will direct to blogger.com and see blog you moved to new account.

Change Status or Level

At blogger you just can change two type status : administrator and author,

if you as Author you can't delete post, moderated comment, change setting blog or many think again you can't do and you just can make post.

if you as Administrator you do all setting, all moderated and you is owner that sites or blogs.

on this step you just as Author and you must change author to grant admin privileges to make you as Administrator.

Remove Administrator From Old Account

After blog or sites have 2 administrator you must delete one of that email because not good have more admisnistrator if you can't trust account or other people on your sites, so you can remove that by Revoke Administrator or Remove.

Finish And Your Blog Moved to New Account

You can see on top dashboard to make sure your blog moved to new account and after that you can ready blogging with new account.

Benefit

• You can added other people join to make post or your blog as guest auhtor
• You can sell sites without lost your important email or biodata
• You can have backup sites on other account if you lost password someday, or any incident you not like