Social Plugins: Stay Tuned Social Subscription Widget V 2.0

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 simple design, which we have created early, its a second version of our previous social subscription plugins with tooltip. In the updated 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, Rss Feed, Linkedin, Tumbler and the lastly on 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 by clicking the live preview button below.

Update: Bug Fixes for alignment and added Responsive Mobile friendly width property. For the example of update you check the great tutorial written by martin wolf.

Live Preview

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: 94%;
    height: auto;
    float: left;
    margin: 10px 0 10px 0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    font-family: 'Open Sans Condensed', Verdana;
    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);
    text-decoration: none;
}

#social_profiles-wrap p {
    color: #446cb3;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.social_profiles {
    display: inline-block;
    padding: 5px 0;
}

ul.social_profiles {
    background: none;
    float: none;
    margin: 0 37px;
    text-decoration: none;
}

/* fix for ul li default arrow symbol*/
ul.social_profiles li {
    background: none !important;
    padding: 0!important;
}

.social_profiles li {
    display: inline;
    margin-top: 40px;
    list-style-type: none;
}

.social_profiles li a {
    display: inline-block;
    list-style-type: none;
    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/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -45px;
}

.social_profiles li .gplus {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -90px;
}

.social_profiles li .pinterest {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -135px;
}

.social_profiles li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -180px;
}

.social_profiles li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -225px;
}

.social_profiles li .tumblr {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -270px;
}

.social_profiles li .youtube {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -315px;
}

.social_profiles li .mail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/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 code in your Template:

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

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this.

you just need to locate post-footer (from top) one.

6. Paste the following code immediately below (after) opening post-footer div:

<b:if cond='data:blog.pageType == "item"'>

<div id='social_profiles-wrap'>
Don't Miss Any Update, Join Us on Social Networks.
<ul class='social_profiles'>
<li><a class='facebook' href='http://www.facebook.com/mybloggerstricks' target='_blank'>Facebook</a></li>
<li><a class='twitter' href='http://twitter.com/mybloggertriks' target='_blank'>Twitter</a></li>
<li><a class='gplus' href='https://plus.google.com/b/103598710564060829080' target='_blank'>Googl+</a></li>
<li><a class='pinterest' href='http://www.pinterest.com/mybloggertrickx' target='_blank'>Pinterest</a></li>
<li><a class='rss' href='http://feeds.feedburner.com/mybloggerstrick' target='_blank'>RSS</a></li>
<li><a class='linkedin' href='http://www.linkedin.com/in/mybloggertricks' target='_blank'>LinkedIn</a></li>
<li><a class='tumblr' href='http://www.thumblr.com/mybloggertricks' target='_blank'>Tumblr</a></li>
<li><a class='youtube' href='http://www.youtube.com/mybloggertricks' target='_blank'>Youtube</a></li>
</ul></div></b:if>

Note:- Change the links highlighted 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, color or facing issue with alignment, please let us know we try to help you on every way. lastly want to say happy blogging..!! :)

My Blogger Tricks

Social Plugins: Stay Tuned Social Subscription Widget V 2.0

How to add it blogger

Ready To Be Make Elegant Blog

"Be the first to express your thoughts"

Post a Comment