Showing posts with label Blogger Widgets. Show all posts

How To Add Cool Subscribe Gadget For Blogger

This is a cool subscribe gadget with nice buttons. Add to your blog and make it attractive. i have Facebook ,Twitter and Google +

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

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

3.Paste below code.

<style type="text/css">                                                        
.abtbar{width:300px;float:left;background:#FFF top no-repeat;margin:0 0 10px;padding:10px;border:0px solid #DDD;}.abtbar .abt-credit{}.abtbar .abt-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.abtbar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXsEY8iaIe9JjULLUJZJuT_5DKn6J8o1Faloxhv0S4E8P8NdceAJSztEFs0h0VS9wnFTcgzFG0DO5yMpbfW-TVOebs9PtV5BBUcaw1Zm0LECvu8VQ1axyO_ViRNfBW6O9VdHuoyEn-nY/s1600/%5Bwww.internetricks4u.blogspot.in%5DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.abtbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.abtbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.abtbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.abtbar .subicons a{text-decoration:none;color:#333333;}.abtbar .subicons a:hover{text-decoration:underline;color:#333333;}.abtbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69zrvi3HKTGOdne551vYnpPH3f5c2dLo9umYaXqjcTwGQmpWa3MSxnrQ488sDmbZsPswEzjDgpECTRKlW6RfTjDifBiQSNPOaacmHbRItJVGUiCVK2RJly2TdNZlRlPrkQP_XFjUa8Nw/s1600/Widget_icon.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69zrvi3HKTGOdne551vYnpPH3f5c2dLo9umYaXqjcTwGQmpWa3MSxnrQ488sDmbZsPswEzjDgpECTRKlW6RfTjDifBiQSNPOaacmHbRItJVGUiCVK2RJly2TdNZlRlPrkQP_XFjUa8Nw/s1600/Widget_icon.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69zrvi3HKTGOdne551vYnpPH3f5c2dLo9umYaXqjcTwGQmpWa3MSxnrQ488sDmbZsPswEzjDgpECTRKlW6RfTjDifBiQSNPOaacmHbRItJVGUiCVK2RJly2TdNZlRlPrkQP_XFjUa8Nw/s1600/Widget_icon.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69zrvi3HKTGOdne551vYnpPH3f5c2dLo9umYaXqjcTwGQmpWa3MSxnrQ488sDmbZsPswEzjDgpECTRKlW6RfTjDifBiQSNPOaacmHbRItJVGUiCVK2RJly2TdNZlRlPrkQP_XFjUa8Nw/s1600/Widget_icon.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.abtbar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.abtbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.abtbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.abtbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style><div class="abtbar">
<h2 class="title"></h2>
<div class="count">
<span class="bigcount"></span>Learn Free Pro Tricks daily </div>
<div class="subicons">
<div class="rssicon">
&nbsp;<a href="http://feeds.feedburner.com/fr3st" rel="nofollow" target="_blank">  RSS</a></div>
<div class="googleicon">
&nbsp;<a href="https://plus.google.com/fr3st" rel="author" target="_blank"> G+</a></div>
<div class="fbicon">
&nbsp;<a href="http://www.facebook.com/fr3st" rel="nofollow" target="_blank">FB</a></div>
<div class="twittericon">
&nbsp;<a href="https://twitter.com/fr3st1" rel="nofollow" target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
<div class="emailicon">
<div style="color: #3a3a3a; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; width: 270px;">
Receive Our All Updates  In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</div>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedburnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" placeholder="Enter your email here..." /><input name="uri" type="hidden" value="AllBloggingTricks" /><input class="joinemailupdates" type="submit" value="Submit" /></form>
<span class="abt-credit" style="font-family: Arial,Helvetica,sans-serif;"></span></div>
</div>
</div>

* Repalce placewith fr3st with your ID
* Replace fr3st With Google plus username
* Repalce fr3st with your Facebook ID
* Replace fr3st1 with your Twitter ID

Add Shareaholic Sassy Bookmarks To Blogger

share-aholic-sassly-widget

Shareaholic is always famous for their Social Bookmarking Widgets.Recently we shared their Sexy Bookmarks Gagdet for blogger and this time we are sharing Sassy Bookmarks.This is another cool gadget by Shareaholic,it floats botttom left corner of your blog and when any user hovers mouse on it,some icons pop outs.Also the installation of this gadget is one step installation so that you can easily add to your blog.Now let's see how to add it.Click on the button below to see live

demo

How To Add Shareaholic Sassy Bookmarks To Blogger?

Go to Blogger Dashboard > Template
Take a backup of your template.
Now find for below code in your template


</body>

add below piece of code just above/before of above code.

<div class="shr_ss shr_publisher">

</div>





<script type="text/javascript">

var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};

</script>





<script type="text/javascript">

(function() {

var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;

sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);

})();

</script>

Now save your template and you are done I hope you will like this gadget.

Adding Twitter Follower Box Widget for Blogger

Adding Twitter Follower Box Widget for Blogger

Twitter Follower Box. Many blogger have been waiting for this great application, that allows your visitors to follow you via twitter without leaving your site.

It's called Twitter Follower Box or Twitter Fan Box. It works like and is closely based on Facebook fan/Like box algorithm.

The code for this Fan box is created by Mark Carey.
If you've visited author site, and follow him on twitter, you'll see the code shown. But you can resize the widget size as you need. Now I'll give you the code, which you can resize to fit in your blog.
Follow the steps below to add this easy to use Follower Box / Fan box to your Blogger Blogs.
1. Go To Blogger > Design
2. Select HTML/JavaScript widget
3. Paste the code below inside it

 <!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("frs3t1");</script
type="text>
<!-- End Twitter Follower Box -->

4. Replace fr3st1 with your twitter username

5. Save and you are done!

The wiget will looks like image bellow.

If you needed any help about Adding Twitter Follower Box for Blogger feel free to post your question.

Change the title name of your blog to be more compatible with search engines

Change the title name of your blog to be more compatible with search engines

Change the labeling of the title to your blog to be more conciliatory withsearch engines, if you look at the blog displayed by any browser finddisplayed in the title compound as above, as "fr3st: Changingmarking the address of your blog to be more conciliatory with the search engines "and that when you enter the page was about, which means thatthis page when checking a name takes the title compound I and title Blogsubjects II and it's not a good compromise with blog search engines, and therefore are archived page spiders clearly answer the complexity andwhere not to install, recommended that the title page is subject to changemy words because they are indexed on the basis of semantic tags wordsif the title of the Code will not be significant relative to the property interms of research and should therefore be amended in the special model codes to avoid this problem

Important Note: Before changing the template you need to save a backup copy of it to restore them when necessary.
In the Control Panel and the blog under the "planning" open page "Edit HTML" and then watch the following code:

<title><data:blog.pageTitle/></title>

And then select this and other code

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Save your template, and the review of the template.

Animated CSS3 Bubble Buttons For Blogger

Today we will add some cool CSS3 bubble buttons to blogger blog which are designed byTutorialZine.These bubble buttons are made with pure CSS3 and on mouse hover the bubble star shaking and this effect makes these button more beautiful.This button is available in four color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

Live Demo

How To Add Animated CSS3 Bubble Buttons To Blogger

For easy and better inderstanding here I am dividing this article in two parts.

CSS Part
HTML Part

1. CSS Part

Go to Blogger Dashboard > Template
As always take a backup of your template
Search for below code in your template

]]></b:skin>

Add below code just above it

.button {
   font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
   text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
   text-decoration: none !important;
   white-space: nowrap;
   display: inline-block;
   vertical-align: baseline;
   position: relative;
   cursor: pointer;
   padding: 10px 20px;
   background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
   background-position: bottom left;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
   background-position: bottom left, top right, 0 0, 0 0;
   background-clip: border-box;
/* Applying a default border raidus of 8px */
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
/* A 1px highlight inside of the button */
   -moz-box-shadow: 0 0 1px #fff inset;
   -webkit-box-shadow: 0 0 1px #fff inset;
   box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
   -webkit-transition: background-position 1s;
   -moz-transition: background-position 1s;
   transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
   background-position: top left;
   background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
   bottom: -1px;
}
/* The three buttons sizes */
.button.big {
   font-size: 30px;
}

.button.medium {
   font-size: 18px;
}

.button.small {
   font-size: 13px;
}
/* A more rounded button */
.button.rounded {
   -moz-border-radius: 4em;
   -webkit-border-radius: 4em;
   border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
   color: #0f4b6d !important;
   border: 1px solid #84acc3 !important;
/* A fallback background color */
   background-color: #48b5f2;
/* Specifying a version with gradients according to */
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
   background-color: #63c7fe;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
   color: #345903 !important;
   border: 1px solid #96a37b !important;
   background-color: #79be1e;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
   background-color: #89d228;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
   color: #693e0a !important;
   border: 1px solid #bea280 !important;
   background-color: #e38d27;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
   background-color: #ec9732;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
   color: #525252 !important;
   border: 1px solid #a5a5a5 !important;
   background-color: #a9adb1;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
   background-color: #b6bbc0;
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqfVSYhwV-_YjFXgoIt1pGGcxOc1iF-tihf30rYBhVtG_OC6xPdd8CSfTOVmxAgbO23LaY6qJX8fUT6nnH6iJsmcRHdfwWW1xeYDk6s20tNN35PTPk-mo-xjZtXLHuo8zrESB95eTTU/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Now we have integrated the CSS part in the template let's see how to use them.

2. HTML Part

Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.

1.HTML For Big Button (Choose anyone according to button color)

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

2.HTML For Medium Button (Choose anyone according to button color)

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

3.HTML For Small Button (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

4.HTML For Small Rounded Buttons (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

That's all.I hope you will like these button.

Sticky Bar Widget,JQuery Scrolling Social Bookmarking Bar For Blogger

The most requested tutorial over the last few months has been for the scrolling share buttons that sit alongside posts and scroll down the page with the reader.This gadget is popular on all the top blogs and really does help increase the number of times your posts get shared on Twitter, Facebook and other social networks.Using jQuery we attach a bar to the side of your blog posts with bookmarking buttons, as the page scrolls the bar neatly follows giving readers the option to share at any time.The gadget I have been using for the past few months and I share with you today has the following options : Twitter Share, Facebook Like, Stumble Upon, Google+

As this is an advanced gadget there are 9 steps to add it to your blog so more than ever its important to back up your template first in case of mistakes, then take your time and you should have no problems.

Add The Sticky Scroll Bar To Blogger

Step 1. In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box as shown in the video Below :Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

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

Step 3. Copy and Paste the following code Directly Below / After <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<div id='share-buttons'><div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='paulcrowepro' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='facebook scount'><fb:like expr:href='data:post.url' font='' layout='box_count' send='false' show_faces='false' width='50'/></div><div class='stumble scount'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><div class='gplus scount'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div><center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center><br/><a href='http://feeds.feedburner.com/spiceupyourblog' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUFGGgZxw9_GIAMz5nndS9J712EKJlKoXVMzH25ThC5hopMaLH9vhLHWHQcC0IiZbAPs1zE6xqXcr8DtmBmQTuMsJn5D07MWLVGt8zBosGuncK8FpZtN73zYGrcZb5jtyPDj7st2oHZ8/s1600/rss-seat.png'/></a>
<br/><a href='http://www.spiceupyourblog.com/' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div></b:if>

Important - Replace the URL in yellow with your Rss Feed URL.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code )

]]></b:skin>

Step 5. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

/*Start Sticky Bar Css http://www.spiceupyourblog.com*/
#share-buttons {
background: none repeat scroll 0 0 #fff;
border: 1px solid #CCCCCC;
left: -80px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
#share-buttons .scount{
clear: both;
display: block;
margin: 2px auto;
text-align: center;
width: 55px;z-index:-1;
}
.facebook.sbutton .fb_ltr{width:40px !important;}
.post-outer{height:auto;}
#main{position:relative;}
#main-wrapper{position:relative;}
/*End Sticky Bar Css http://www.spiceupyourblog.com*/

Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - )

</head>

Step 7. Copy And Paste The Following Code Directly Above / Before </head>
Note - The line of code in Yellow is the jQuery script.If you previously added jQuery to your template you do not need to add this.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='http://yourjavascript.com/4701293254/share-bar-script.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})
});
</script>

Step 8. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - )

</head>

Step 9. Copy And Paste The Following Code Directly Below / After </head>

<div id='fb-root'/>
<script>
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Step 10. Save your template.

Source :spiceupyourblog

Awesome All In One Social Media Sharing And Subscribing Widget For Blogger

Before On MBT

Now After Customization

Now I am really happy :) because,after working continuously 3hrs. on customization,Finally I got a widget which I want.I got many problems but I managed to solve them.This is all in one mashable style social sharing and subscribing widget.It contains Facebook like button,Google+ recommend button,Twitter follow button and subscribe by email.com also I have added a addthis social sharing buttons at bottom.This widget can now be used in every blogspot blog just with an extremely easy installation steps.This widget was converted into blogger by Mohammad of Mybloggertricks.And he also managed the IE problem.

Some Great Features Of This Widget

All in one Social sharing and subscribing widget.
Requires very low space i.e. you can add other widgets on your blog.
With addthis social sharing buttons at bottom.
Subscribe by email form.
Nice totally mashable style design.

What Is New In This Widget

Changed Facebook like button.
Changed the lower section.
Addthis social sharing buttons added.

How To Add This Widget On Blogger

Go to your Blogger Dasboard > Design > Page Layout.
Then choose Add A Gadget > HTML/JavaScript.
Paste below code and save it.

<style> 
/* BTSNTS Social Widget  */ 


#BTSNTS-mashable-bar { 
border: 0; 
margin-bottom: 10px; 
margin: 0 auto; 
width:300px; 
} 

.fb-likebox { 
background: #fff; 
padding: 10px 10px 0 10px; 
border: 1px solid #D8E6EB; 
margin-top: -2px; 
height:65px; 
} 

.googleplus { 
background: #F5FCFE; 
border-top: 1px solid #FFF; 
border-bottom: 1px solid #ebebeb; 
border-right: 1px solid #D8E6EB; 
border-left: 1px solid #D8E6EB; 
border-image: initial; 
font-size: .90em; 
font-family: "Verdana","Helvetica",sans-serif; 
color: #000; 
padding: 9px 15px; 
line-height: 1px;} 
.googleplus span { 
color: #000; 
font-size: 11px; 
position: absolute; 
display:inline-block; 
margin: 9px 70px;} 
.g-plusone {    float: left;} 
.twitter { 
background: #EEF9FD; 
padding: 10px; 
border: 1px solid #C7DBE2; 
border-top: 0;} 
#mashable { 
background: #EBEBEB; 
border: 1px solid #CCC; 
border-top: 1px solid white; 
padding: 2px 8px 2px 3px; 
text-align: right; 
border-image: initial;} 
#mashable .author-credit {} 
#mashable .author-credit a { 
font-size:10px; 
font-weight: bold; 
text-shadow: 1px 1px white; 
color: #1E598E; 
text-decoration:none;} 
#email-news-subscribe .email-box{ 
padding: 5px 10px; 
font-family: "Verdana","Helvetica",sans-serif; 
border-top: 0; 
border-right: 1px solid #C7DBE2; 
border-left: 1px solid #C7DBE2; 
border-image: initial; 
height:35px;} 
#email-news-subscribe .email-box input.email{ 
background:#FFFFFF; 
border: 1px solid #dedede; 
color: #999; 
padding: 7px 10px 8px 10px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
-o-border-radius: 3px; 
-ms-border-radius: 3px; 
-khtml-border-radius: 3px; 
border-radius: 3px; 
border-image: initial; 
font-family: "Verdana","Helvetica",sans-serif;}    
#email-news-subscribe .email-box input.email:focus{color:#333}    
#email-news-subscribe .email-box input.subscribe{ 
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); 
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00); 
font-family: "Verdana","Helvetica",sans-serif; 
border-radius:3px; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
border:1px solid #cc7c00; 
color:white; 
text-shadow:#d08d00 1px 1px 0; 
padding:7px 14px; 
margin-left:3px; 
font-weight:bold; 
font-size:12px; 
cursor:pointer; 
border-image: initial;} 
#email-news-subscribe .email-box input.subscribe:hover{ 
background: #ff9b00; 
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); 
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); 
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999; 
-webkit-box-shadow:0 0 3px #999; 
box-shadow:0 0 3px #999 
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); 
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); 
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); 
border-radius:3px; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
border:1px solid #cc7c00; 
color:#FFFFFF; 
text-shadow:#d08d00 1px 1px 0}    
#other-social-bar { 
background-color: #D8E6EB; 
box-shadow: 0 1px 1px #FFFFFF inset; 
padding: 5px; 
font-family: "Verdana","Helvetica",sans-serif; 
font-weight:bold; 
overflow: hidden; 
border: 1px solid #B6D0DA; 
height:35px; 
} 
</style>

<!--[if IE]>
<style> 
#email-news-subscribe .email-box input.subscribe{ 
background: #FFCA00; 
} 
</style>
<![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="BTSNTS-mashable-bar" ><!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --><div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/BTSNTS" data-width="280" data-height="88" data-show-faces="false" data-stream="false" data-header="false"></div></div><div class="googleplus"> <!-- Google --><span>Recommend Us!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=&amp;screen_name=rahulippar&amp;show_count=&amp;show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div><div id="email-news-subscribe"> <!-- Email Subscribe --><div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=btsnts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /><input type="hidden" value="btsnts" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div><div id="other-social-bar"><!-- Other Social Bar --><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_preferred_6"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f22ed8a16c66e93"></script><!-- AddThis Button END --></div></div></div><!--Social Media Sharing Widget By BTSNTS.BLOGSPOT.COM—>

Some Little Changes

Now replace BTSNTS with your facebook fanpage username.

Replace rahulippar with your twitter username.

Replace these btsnts two usernames with your feedburner username.

Credits

If you want to share this widget with your readers then you will have to give credits toBTSNTS Blog and MBT Blog by attaching a link back to this post.Hope all of you will understand it.

Thank you in advance......

Horizontal bar stock with the floating Close button to blogger

Today we are sharing another cool social bookmarking for blogger.This is a horizontal floating share bar containing AddThis share buttons.This gadget is created by AddThis.com and we bloggerized this gadget to work perfect with your blog.It contains a close and plus buttons,when any visitor hits the close button then the bar goes inside and shows the plus button.When again he/she clicks the plus button then it appears.I have kept the installation easy as possible as you just have to copy and paste the two pieces of code.Now lets go to tutorial,before adding it to your blog see the demo first.

View Demo

How To Add Horizontal Floating Share Bar To Blogger?

Go to Blogger Dashboard > Design > Edit HTML (In new User Interface it is Dashboard > Template)
Now find for </head> tag in your template.
Add below code just before </head> tag.

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Now find for </body> tag.

Add below code just before </body> tag.

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>

Now save your template and you are done..

Cool Shareaholic Social Sharing Widget With Tooltips And Count For Blogger

Shareaholic.com is a leading website in making share buttons for wordpress,tumblr or websites except blogger.So considering this point here we are giving a full installation for blogger.This is a cool gadget with shows the tooltips on hover it also shows that how many times your posts were shared.The installation is so easy you just have to copy and paste the codes.

How To Add Shareaholic Share Buttons To Blogger

Go to Blogger Dashboard > Design > Edit HTML. (In new user interface Dashboard > Template)
First download a copy of your template
Now find your ]]></b:skin> in your template
Add below code just above ]]></b:skin>

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Now find for below code in your template

<div class='post-footer'>

and add below code just below of above code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @fr3st&quot;}};
</script>

<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://fr3st.blogspot.com' target='_blank'>Social Bookmarking Gadget</a></b:if>

Replace fr3st with your twitter username,if you dont have a twitter username please remove fr3st and leave it blank.

Now save your template and you are done...

Fixed Position "Share This" Sharing Bar For Blogger

Cool Shareaholic Social Sharing Widget With Tooltips And Count For Blogger

Sharethis.com is always famous for their cool and various sharing tools.In this tutorial we will add a fixed position i.e. floating share bar to blogger.It contains sharing buttons for facebook.twitter,pinterest,mail and sharethis button which contains sharing option to all social website.As always installation of this gadget is extremely easy you just have to copy and paste two snippets of codes in your template.And I am sure that this gadget will surely increase your page views little bit.So without waiting anymore lets go to the tutorial.

How To Add Share This Share Buttons To Blogger?

Go to Blogger Dashboard > Design > Edit HTML.

Download a copy of your template first.

Now search for

</head>

add below code just above it.

<script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Now find for below code in your template

</body>

add below piece of code just above it

<b:if cond='data:blog.pageType == "item"'> <script> var options={ "publisher": "ur-a2599f1-8136-72d-5d41-d74061e0b4fc", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "pinterest", "email", "sharethis"]}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script> </b:if>

Now save your template and you are done... This floating bar will only visible on posts pages if you want to show this bar on your homepage then simply delete first and last line from above code.

Google sharing button +

Google sharing button +

+ Google has just made available to developers, webmasters, a new button: a button for sharing. This button should allow readers of a site(blog) to share the articles they read on Google's social networking.

This button, available in three formats, can be set on this page to Google+. Here is the code of its small size in ang:

<div class="g-plus" data-action="share" data-annotation="bubble" data-height="15"></div>

<script type="text/javascript">
window.___gcfg = {lang: 'fr-CA', parsetags: 'onload'};
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>