How to add Facebook Like/Fan Box to Blogger

 A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. After subscribing (by pressing like button), visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog. Before creating a fan box you should already have a Facebook fan page. If you haven't yet created, click here to learn How to Create a Facebook Fan Page.

Read More

How to create Awesome Slide Open Heart Bookmarking Gadget For Blogger

The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and many more bookmarking choices. This gadget/widget comes with a fixed position and stays in the corner of the page, so it will grab your readers attention and make them share your posts easily.

I'm sure you will love it after seeing the demo of this gadget:

View Demo

Read More

How to Add Social Bookmarking Buttons near Adsense Ads

The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty

 space besides Adsense units, making your blog look more attractive.

Adding the social bookmarking buttons at the top of your blogger post, will make things easier when your readers will want to share your posts via the networking sites. The widget includes buttons for Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati and Digg.

Read More

How to Share blog posts in social medias using Sharethis

This is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the buttom of this post to see the AddThis sharing buttons.

This tutorial will show you how to register and add this feature on your blog and you will get to know some of the

Read More

How to Add floating social media sharing buttons below Blogger post titles

In this tutorial we will see how to add a floating social media sharing bar below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top.

Read More

Add Social Media Icons to Blogger Header

 

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

Read More

Add A CSS Animated Share Button on Blogger

In this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below.

Read More

How to add responsive social media buttons in blogger with counter

• Login your blogger account
• Go template and then click on edit HTML
• After the opening, your blog’s template all coding, search here the second  <div class='post-footer'> by using Ctrl+f
• Paste the below code just below it

<div class="don-share" data-bubbles="top" data-limit="4">
 <div class="don-share-total"></div>
 <div class="don-share-facebook"></div>
 <div class="don-share-twitter"></div>
 <div class="don-share-google"></div>
 <div class="don-share-pinterest"></div>
 <div class="don-share-linkedin"></div>
 <div class="don-share-tumblr"></div>
 <div class="don-share-stumbleupon"></div>
 <div class="don-share-reddit"></div>
 <div class="don-share-hackernews"></div>
 <div class="don-share-buffer"></div>
 <div class="don-share-xing"></div>
 <div class="don-share-pocket"></div>
 <div class="don-share-fancy"></div>
 <div class="don-share-yummly"></div>
 <div class="don-share-scoopit"></div>
 <div class="don-share-weibo"></div>
 <div class="don-share-vk"></div>
 <div class="don-share-mailru"></div>
 <div class="don-share-odnoklassniki"></div>
 <div class="don-share-hatena"></div>
</div>
<script type="text/javascript"> 
 (function() {
 var dr = document.createElement('script');
 dr.type = 'text/javascript'; dr.async = true;
 dr.src = '//share.donreach.com/buttons.js';
 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
 })();
</script>

click on save template button.
To check the result, visit the blog any single post. I hope this tutorial have helped you to install social media share button in blogger.

Read More

Create and Add Floating Social Media to Blogger

This is the beautiful Sharing Gadget and user friendly design which suits to every site. In other words it is colorful sharing content gadget with proper coding and customization therefore this widget has been divided into three simple steps, So you must follow all the below mentioned steps to use this gadget on your website

Just go to blogger.com>blog dashboard> Go to Layout>Add a gadget>then select HTML Java Script > then just paste the given below code to there, then click on Save - See more at:

Codes

<style type="text/css">
#floating_bar { background-color:#fff;position:fixed; padding:3px 0 3px 0;
bottom: 30%;margin-left:-5px;float:left; border: 1px solid #000000;
border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:10; }
#floating_bar { clear:both; }
</style>
<div id='floating_bar'>

<div id="fb-root"><div style='margin:3px 3px 3px 10px;' id='fb-root'>
<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" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div></div></div>
<div style='margin:0px 0 0 10px;' id='gplusone'><script src="https://apis.google.com/js/platform.js" async='async'></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style='margin:5px 5px 5px 6px;'>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="intersmash" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<!-- start linkedin -->
<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script>
if(!window.console){window.console={}
}if(typeof window.console.log!=="function"){window.console.log=function(){}
}if(typeof window.console.warn!=="function"){window.console.warn=function(){}
}(function(){var S={"bootstrapInit":+new Date()},p=document,m=(/^https?:\/\/.*?linkedin.*?\/in\.js.*?$/),b=(/async=true/),D=(/^https:\/\//),J=(/\/\*((?:.|[\s])*?)\*\//m),F=(/\r/g),j=(/[\s]/g),g=(/^[\s]*(.*?)[\s]*:[\s]*(.*)[\s]*$/),x=(/_([a-z])/gi),A=(/^[\s]+|[\s]+$/g),u=(/^[a-z]{2}(_)[A-Z]{2}$/),C=(/suppress(Warnings|_warnings):true/gi),d=(/^api(Key|_key)$/gi),k="\n",G=",",n="",I="@",o="extensions",Z="on",w="onDOMReady",ac="onOnce",aa="script",L="https://www.linkedin.com/uas/js/userspace?v=0.0.2000-RC8.40280-1420",h="https://platform.linkedin.com/js/secureAnonymousFramework?v=0.0.2000-RC8.40280-1420",H="http://platform.linkedin.com/js/nonSecureAnonymousFramework?v=0.0.2000-RC8.40280-1420",P="http://platform.linkedin.com/js/frameworkV2?v=0.0.2000-RC8.40280-1420",B=p.getElementsByTagName("head")[0],t=p.getElementsByTagName(aa),X=[],a=[],O=["lang"],R={},c=false,ad,l,W,r,K,E,ab;
if(window.IN&&IN.ENV&&IN.ENV.js){if(!IN.ENV.js.suppressWarnings){console.warn("duplicate in.js loaded, any parameters will be ignored")
}return
}window.IN=window.IN||{};
IN.ENV={};
IN.ENV.js={};
IN.ENV.js.extensions={};
statsQueue=IN.ENV.statsQueue=[];
statsQueue.push(S);
ad=IN.ENV.evtQueue=[];
IN.Event={on:function(){ad.push({type:Z,args:arguments})
},onDOMReady:function(){ad.push({type:w,args:arguments})
},onOnce:function(){ad.push({type:ac,args:arguments})
}};
IN.$extensions=function(ag){var aj,i,af,ai,ah=IN.ENV.js.extensions;
aj=ag.split(G);
for(var ae=0,e=aj.length;
ae<e;
ae++){i=V(aj[ae],I,2);
af=i[0].replace(A,n);
ai=i[1];
if(!ah[af]){ah[af]={src:(ai)?ai.replace(A,n):n,loaded:false}
}}};
function V(ag,ae,e){var ah=ag.split(ae);
if(!e){return ah
}if(ah.length<e){return ah
}var af=ah.splice(0,e-1);
var i=ah.join(ae);
af.push(i);
return af
}function v(e,i){if(e===o){IN.$extensions(i);
return null
}if(d.test(e)){i=i.replace(j,n)
}if(i===""){return null
}return i
}function N(af,ag){ag=v(af,ag);
if(ag){af=af.replace(x,function(){return arguments[1].toUpperCase()
});
if(af==="lang"&&!u.test(ag)){try{var ae=ag.replace("-","_").split("_");
ae=[ae[0].substr(0,2).toLowerCase(),ae[1].substr(0,2).toUpperCase()].join("_");
if(!u.test(ae)){throw new Error()
}else{ag=ae
}}catch(ah){if(!(ab||IN.ENV.js.suppressWarnings)&&ag){console.warn("'"+ag+"' is not a supported language, defaulting to 'en_US'")
}ag="en_US"
}}else{if(af==="noAuth"||af==="noApi"){ag=/^(?:true|yes|1)$/i.test(ag)
}}IN.ENV.js[af]=ag;
var ai=[encodeURIComponent(af),encodeURIComponent(ag)].join("=");
for(var i in O){if(O.hasOwnProperty(i)&&O[i]===af){a.push(ai);
return
}}X.push(ai)
}}l="";
for(U=0,q=t.length;
U<q;
U++){var f=t[U];
if(!m.test(f.src)){continue
}if(b.test(f.src)){c=true
}try{l=f.innerHTML.replace(A,n)
}catch(z){try{l=f.text.replace(A,n)
}catch(y){}}}l=l.replace(J,"$1").replace(A,n).replace(F,n);
ab=C.test(l.replace(j,n));
for(var U=0,T=l.split(k),q=T.length;
U<q;
U++){var s=T[U];
if(!s||s.replace(j,n).length<=0){continue
}try{W=s.match(g);
r=W[1].replace(A,n);
K=W[2].replace(A,n)
}catch(Y){if(!ab){console.warn("script tag contents must be key/value pairs separated by a colon. Source: "+Y)
}continue
}N(r,K)
}N("secure",1);
function M(e,i){return e+((/\?/.test(e))?"&":"?")+i.join("&")
}IN.init=function Q(i){var e=IN.ENV.js,ae,af;
i=i||{};
for(ae in i){if(i.hasOwnProperty(ae)){N(ae,i[ae])
}}E=p.createElement(aa);
if(e.v2){af=M(P,X)
}else{if(e.apiKey&&!e.noAuth){af=M(L,X)
}else{af=e.secure?h:H
}}E.src=M(af,a);
B.appendChild(E);
statsQueue.push({"userspaceRequested":+new Date()});
IN.init=function(){}
};
statsQueue.push({"bootstrapLoaded":+new Date()});
if(!c){IN.init()
}})();
</script>
<script data-counter='top' type='IN/Share'></script>
</div>
<!-- End linkedin -->

<div style='margin:0 0 10px 11px; id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>

<p style=' line-height:0px; font-size:11px; font-weight:bold; text-align:center;'><a href='http://www.internetsmash.com/2014/11/how-to-add-social-media-buttons-to-website.html' target='_blank' style='color:#050505;' rel="nofollow">Get this</a></p></div>


OR

Use Click Here to Get Other Codes

Customization
In the Code above you can see this text margin-left:-5px is in red color. It will allow you to move the widget to the left and right . Going positive will move the widget to right and if you add a negative value it will move it to left.

You can also change the button value which is on the orage text (buttom:30%) above,it will alow you to move the widget down and up.


You might change also intersmash text is in red to your own text on twiter username.

Read More