Social Sharing Gadget/Bar for Blogger

In this tutorial, I am going to demo y'all how to install awesome social sharing bar or social sharing buttons on your blogger/BlogSpot blogs. Social sharing icons are links that render you’re an slow agency to bookmark your weblog postal service on social networks in addition to this agency y'all larn a large give away of driven traffic to your blog. Social sharing is really of import inwards price of Search Engine Optimization. Because social networks play an of import utilisation inwards link building. If y'all desire to larn a practiced seat inwards search engine hence y'all must install social sharing widget on your blog. After that, your social sharing icons should survive impressive for your weblog reader. In blogger blogs, at that spot is a default social sharing widget which looks bad in addition to older. There are many websites similar portion this, jetpack, getsocial etc. which provides social sharing plugins in addition to widgets which are paid in addition to expensive. Today I am going to portion a premium social media sharing widget for blogger. You tin add together this social sharing buttons either below your postal service championship or inwards the bottom of weblog post. Both methods are refer below. You tin too display this sharing bar to a greater extent than than i fourth dimension on blogger blog. For example, i time below postal service championship in addition to minute inwards the bottom of the post. If y'all desire to brand unopen to changes inwards await hence y'all tin customize it via CSS.

In this Jumbo Social sharing bar y'all volition larn next Social Media:

1 Facebook

2 Twitter

three Google+

four WhatsApp (If soul similar to portion on it hence it volition opened upwards link inwards WhatsApp automatically solely inwards Mobile devices)

five LinkedIn

six Pinterest

seven Viber (Works similarly WhatsApp on Mobile devices)

8 Buffer

nine StumbleUpon

10 Print (by using this portion reader tin easily impress your postal service through printer)

This Social Sharing Bar is machine responsive.

How to add together Social Sharing Bar on Blogger

Follow the instructions given below:

1 Go to Blogger Dashboard >> Blogger Template

2 Click on backup your template

three Click on HTML Editor in addition to Press CTRL + F

4 Copy this code in addition to glue inwards search bar ]]></b:skin> then re-create the below code in addition to glue straight off earlier ]]></b:skin>

/* ##### FREE JUMBO SHARE BUTTONS ####### */
#AOAshares-wrap{border-top: 1px dotted #eee;
padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
#AOAshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:22px;margin:0px 0px 0; line-height: 1.4em!important; text-align:center;}
#horiz{position:relative; padding:0; margin:0; }
#horiz #AOAshares{position:relative;top:-5px; padding-top:0px;}
#AOAshares a:hover{text-decoration:none!important; }
/***Facebook***/
.aoa-fb{opacity:0.4;background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF!important;cursor:pointer;font-weight:700; height:37px; width:90px; border-radius:3px;line-height:40px;padding:0 6px;white-space:nowrap;text-shadow:0 -1px 0 #354C8C}
.aoa-fb:focus,.aoa-fb:hover,.aoa-fb:active{ opacity:1;background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
.aoa-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
.aoa-fb:hover, .aoa-fb:visited, .aoa-tw:hover,.aoa-tw:visited, .aoa-linkedin:hover ,.aoa-linkedin:visited{color:#fff!important;}
/***Gplus, Pinit, Stumbleupon***/
.aoa-gp{opacity:0.4; background-color:#d73532; color:white; background-image:;border-radius:3px;border:; font-size:15px; color:white!important;cursor:pointer;font-weight:700;line-height:40px; text-align:center; width:90px; height:37px; padding:0 2px 0 2px;white-space:nowrap;}
#AOAshares .pinit{border-radius:3px;text-align:center; background:#d73532!important; color:white! important}
#AOAshares .stumb{background:#f0fafe!important;border:1px enterprise #cde3ea}
#AOAshares .stumb:hover{border:px enterprise #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#AOAshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
.aoa-gp:focus,.aoa-gp:hover,.aoa-gp:active{color:white! of import ;box-shadow:0 1px 0 rgba(0,0,0,0.1); opacity:1;}
.aoa-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
.aoa-gp .fa-pinterest{padding:0 0px 0 0;font-size:14px}
#aoashares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }
/***LinkedIn***/
.aoa-linkedin{opacity:0.4; transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:px enterprise #066094;color:#fff!important;cursor:pointer; font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap;
height:37px; width:90px; border-radius:3px;line-height:40px;}
@media cover in addition to (-webkit-min-device-pixel-ratio:0) {
.aoa-linkedin{padding:0 5px 0 1px}
}
.aoa-linkedin:focus,.aoa-linkedin:hover,.aoa-linkedin:active{opacity:1; border:px enterprise #0369A0;background-color:#0369A0}
.aoa-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}

/**Twtter, Print, Whatsapp, viber**/
.aoa-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF!important;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box;opacity:0.4;
height:37px; width:90px; border-radius:3px;line-height:33px;
}
.aoa-tw:focus,.aoa-tw:hover,.aoa-tw:active{opacity:1; background-color:#0C7ABF}
.aoa-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:4px;margin-top:0}
.aoa-o{max-width:100%}
.aoa-o,.aoacount-o,.aoa-fb,.aoa-gp,.aoa-linkedin,.aoa-tw,.label,#aoacount{display:inline-block;vertical-align:top}
.aoacount-o{position:relative;min-width:15px;height:38px;text-align:center; display:none; padding:1px 5px;margin-left:2px;background:#FFF none repeat scroll 0 0;border:1px enterprise #e7e7e7;border-radius:2px; }
#AOAshares .printme {background-color:#333;}
#AOAshares .printme:focus,#AOAshares .printme:hover,#AOAshares .printme:active{background-color:#000}
#AOAshares .whatsapp{background-color:#73D40B;}
#AOAshares .whatsapp i{font-size:15px!important;}
#AOAshares .whatsapp:focus,#AOAshares .whatsapp:hover,#AOAshares .whatsapp:active{background-color:#65BA09}
#AOAshares .viber{background-color:#7b519d;}
#AOAshares .viber:focus,#AOAshares .viber:hover,#AOAshares .viber:active{background-color:#8558aa}
#AOAshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }
#aoacount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#aoacount:hover{text-decoration:none}
#AOAshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#AOAshares .ext{min-height:18px!important}
#AOAshares .arrow s,#AOAshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#AOAshares .arrow i{border-right-color:#FFF;left:2px;top:11px}
.share-btn{position:relative;display:inline-block}
.share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;}
.share-btn .h4{font-size:12px;font-family:arial}
/*#########Floating Counter Styles###########*/
.aoa-vertical{display:block; max-width:60px!important;margin:0 0 0 -83px!important;border:1px enterprise #f3f3f3!important;padding:3px 2px 0!important;background:#fff; position: fixed;z-index:99999;bottom: 7%;float: left;border-right:0px enterprise #fff!important;}
.aoa-vertical #AOAshares{display:block;width:60px;margin:7px 0!important}
.tcount{margin:0 10px 0 0;text-align:center;min-width:60px;border-right:3px enterprise #73D40B;padding:0 15px 0 10px}
.aoa-vertical .tcount{border-right:0;padding:0;text-align:center;height:auto}
.tcount .h2{font-size:29px;padding-bottom:5px}
.tcount .h4,.aoa-vertical .tcount .h4{font-size:12px;padding-bottom:5px;border-radius:0}
.aoa-vertical .tcount .h4{border-bottom:3px enterprise #73D40B}
.aoa-vertical .aoa-o,.aoa-vertical .aoacount-o,.aoa-vertical .aoa-fb,.aoa-vertical .aoa-gp,.aoa-vertical .aoa-tw,.aoa-vertical #aoacount{display:block}
.aoa-vertical .aoacount-o{margin-bottom:7px;margin-left:0;height:30px}
.aoa-vertical #aoacount{padding:7px 0 0;font-size:15px;color:#666}
.arrow-v{bottom:-8px;height:7px;left:25px;position:absolute;width:0;z-index:2}
.arrow-v s,.arrow-v i{border-color:#e7e7e7 transparent transparent;border-style:solid;border-width:5px;display:block;position:relative}
.arrow-v i{border-top-color:#FFF;left:0;top:-12px}
/*#########Vertical Counter Switch###########*/
.switchoff{display:}
.aoaswitch{padding:0 16px;margin:0 0 5px;display:block;max-width:60px;height:20px;cursor:pointer;background-color:#fff;border:1px enterprise #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.aoaswitch:hover{color:#73D40B}
.aoaswitch i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.aoaswitch i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}

#fb1{
font-size:20px;
}
#in1{
font-size:18px;
}
#t1{
font-size:18px;
}
#pin1{
font-size:14px;
}
#sharing1{
font-size:40px;
}