Sunday, 24 May 2015

Social Sharing Widget for Blogger in WP Style

Today I'm sharing a New Social sharing Widget in WP Style. Many request comes from my blog readers for this type of widget. In this widget use four popular social network sharing codes (facebook , twitter , google+ and linkedin) and use slide-in and slide-out css code for social buttons. Lets check out this image preview and see my blog post below.
tips4tricx

How to add Social Sharing Widget For Blogger 

First,
  1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
Just follow 3 Simple steps,

THE JQUERY PLUGIN!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
and add social scripts code for widget load properly. Search for { Use CTRL + F } </body> tag and put below code before and save it.

<script type='text/javascript'>/*<![CDATA[*///Facebook 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'));//Twitter Script!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");//Google Plus Script(function(){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='https://apis.google.com/js/plusone.js';var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x)})();/*]]>*/</script>

Add CSS Code

This Code contain css styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages. ;)

Add the below snippet code before </head> tag and save it.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'>/*<![CDATA[*//*-----Social Sharing CSS code widget by www.tips4tricx.blogspot.com----*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons { border-radius: 5px; padding: 14px 7px; background: white; width: 680px; overflow: hidden; margin: 2px auto 0; box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center;}.icon i { color: #fff; line-height: 42px;}.slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;}.slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%;}.button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.facebook iframe { display: block; position: absolute; right: -16px; top: 10px; z-index: 1;}.twitter iframe { width: 90px !important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;}.google #___plusone_0 { width: 70px !important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;}.linkedin .IN-widget { top: 10px; right: 2px; position: absolute; display: block; z-index: 1;}.facebook:hover .slide { left: 150px;}.twitter:hover .slide { top: -40px;}.google:hover .slide { bottom: -40px;}.linkedin:hover .slide { left: -150px;}.facebook .icon, .facebook .slide { background: #305c99;}.twitter .icon, .twitter .slide { background: #00cdff;}.google .icon, .google .slide { background: #d24228;}.linkedin .icon, .linkedin .slide { background: #007bb6;} /*]]>*/</style> </b:if>

ADDING SOCIAL BUTTONS WIDGET

Let’s finally add the Social horizontal bar widget code.

Add this code before <data:post.body/> tag. { Paste this code after post body}

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='border-bottom: 1px solid #CCCCCC; padding: 10px 10%;margin:5px;'/><div id='sbuttons'><div class='facebook button'><i class='icon'><i class='icon-facebook'></i></i><div class='slide'><p>facebook</p></div><fb:share-button type='button_count'/> </div> <div class='twitter button'><i class='icon'><i class='icon-twitter'></i></i><div class='slide'><p>twitter</p></div><a class='twitter-share-button' data-via='tips4tricx' href='https://twitter.com/share'>Tweet</a></div> <div class='google button'><i class='icon'><i class='icon-google-plus'></i></i><div class='slide'><p> google+</p></div><!-- Place this tag where you want the +1 button to render. --><div class='g-plusone' data-size='medium'></div><!-- Place this tag after the last +1 button tag. --></div>  <div class='linkedin button'><i class='icon'><i class='icon-linkedin'></i></i><div class='slide'><p>linkedin</p></div><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script></div></div></b:if>
 
SAVE TEMPLATE!!!

Save the template and check your blog post pages, a working and awesome jQuery based New Slide-in and Slide-out social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.

CHANGES :

1. I FOUND THE TAG THREE TIMES?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
Place the Widget code in between the two tags.

2. HOW TO CHANGE THE BACKGROUND COLOR OF HORIZONTAL BAR?

You can change the background color of Horizontal bar.
Solution:
In the Second step (The Social Scripts), search for

background:#FFFFFF;
and change the #FFFFFF with your own Hex Color.
Previous Post
Next Post

post written by:

1 comment:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks