There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with attractive design which we have created early, its a second version of our previous social subscription plugins with tooltip. In this version we have removed some CSS reset bugs and also make some addition in the plugin layout. The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google plus, FACEBOOK, Twitter, PINTERST, RSS FEED, LINKEDIN, TUMBLR and YOUTUBE.Why Social Plugin Important: A Writer Chuck Price share an article on Search engine watch before 3 months ago and said social profiles are very important for boosting your search engine ranking. Read the statement below or you can read full article about ranking, traffic and backlinks.
“Think about where your target audience spends their time. Is it Facebook, Twitter, pinterest? You need to be there as well. Like blog and forum communities, getting to know people via social media opens up link opportunities.”
So now leave the discussion and go ahead to add social plugin to your blogger blog.
before adding see live demo click the button below and go ahead
How to add it blogger
1. Go to Template > Edit HTML.
2. Back up your template.
3. Look for the following data tag in your Template.
]]></b:skin>
4. Paste the following code immediately above (before) it:
#social_profiles-wrap {
background: rgba(255,255,255,0.3);
width: 450px;
height: 120px;
margin:auto;
border-radius: 4px;
font-family: 'Open Sans Condensed', Verdana;
position:absolute;
border: 1px solid #f2f2f2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
ul.social_profiles {
margin:0 37px;
text-decoration: none;
}
.social_profiles li{
display:block;
float: left;
margin: auto;
list-style-type: none;
}
.social_profiles li a {
display: inline-block;
width: 40px;
height: 40px;
outline: none;
margin-right: 7px;
position: relative;
vertical-align: middle;
z-index: 3;
text-decoration: none;
}
.social_profiles li a > :last-child {
margin-right: 0 !important;
}
.social_profiles li .facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat;
}
.social_profiles li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqE_pL43VObP7ehESBRkysJ8DRBaVvcTIRV6U2cF0t2T7sCYiPOD0jIqiaWZwLNX04jQ_5GiNL132vLGeje0Dn2vDdAky_uxnvVI-S1kpJpf_bXqn51WuDyflWcKC7VW4kCm2q24dezgqF/s1600/social_sprite.png") no-repeat 0px -360px;
}
.social_profiles li a span {
width: 60px;
height: auto;
padding: 2px;
left: 50%;
margin-left: -38px;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 400;
font-size: 12px;
color: #fff;
text-align: center;
border: 5px solid #446cb3;
background: #446cb3;
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 5%;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social_profiles li a span:before,
.social_profiles li a span:after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.social_profiles li a span:after {
bottom: -15px;
margin-top: 6px;
margin-left: -10px;
border-top: 10px solid #446cb3;
}
.social_profiles li a:hover span {
opacity: 0.9;
bottom: 50px;
}
Now lets go and do one more step…
5. Now again look for the following data tag in your Template.
<div class='post-footer'>
Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this. Locate the post-footer (from top) one.
6. Paste the following code immediately below (after) it:
<div id="social_profiles-wrap">
<p style=" color:#446cb3 ; font-size:16px; font-weight: 700; text-align:center;text-decoration:none !important;">Don't Miss Any Update Join Us on Social Networks.</p>
<ul class="social_profiles">
<li><a class="facebook" href=http://www.facebook.com/mybloggerstricks target="_blank"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/mybloggertriks target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/103598710564060829080 target="_blank"><span>Googl+</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/mybloggertrickx target="_blank"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/mybloggerstrick target="_blank"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/mybloggertricks target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.com/mybloggertricks target="_blank"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/mybloggertricks target="_blank"><span>Youtube</span></a></li>
</ul></div></div>
Note:- Change the links in yellow color with your social profiles links.
I hope you enjoyed this little effect and find it useful!.. As we state in our previous tutorial, it will only work in modern browsers that support pseudo-elements and CSS transitions. if you have question or need to change something like width, font family or color, please let us know we try help you on every way. lastly cheers :)
