Cool Leaves Social Bookmark Buttons For Blogger

This post helps you to,How to add leaves social bookmark
button for below your blogger post

1. Log in to blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates”

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste  below code Before  ]]></b:skin> tag

.social {
padding: 5px 5px 5px 5px;
margin: 5px;
text-align:left;
font-family:Trebuchet MS;
font-size:12px;
height: 78px;
}
.social img {
margin:10px 2px 0px 2px;
padding: 3px 2px 2px 2px;
text-align:center;
border:1px solid #cfdde9;
}
.social img:hover {
border:1px solid #abcce9;
}
a.opacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}
a.opacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7; }

5. Now Find this tag also by using Ctrl+F
                              <div class='post-footer-line post-footer-line-1'>
                                  If cant find above tag try to find below tag

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

6. After found one of above code, paste below code after it

<div class='social'>
<strong> Share this </strong><a class='opacity' href='http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrULYuH4fK6FOynQ4sUiJTNTc8uY-E7QKHZnLou2VGz2K7ELl86HkSi5VrjWPhjdUeSjDkhPMtH0iV_QoaEvAAPPW0WpvoFbgRDlcmeMsR3DKEPWxoFiDXOpPII2g2e8eZvjcE6wGtH50/s1600/Facebook.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a><a class='opacity' href='http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyKp8I4Aa3ZMVzYjVqLuLwAI-ItYVE7elgITqe8rqmow8TQlCTijiio3T6KZDvJub0RaMZLomtKb5Jrps2kGknrO3ltRW3xC48ynMBIvNOYX_15JlGz5aoWzxz53VfrxbqMm2WZApcxJQ/s1600/Twitter.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2-UP1OqJ7730jmeKOOFKRssC5IB-GNFX_L_XuSfqEpHpFQM8c-MrpDpb9JeaZ9GEAvYX4NxaREhfaXE7sgmLcKao6mXGrPLx4U5zQaM5NeU2lJGyKWWe4JS-TR3ZVOHw1xdtgNZ7LOo/s1600/del.icio.us.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEauFTbkyYlxJTONNEIwklKbXLBeqzn6aOK6NIvCor0SSRmTnxH7aOH6TMsULnTvWKko_54yTM8mbhC7yK9kP9lyjuLYfqP8v3duMF7MDDcO_AjMBhJUXgtE1DTSiNjPlXenIMfyIF9I/s1600/StumbleUpon.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXHb-9pPpOTew7xKAbwh4LQUccfF9uZPxbqKzmWPQmUK7-igA_PaDhlRzIZ0IX_Lbdv1pSsqI3ZgD_3kNsr4qdCeBBbKEnrtZ19U5N4k0Rl9IZS3eq-VparzufbLcJ9wMyBNgKWSc9MgI/s1600/Digg.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzlqjmcUFU2DwwjuTcNlq4yTfhOyZSlrxc6foUihdMJFb4hHs67vKaT3SsMHIRyuokyDRbtwsrvlT7ri_fOUeYSYGsbtbY4pWuTJot6G1aGuzFIb8BwUNAqyIUEoGlc6u7OPlRMVqjuM/s1600/Technorati.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCg-udGCgaXeHxgtRITHwKNuORh6dry9XNMlFulNi3d0WKMTDAXkvqtsCDY2efr_TegB59hrxbWJ8jvEHBEsh7wLYU7IlGN_XiHdC4bcs8tcS7EOGfjYlERTwo3ieP4bircpOdnK3pUM/s1600/RSS.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fRNk0pBn4Pst-XnzLVFSZmzCAPTLcncTMLVjjx7jET9hSmi62GDD14zVGUsQhlZyPzK51PF1wEAG-eddowUVDuK1ktzrXwM7K0zHQy_ks9Y4wFdg72OjGPw2P9cT59IC5csf9a-x4C0/s1600/Reddit.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
</div>

7. You are done. Cheers

Continue reading →

How to add floating social subscribe buttons for blogger

This is a cool unique subscribe gadget with nice buttons.
Add to your blog and make it attractive.

1. Log in to blogger and Go to  Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<div style='position: fixed; bottom: 1%; right: 1%;'>
<table border="0"><tr><td>
<a href='facebook profile url' target="_blank"><img alt="Find Us On Facebook" border="0"style='background:transparent;border:none;' title='like us on facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX36TSc783zyp0Z5Ez93kYlPUh7RIzCsvEZ6osRtDEAa_EbZ1sD2itKyL0jo55vwQS_QvUCMuBH_llg-558LB8u6F2FrSwI0SWGZdsZ6nbB6sMvVcunCtIMeyZbbXUFrmB6VERnuFweIg/s1600/facebook-icon.png" /></a>
<a href='http://twitter.com/your twitter username' target="_blank"><img alt="Follow Us On Twitter" border="0"style='background:transparent;border:none;' title='follow us on twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5i9i-KXDSingBqmAPrgeA1ZJ1PDPosjlb0LRCg5I7tlAEmdPAwh1UK2lf9Hr6iXXgBVLIv9ItII_2cFvQc3l2O91j9_rxtSqI8nOgpyKRlk_GqCOYlK1T3-1UvDe1j-_SfI3JerRzrhc/s1600/twitter-icon.png" /></a>
<a href="http://feeds.feedburner.com/YOURFEEDNAME" target="_blank"><img alt="Rss Feed Options" border="0"style='background:transparent;border:none;' title='subscribe us' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbN-rCFOWFM6Yn9r-r1I_f1uSDHkLaA6AWCeqALIessTSOS58YsVlU23OyDzb9H6xmDg1Lts4w-QJIcLGXIKXhqq5T_EcVEp2D-jEypwzz6wjOZpDUJm2EZiAo32g5R0R4-b5UdKME2k/s1600/rss-icon.png" /></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=yourfeedname&loc=en_us' target="_blank"><img alt="Subscribe Via Email Rss" border="0" style='background:transparent;border:none;' title=' email subscribe'src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpmHR3Ac1pEhPfJT1y-5Ft4EJfVnSkhqvdfn4ljsbdAcF3dtzhOSH4FMMonXvfMvB_abcFCiu4hfmEXYUYCk13yUqSs01CP0Rg4KQ_LA8vLYFP_nofI1QCpECKs3gBIvhjaCvF8F5yx8/s1600/rss-mail.png" /></a>
</td><td>
</td></tr></table>
<div style="clear: both;font-size: 8px;text-align:center;margin-top:-10px;"><a href="http://ehowportal.blogspot.com/2011/05/how-to-add-floating-social-media.html"><p>Get this</p></a></div>

</div>

* Repalce  facebook profile url with your URL
* Repalce  your twitter username with your URL
* Replace YOURFEEDNAME  with your feed name
* Replace yourfeedname  with your feed name

4. Now save your HTML/Javascript'.

you are done.

Continue reading →

How to add Google +1 (plus one) Button to your blogger

This is a newest Button that the Google announced few day ago.
 It also similar to Facebook like button and twitter button.
You have to log in  Google account to like this button.there have
 different size of Button . add it as your like.

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

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

4. Paste Below code before </head> tag

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
 {lang: 'en-US'} </script>

5. If you want add this button  Below your post title,or below post body.

6. Find this tag by using Ctrl+F   <data:post.body>

7. Paste below code before the <data:post.body>  tag  for add button to below post title
    Paste below code After   the  <data:post.body>  tag  for add button to below your post.

<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>

There have different size button, If you want to change button size. Select Button below
and Replace standard word (above code ) with your button size. you can see the button list below.
(small , medium , standard , tall )

8. Now you are done. Enjoy with New +1 Button

Continue reading →

How to add floating share buttons to blogger

How to add floating share buttons to blogger

1.  Log in to your blogger account and Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below one of below code.

<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;right:0;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div>
<div id="sharebar">


<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</div>
<div class="sbutton" id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>
</div>
<div class="sbutton" id="su">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5">
</script>
</div>
<div class="sbutton" id="digg">
<script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script>
<a class="DiggThisButton DiggMedium" href=""></a>
</div>
<div class="sbutton" id="gb">
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a>


<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggertrix.com">Get widget</a></div>

</div>
</div>
</div>

4. Save HTML/Javascript. you are done.

Continue reading →

How to add Newest Facebook send button to blogger

How to add  Newest Facebook send button to blogger

 This is newest button from blogger. Earlier there was a like
button.Its just like button,we can add any comment on there
.But this button helps you to add comment, like facebook wall.
 try this.This is newest and cool button to your blogger.

You can see DEMO On this site.(under post tile)
Try to click it and share it to your wall.

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

*If you want to add this to after post header
3. Find this tag by using Ctrl+F  
<div class='post-header-line-1'> or <div class='post-header-line-1'/>


*If you want to add this to post footer
4. Find this tag by using Ctrl+F   <div class='post-footer'>
 
5. After found one of tag, paste below code after above tag.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send expr:href='data:post.url'></fb:send>

6. Now save your template.cheers..you are done.

Continue reading →

Add stumbleupon share button with counter for blogger

Add stumbleupon share button with counter for blogger

This gadget help to share your post with stumbleupon.there have few design button.add to your blog.

 Button 1:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>

Button 2:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>

Button 3:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script>

Button 4:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Button 5:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=6"></script>

Button 6:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>

Note:
 for example  i took 4th design.you can change

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

this code with your design.you can see above designs


1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F  <data:post.body/>

4. If you want to add this button above your post, paste below code before, <data:post.body/>tag

5. If you want to add this button below your post paste below code after <data:post.body/>   tag

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

6. If you want to add it to home page only.delete <data:post.body/> code and paste below code

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

data:blog.homepageUrl'>

<data:post.body/>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</b:if>

7. Now click  preview and click save template button.
   (when you edit template first check it with clicking preview.
  because it help to check is there have error before saving)

8. Good luck . you are done.

Continue reading →

How to make Bubble Effect for blogger image/icons

How to make Bubble Effect for blogger

See below Images for Demo

• 
• 
• 
• 

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

/*URL: http:www.bloggertrix.com */
.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{

display:inline;

width: 65px;

height:60px;

}



.bubblewrap li img{

width: 55px; 

height: 60px; 

border:0;

margin-right: 12px; 

-webkit-transition:-webkit-transform 0.1s ease-in; 

-o-transition:-o-transform 0.1s ease-in; 

}



.bubblewrap li img:hover{

-moz-transform:scale(1.8); 

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

} 

5.Now paste this HTML code where you want to add your images.

/*URL: http:www.bloggertrix.com */<ul class="bubblewrap">

<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Add to Twitter" /></a></li>
</ul>

6. If you want Change above Red color URL with Your Icon URL

7.Now you can add this to your page.thanks.

Continue reading →

How to make image hover (mouse over button)

How to make image hover (mouse over button)

Image hover is a mouse over button. when you move
courser to button,you will see some animate on there.
you have to use two image for this.lets try it.

Image 1

Image 2

1. Log in to your blogger account and Go to "Posting" >> "New Post"

2.  Paste below code

<a href="http://www.bloggertrix.com/">
<img src="http://i530.photobucket.com/albums/dd341/herrolim/donlot.png" 
onmouseover="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlotOver.png';" 
onmouseout="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlot.png';" /></a>

3. you can change http://www.bloggertrix.com/ with your link

done.

Continue reading →

Simple Facebook Widget Tools

I think this post will helps you to who want to  add
Facebook tools for blogger.

Photo Badge

     Creating a photo badge to your blogger.

Profile Badge

     Creating a profile badge to your blogger.People can get your information about your site.

 Fan Badge

     Creating a fan Badge.

Share Button

     Easy way to share your post on Facebook.

 Page Badge

    Share your Facebook page.

 Fan Box

    Easy way to become fan from your site and allow to view your Facebook page.

 Live Stream

    Allow to Facebook users to share the post.

 Publishing to Facebook

    Allow to your users to publish their content.

 Comment Box

    Let your users to comment your post from their account.

Enjoy it.

Continue reading →

Simple Facebook Widget Tools

I think this post will helps you to who want to  add
Facebook tools for blogger.

Photo Badge

     Creating a photo badge to your blogger.

Profile Badge

     Creating a profile badge to your blogger.People can get your information about your site.

 Fan Badge

     Creating a fan Badge.

Share Button

     Easy way to share your post on Facebook.

 Page Badge

    Share your Facebook page.

 Fan Box

    Easy way to become fan from your site and allow to view your Facebook page.

 Live Stream

    Allow to Facebook users to share the post.

 Publishing to Facebook

    Allow to your users to publish their content.

 Comment Box

    Let your users to comment your post from their account.

Enjoy it.

Continue reading →

Twitter Widget Tools For Blogger

Twitter also popular social website in the world.If put
twitter widget to our blogger easy to to increase readers
.So your blog will become popular.Try these tools.

Tweet me Button

This widget is more powerful.Its allow to users to
share your post easily.It count
 live count of  the amount.

Tweeter 

 Another twitter button to your blogger.

Re Tweet Button

This is also similar to Tweet me button.Its change in color.

Tweet Counter

This is also good widget to your blogger.it count numbers time has been tweeted
 you can do more  customize.It can change colors,borders,etc 

          

Twitter Counter

This widget show how many people following you on twitter.

Tweet Stamp

This widget show your latest tweet.Have more customize.

Tweet Remote  

  This widget show which twitter users visited recently your blogger.

Chris' Original Twitter Badge

This is snazzy looking Twitter badge.its load in no time created by cheris

Twit Twoo

This widget display twitter status.
Twitter Tag
This is automatic update twitter image for blogger.

Twitter Gif

Create Twitter badge to your blogger

Twitter Profile

This widget loop through your tweets.It have more customization.

Add Twitter To MySpace

           This is twitter Gadget for myspace                            

Twit Sig Badge

This is specially display your booger update.

Go To Web badge

             This gadget helps to  directs readers to your twitter page when clicked on.

Tweet Gadget 

This is show your last update in your blogger.

Twitterati Badge

This gadget shows your twitter friends.

Tweet Snap

This create an image to to your twitter account and it will display latest tweet.

Enjoy it

Continue reading →

Twitter Buttons And Icons

You can copy and paste this button and icons for
your site easily.After you can use it for various purpose.

Twitter Button For Blog Marketing

31 Buttons

Happy Birds
4 Twitter birds

Randa Clay Graphics
18 Twitter buttons

Tweet Vector Icon Set
4 different photos

Twitter Bird Icon Set
6 Quality birds

Twitter birds

8 Flying birds

Twitter Graphics
16 twitter Graphics

German Twitter Buttons
10 twitter buttons

Twitter Icon Promo Pack

Tweet birds icons
2 more icons

Social bird Icon Set
20 icon set

Enjoy it..

Continue reading →

How to add share this social bookmark to blogger

How to add share this social bookmark to blogger

1. Log in to your blogger account and Go to  Design >> Edit HTML

2. Make sure put check mark on "Expand Widget Templates"

3. Find this tag by using Ctrl+F    <data:post.body/>

4. Paste below code after the <data:post.body/> tag

<b>Share this post :</b><br/>
<div class='spacer' style='border-top:solid 0px #DEDEDE;'/>
<table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoU5s5y72Qy9vi4u3Z3KcaHaqmrsca9a1d-IekWmHM_XclnlFCAv1C6yuYaHh_CZY64XzWF9rnXGG5kYfo7nE2xBvzsNRH9C-Od-lIr5iQKUyG_CDTH7MVUwdkAMLkV_v4AKryhAzc4nM/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.facebook.com/sharer.php?&amp;u=&quot; + data:post.url' target='_blank'>Share on Facebook</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwp1CQitEZNFyYbReuQNIWV5ncZzMMQHFw7mHSmHIC8JGW559ZjTxjQw1uUnyZSqYBDswbl_fqYdaxKxpWYwmbNvWc3nhhoUuPQYNJebd0AZ7yJlHU6T6xPj6IwsGTgKfB3jlyD91Tpk/'/></td>
<td height='24'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Share on Twitter</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV6WgqsIVcO0L4V6MH1_EYwDA2ziJgSUttiLmATI1dYy8ksgsOgSMUFVgZaOrLdj8vofm3zCiJEVSaLhOt0NCjiJ6a7raxb0rja3ypCJChD9Z-qAZ5J7WfBJKcDtH_l438UyraXZJ1WE4/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.stumbleupon.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on StumbleUpon</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuTqYL0icgdJjGtn8gn1qFydS9zGQB1rfiuhJIkEBIDBrUO1YS_n4le4qavFtt1YcVZFJHUxtP2ozAWr9KIZMkGbPTab30a5-FpH3J4Qhdsez-UtvnnSOahVJk59VVn4goMqhD7B-7yI/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://del.icio.us/post?v=4&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyEjMhzf3uXSDC31pduJt_28GOv808n_m1LzyPAw0BLviGJR0fgcFy1p0VLxUvj9_kNXsXbDSByaNoQZQ37T-DfPhqJwY05MFbfNxhBhmWWyXUH-hWBpyaLVM-ZzMEdMgPMN4xIIh9xU/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Reddit</a>
</td>
</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8eKRG3WVLqH6shYpL7IdLCNX-oXhPbHBhoBVInEzAMdym8mXq8LkBoRNB2NTR0iJKayOhpXTvyKFFjKMdNPGbiVeRq7r50aG-8cXIdgxDc9oH7Xdyj2Si58qbXV-ttYdwl-NQAxD-SOI/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Digg</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvzupy33hKwfk82t3_ihe6NDIBmhKJHeXiF23loe1aFrNt83MjfC6bVbrPhSjJ-veDZjCkYC07IzQ1PzcLSqRIvjHhez62JAazlikM5vSas7Zq-YRf0SrsVA95ZidlmFhTpODXfTONNA/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on simpy</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCy9V0C1-bMPzBRjJhtNb7DDqZ9DbaAUUUfSQ1R9_svl6axbcpVGFlO9ihQs-ns-e-K0OQUeElz8OKaYqKaLhth1ehWnzzEZIenKmZsMEq6Ba1MbkGoAe5to_1OJqB8SQM4TbtdLbQmfA/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://technorati.com/signup/?f=favorites&amp;Url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a></td>
</tr>
<tr>
<td height='24'><img alt='furl' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCMQa5P3oSuKZe2PrM59fo9NDS1uEiQGiIcvk72uYHoovNtZC7_unF8pojH874zsCsRhpspVedfMOZy6FUQXfDX_FcwJ4G-PJhEH0oqcC-qopNm-N7j255kr3WBR2klni4AiTMFll1CAY/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.furl.net/storeIt.jsp?&amp;u=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on furl</a>
</td>
</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9KTdvB30CU_SWYrnnH_QPHs1VizIaUze_PI0h7BmeCt6DiZ45-LEsi5L5pbUrH-oUIUhIMSpORoAuJTyjP86vcptMjPpKwMMCcMIYZR98SY12rfE3dCQ9D8HVJJJpihC0Wfcgoa-rsY/' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/bloggertricksandtoolz' target='_blank'>Subscribe to Feeds RSS</a>
</td>
</tr>
</table></td>
</tr>
</table>

5. Now click preview and save the template.you are done.

Continue reading →

How to add CSS image moving menu to blogger

How to add CSS image moving menu to blogger

Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2.  First of all download your full template.because if you make some wrong
    you can recover it.

3. Put checked marked in Expand Widget Templates

4. Find this code by using  ]]></b:skin>

5. Paste below code before ]]></b:skin> code

#imagemove {            
        padding:0;             
        margin-left:30px;             
        list-style-type:none;             
        height:120px;             
        }             
#imagemove li {             
        display:block;             
        float:left;             
        width:120px;             
        height:120px;             
        position:relative;             
        margin:0 15px 7px 0;             
        }             
#imagemove li a {             
        display:block;             
        width:120px;             
        height:120px;             
        background:transparent;             
        overflow:hidden;             
        position:relative;             
                padding:5px;             
        } 
#imagemove li a img {            
        width:100%;             
        height:100%;             
        border:0;             
        margin-right:30px;             
        padding:5px;             
        }             
#imagemove li a:hover{             
        position:absolute;             
        left:0px;             
        top:20px;             
        padding:5px;             
        width:120px;             
        height:120px;             
        z-index:100;             
        }

6. Now click save template.

7. Go to Page Element and click Add gadget

8. Click JavaScript/HTML and paste below code.

<ul id="imagemove">              
<li><a href="http://www.bloggertrix.com/"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>

<li><a href="http://www.bloggertrix.com/"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>

<li><a href="http://www.bloggertrix.com/"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>  

<li><a href="http://www.bloggertrix.com/"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>  

<li><a href="http://www.bloggertrix.com/search?max-results=200"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>               
</ul>

* Replace http://www.bloggertrix.com/ with your target URL
* If you want change icon replace green color link with your icon URL

9. Now click save, you are done.

Continue reading →

How to add Simple search box to your blogger

This gadget will help to search post from your website.so visitors
 can easily find the you post by searching, try this.

1. Log in to blogger and Go to  Design >> Page Element

2.Now click Add Gadget and select the HTML/Javascript

3.Now paste below code.

<p align="left">

<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">

<strong>NAME OF YOUR BLOG<br/></strong>

<input id="b-query" maxlength="255" name="q" size="20" type="text"/>

<input id="b-searchbtn" value="Search" type="submit"/>

</form></p>

4. Replace  YOUR BLOG URL with your blog URL
    Replace  NAME OF YOUR BLOG with your name of your blog

       Blogger trix


 

Continue reading →

How to add Facebook Twitter Rss follower counter for blogger

How to add Facebook Twitter Rss follower counter for blogger

1. Log in to blogger and Go to  Design >> Page Element

2.Now click Add Gadget and select the HTML/Javascript

3.Now paste below code.

<style> 
.rss-mbt { 
    background: url(https://lh5.googleusercontent.com/_u4rBCfM4eII/TXM3kMMZ6iI/AAAAAAAABWs/mvD4oZKpcYA/RSS1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.twitter-mbt { 
    background: url(https://lh4.googleusercontent.com/_u4rBCfM4eII/TXM4FmiiE3I/AAAAAAAABW0/aXFjV0nLT7Q/TWITTER1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.facebook-mbt { 
    background: url(https://lh3.googleusercontent.com/_u4rBCfM4eII/TXM3FmsFCZI/AAAAAAAABWg/2fp5bNd5HWY/FACEBOOK1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.follower-rss, .follower-twitter, .follower-facebook { 
    font-family: Georgia,  sans-serif, Times; 
    font-size: 1.1em; 
        font-style:italic; 
        color:#289728; 
}
.follower-rss span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#FFB93C;     
}
.follower-twitter span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#6DB6E6;     
}
.follower-facebook span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#3889BA;     
}
</style>
<div class="rss-mbt"> 
<div class="follower-rss"> <span>515</span> loyal readers 
</div> 
<a href="ADD RSS FEED URL HERE" rel="nofollow">RSS feed</a> 
| <a href="ADD RSS EMAIL FEED URL HERE" target="_blank" rel="nofollow">E-mail</a> 
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>                            
<a href="ADD YOUR TWITTER URL HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a> 
</div>                       
<div class="facebook-mbt">                        
<div class="follower-facebook"><span>260</span> followers                            </div>                            
<a href="ADD YOUR FACEBOOK URL HERE" target="_blank" rel="nofollow">Join us on Facebook!</a> 
</div>

* Replace  ADD RSS FEED URL HERE with your Rss feel URL
* Replace  ADD RSS EMAIL FEED URL HERE  with your Rss email URL
* Replace  ADD YOUR TWITTER URL HERE with your Twitter account URL
* Replace  ADD YOUR FACEBOOK URL HERE with your Facebook URL

4. Now click save . you are done.

Continue reading →

How to add pop up Bookmarking for blogger

1. Log in to blogger  and Go to Design >> Page Element

2.Click Add Gadget and select 'HTML/Javascript'

3. Paste below code

<a href="http://www.spiceupyourblog.com"><small>Grab Bookmark Gadget</small></a><a href="http://web.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/images/b2.gif" alt="Web Informer Button" style="border: 0" /></a>
<script src="http://s.web.informer.com/favorites-button.js?glass," type="text/javascript" charset="UTF-8"></script>

4. Now click save. you are done.

Continue reading →

How to Add linkedin share button to Blogger

1. Log it to your blogger and go to Design >> Edit HTML

2.Make sure you put check mark to “Expand Widget Templates”

3.Find this tag by using Ctrl+F <data:post.body/>

4.Paste below one code(as your like) ,before <data:post.body/>

Horizontal Count Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script
 type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="right"></script>
</div></b:if>

Vertical Count Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script
 type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script>
</div></b:if>

No Count Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script
 type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share"></script>
</div></b:if>

5. Now click preview and click save template . you are done.

Continue reading →

How to Add Stylish Bookmark for Blogger

This is cool social bookmark widget.your visitors
can easy to share your post. try this.

1. Log it to your blogger and go to Design >> Edit HTML

2. First,download the present template as a backup.

3.Make sure you put check mark to “Expand Widget Templates”

4.Find this tag by using Ctrl+F         ]]></b:skin>

5.Paste below code ,before  ]]></b:skin>  tag.

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}
ul.sharebox {
margin:0px;
padding:0px;
list-style:none;
position:relative;
display:block;
}
ul.sharebox li {
float:left;
margin:0 0 0 0px;
padding:0px;
position:absolute;
}
ul.sharebox li a {
margin:0 0 0 -24px;
display:block;
}
ul.sharebox li a:hover {
margin:0 0 0 -8px;
}
ul.sharebox li img {
border:none;
}

6. Now find this tag also   </head>

7. After found it paste below code ,before </head> tag.

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 12- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>

8. Now find again this tag <data:post.body/>

9. After found  it paste below code, after <data:post.body/> tag.

<ul class='sharebox' id='sharebox'>
<li><img 
alt='Share this' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOiVp9mQ_dzVMYeAB1prSyu5qaQ6hQ7XR7uS5qC5i8yOD6NU17l9XdIymt5QqNBOyx6bQCsJLZuGrjnWO3dWTMGK6OA4YTtbT69uAQnu1kRcGoRCaYluy5bM8EfUOOpRu9om4B_2RF8sQ/s400/sharethis.png'/></li>
<li><a
 expr:href='&quot; http://digg.com/submit?url=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Digg' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj58Nk3IWYalLpMnVzygYW58q1GhurfBIyhNB8h2GObHhf4wniXNRV3o3NyHToazmGgYsQkFGiJllZJ8uYMU6brtrC9BxFkpyFgECaCCt5wF3yVmMW91rovhY48jQiwdCIhk9amqA4moME/s400/digg_48.png'/></a></li>
<li><a
 expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; +
 data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to StumbleUpon' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCy3suSQYktvpJKbDptM1uBaV2rnc_5IBvS6zH7KLfyeldOS6eedUCB2mBEtQ2Zp35Z4jk77JvSysq50f0XT_lqef1DD58N7dfgf3g2fGgY3V6g2im0uIiuypVwEvN1JKRAKdzeioxf8/s400/sumbleupon_48.png'/></a></li>
<li><a
 expr:href='&quot;http://del.icio.us/post?url=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Delicious' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK25zhDFnac8ifOZTd6KPJFFQy1G6syneG4Aerc9TCo79XOkooOO3Q0jpfg534XLM142zVsVlHJrA-cJu83BTUeyJN9Snl3nCBwq5PrBlu_eQFdQzA4PauST-4eLNa-SggxBKK-2qkgfI/s400/delicious_48.png'/></a></li>
<li><a
 expr:href='&quot; http://technorati.com/faves?add=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Technorati' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieVMVss2eUw-MzURoZDicNLAbzcHfMPXSec0_uQalD2V8uvUgZLjXMYFzmB-nH87VMK3vODxj0jmjWADCsDVyvfsMEhLVxMDjh9B8p48Al8nOsva6KZeIdFAVTK28QZJHV1abBUc_Qicc/s400/technorati_48.png'/></a></li>
<li><a
 expr:href='&quot; http://www.reddit.com/submit?url=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Reddit' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4MOE7q_50HyyRqtTno0qz_hwISoE6-ocfeHktNCXr-iZtMY_1N78jfd4dyPA46NFIUiwpAQhlth3d6b8fctn6cUUYA0MKGZZdRbd_JOcaXsDOBT6W9nIF1-ZgeODEOVXxWU094P1YbBs/s400/reddit_48.png'/></a></li>
<li><a
 expr:href='&quot; http://www.mixx.com/submit?page_url=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Mixx' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI98AlWmEtN4svLf3IfMxR-iDq3MS0h9GYjuh_OnMDQhnneGBvoTtPzvSm5JbK7DaxOiIVHXqlb7XwMX-Q73CosDlMeKNQV5Ny0Wk1-ZCnvE_jBMjcuOM3WSh0EfmoUuUxQl2A1sub8hc/s400/mixx_48.png'/></a></li>
<li><a
 expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot;
 + data:post.title + &quot; &quot; + data:post.url' 
target='_blank'><img alt='Sumbit to Twitter' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOI1MmkbFsoIq6jJKRbmSZ-HYIqiiXRgIsgvcXcgYBjgjCjEEIHbNr84_u_nQL_a7Uoa7ORYAT5WaJ8fNZhDvcpbdZFNb6pFpTLY4b6T02ds2V95dzYKwXWJjyzYeluWfa4E4NPFjSwDE/s400/twitter_boxed_48.png'/></a></li>
<li><a
 expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Furl' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg669DsSeXQWRSY20TihwKvEyNY6jwdiaKch505gy7N4TRPrWr9BRlYlzU2uBNKQsyHWh_s1nX999tOakWaEdGYc-IUdhJP0AIOKK0dft6A5QSrQPZr5ivR9lixQddOoVMh0mNeKAIWSss/s400/furl_48.png'/></a></li>
<li><a
 
expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;
 + data:post.url + &quot;&amp;title=&quot; + 
data:post.title' target='_blank'><img alt='Sumbit to Design Float'
 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19w4ddiOlIcAoo0r4iRHRVOPz3lbS42ki13AwctdmHIpa1I6hPhQUVVM-tJpSQw0Ctmp7qIW0hSUCmaiF5ys4YQjCgT6i5lwJr7YHd0ITqUSiDvnqKP70KU9HbRA59LXyODBANSC7MTA/s400/designfloat_48.png'/></a></li>
<li><a
 
expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot;
 + data:post.url + &quot;&amp;title=&quot; + 
data:post.title' target='_blank'><img alt='Sumbit to Blinklist' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJKAsXihO5HACW7PFoqDOKRQoUs7Nd4Yns2CxaYjDxoEVeQElnioHFyPnIBRCDDQH5wSJqUFgni2BK9YyZ4M56-BhH4p_RED2Wcce_iBDk9xLDx5GN6GoAkc-_J-802WgIuF6tk8a7Bu0/s400/blinklist_48.png'/></a></li>
<li><a
 expr:href='&quot;http://buzz.yahoo.com/article/&quot; + 
data:post.url' target='_blank'><img alt='Sumbit to Yahoo Buzz' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybuODwDAS-LVcJc4ygHjl8Vo7H9NZtEHEHQtfbFTorYNOUJGzynwuFvTonFA6Wm1SxnbPxiRiJ2ahrpMZut-r2CJMHignU70EWQhXd5OGGS6oPCtkbHcu5TW_hfcB2-PJ9YvdlA6e_mo/s400/yahoo_48.png'/></a></li>
<li><a
 
expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
 + data:post.url + &quot;&amp;title=&quot; + 
data:post.title' target='_blank'><img alt='Sumbit to Google 
Bookmarks' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2U2iU_gpXz1nDZmigogSiJNiaqMbV3TZKJaBslgpExkEtNtZGx8vvgXVjp-NCGyTPr378JQyT3lsa2FaiMj6Xyn6GB54jLtTKD5QA3e8gxOzRipqNvEgpPLIdVJOTvgdJJ9-gJwZye0/s400/google_48.png'/></a></li>
</ul>

10. Now click preview and click save template. you are done.

Continue reading →

How To add blog engage vote button to blogger

1. Log in to blogger account and go to Design >Edit HTML

2. Make sure put check mark on "Expand Widget Templates"

3.Now find this tag by using Ctrl+F  <data:post.body/>

4. Paste Below code before <data:post.body/>  this tag

<div style='float:right; margin-right:10px; margin-top:10px'>
<script type='text/javascript'>
submit_url=&quot;<data:post.url/>&quot;;</script>
<script src='http://blogengage.com/evb/button.php' type='text/javascript'/>
</div>

5. Now Click Preview and click save  template. you are done.

Continue reading →