Social Sharing Gadget/Bar for Blogger - Hallo sahabat Another Stuff, Pada Artikel yang anda baca kali ini dengan judul Social Sharing Gadget/Bar for Blogger , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Social Sharing Gadget/Bar for Blogger
link : Social Sharing Gadget/Bar for Blogger

Social Sharing Gadget/Bar for Blogger

In this tutorial, I am going to show you how to install awesome social sharing bar or social sharing buttons on your blogger/BlogSpot blogs. Social sharing icons are links that provide you’re an easy way to bookmark your blog post on social networks and this way you get a large number of driven traffic to your blog. Social sharing is very important in terms of Search Engine Optimization. Because social networks play an important role in link building.  If you want to get a good position in search engine then you must install social sharing widget on your blog. After that, your social sharing icons should be impressive for your blog reader. In blogger blogs, there is a default social sharing widget which looks bad and older. There are many websites like share this, jetpack, getsocial etc. which provides social sharing plugins and widgets which are paid and expensive. Today I am going to share a premium social media sharing widget for blogger. You can add this social sharing buttons either below your post title or in the bottom of blog post. Both methods are mention below. You can also display this sharing bar more than one time on blogger blog. For example, once below post title and second in the bottom of the post. If you want to make some changes in look then you can customize it via CSS. 

In this Jumbo Social sharing bar you will get following Social Media:

1 Facebook

2 Twitter

3 Google+

4 WhatsApp (If someone like to share on it then it will open link in WhatsApp automatically only in Mobile devices)

5 LinkedIn

6 Pinterest

7 Viber (Works similarly WhatsApp on Mobile devices)

8 Buffer

9 StumbleUpon

10 Print (by using this function reader can easily print your post through printer)

This Social Sharing Bar is auto responsive.

How to add Social Sharing Bar on Blogger

Follow the instructions given below:

1              Go to Blogger Dashboard >> Blogger Template

2              Click on backup your template

3              Click on HTML Editor and Press CTRL + F

4              Copy this code and paste in search bar ]]></b:skin> then copy the below code and paste immediately before ]]></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 solid #cde3ea}
#AOAshares .stumb:hover{border:px solid #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! important ;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 solid #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 screen and (-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 solid #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 solid #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 solid #f3f3f3!important;padding:3px 2px 0!important;background:#fff; position: fixed;z-index:99999;bottom: 7%;float: left;border-right:0px solid #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 solid #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 solid #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 solid #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;
}

Demikianlah Artikel Social Sharing Gadget/Bar for Blogger

Sekianlah artikel Social Sharing Gadget/Bar for Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Social Sharing Gadget/Bar for Blogger dengan alamat link https://anothers-stuff.blogspot.com/2016/03/social-sharing-gadgetbar-for-blogger.html

Tweet