Aug 27, 2016

Pop-Up Social Sharing Widget for Blogger

data:blog.title
Hey Bloggers. We hope you all are fine and enjoy blogging. Now a days there are billions of user active on the social networking sites every day. For a blogger social networking sites are a great opportunity to get free traffic to their blog which increase alexa rank and page rank of a blog.

People trust on those sites which have higher rank. For increasing blog's rank people doing many tasks like promoting their content through different advertisement companies, using paid newsletter service for their blog, using social content locker and using best social sharing widgets on their blog.

Also Read: Customized Contact Form for Blogger, Never Seen Before!

Recommended : Add Jumbo Social Sharing Counter Widget to Blogger with Fading Effect.

Pop-Up Social sharing widget is a good idea for asking readers to share your article on social networking sites. So, Today we are here to introduce another social sharing widget for blogger with popup effect. Below we are going to attach a live demo screenshot of this blogger plugin. Have a look on it and see how it works.

Popup Share Bar, Pop-Up Social Sharing Widget, Pop-Ups Blogger Social Sharing Widget

In this popup share bar we have included top six social networking sites buttons like as Facebook, Twitter, Google+, Pinterest, Stumbleupon and Linkedin. So we highly recommend everyone to use this widget on their blog and increase social traffic for their blog. There are many features we have inserted in this sharing widget which is given below.

Also Read: Add An Attractive One 404 Error Page to Blogger.

Features Of Pop-Up Social Share Bar

  1. Neat & Clean Widget,
  2. 100% Responsivity,
  3. Close button on top right corner,
  4. Insterted 6 Best Social Sites Share Buttons,
  5. Integration of FontAwesome Icons,
  6. Nice Mouse-Hover Effect,
  7. No-effect on Blog Loading speed, and
  8. Pop-Up After 2 minutes.
We hope these features are enough to attract blog reader to share your article on their social networking sites. If you want to add it on your blog then follow whole the instruction carefully which is given below.

Note: If you are using our Jumbo Social Sharing Counter Widget then don't add it on your blog. Because it doesn't works with jumbo share counter.

Note: Before doing any customization must download a backup copy of your Blogger template to save yourself from a serious trouble.

How To Add Popup Social Share Bar to Blogger?

STEP1] Go To Blogger.com >> Select Your Blog >> Click On Template >> Download A Backup Copy.
STEP2] Now Click on Edit HTML and search for <head> tag inside code area by pressing CTRL+F in Windows or CMD+F in MAC.

STEP3] Now paste following FontAwesome Stylesheet link and jQuery Library link just below of <head> tag inside code area.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Tip: If you have already jQuery library link and FontAwesome Stylesheet link inside your Blogger Template code area then skip this step or if your template have any one of them then paste the stylesheet which your blogger template don't have.

STEP4] Now search for ending </head> tag inside code area and paste following code just above of </head> tag.

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>

STEP5] Now search for ]]></b:skin> tag and paste below CSS code just below of ]]></b:skin tag.

Note: You don't have permission to share my codes on your blog. Stay away from my codes to save yourself from serious trouble. Respect the Hard work of designers. Thank You!

<style type='text/css'>
/*------------------------------------------------------------
Popup Social Share Bar for Blogger
Designed by: Paramjot Singh
Blogger at: http://www.mybloggerguides.com
Distributed Under GPL License
Icons:: FontAwesome 4.6.3
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
#MBG_Popup-SocialBar{display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:99999999;}
#MBG_Popup-SocialBar .popup_social_menu {
 border:3px solid #fff;
 background-color:#fff;
display: block;
list-style:none;
max-width:555px;
padding: 0;
margin: 0 auto;
position:relative;
box-shadow:14px 14px 14px -14px #111;
  top:25%;}
#MBG_Popup-SocialBar .popup_social_menu:hover{box-shadow:2px 2px 2px 2px #111;}
#MBG_Popup-SocialBar .popup_social_menu .exit-button-sharebox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 0px;
  margin-right: 2px;
}
#MBG_Popup-SocialBar .popup_social_menu .exit-button-sharebox:before {
 content: "X";
  padding: 5px 5px;
  background: #fff;
  color: #111;
  font-weight: normal;
  font-size: 16px;
  font-family: sans-serif;
}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_facebook { background: #3a579a;}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_facebook:hover { background: #314a83; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_twitter { background: #00abf0; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_twitter:hover { background: #0092cc; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_googleplus { background: #df4a32; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_googleplus:hover { background: #be3f2b; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_pinterest { background: #cd1c1f; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_pinterest:hover { background: #ae181a; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_stumbleupon { background: #ea4b24; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_stumbleupon:hover { background: #c7401f; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_linkedin { background: #2554BF; } #MBG_Popup-SocialBar .popup_social_menu .popup_button_linkedin:hover { background: #224EB4; }
#MBG_Popup-SocialBar .popup_social_menu .popup_button_facebook, #MBG_Popup-SocialBar .popup_social_menu .popup_button_twitter, #MBG_Popup-SocialBar .popup_social_menu .popup_button_googleplus, #MBG_Popup-SocialBar .popup_social_menu .popup_button_pinterest, #MBG_Popup-SocialBar .popup_social_menu .popup_button_stumbleupon , #MBG_Popup-SocialBar .popup_social_menu .popup_button_linkedin{box-shadow:4px 4px 4px -4px #111;}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_facebook:hover::before{Content:"Share on"; color: #fff !important; font-family: Oswald; font-size: 16px; font-style: normal; font-weight: normal; line-height: 0.8em; position:relative;
 -webkit-transition: all 0.2s ease-out !important;
 -moz-transition: all 0.2s ease-out !important;
 -o-transition: all 0.2s ease-out !important;
 transition: all 0.2s ease-out !important;}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_twitter:hover::before{Content:"Share on"; color: #fff !important; font-family: Oswald; font-size: 16px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; bottom:-10; position:relative; }
#MBG_Popup-SocialBar .popup_social_menu .popup_button_googleplus:hover::before{Content:"Share on"; color: #fff !important; font-family: Oswald; font-size: 16px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 1.3s ease-in-out; -moz-transition: all 1.8s ease-in-out; -ms-transition: all 1.3s ease-in-out; -o-transition: all 1.8s ease-in-out; transition: all 1.3s ease-in-out; bottom:-10; position:relative;}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_pinterest:hover::before{Content:"Share on"; color: #fff !important; font-family: Oswald; font-size: 16px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 1.3s ease-in-out; -moz-transition: all 1.8s ease-in-out; -ms-transition: all 1.3s ease-in-out; -o-transition: all 1.8s ease-in-out; transition: all 1.3s ease-in-out; bottom:-10; position:relative;}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_stumbleupon:hover::before{Content:"Share on"; color: #fff !important; font-family: Oswald; font-size: 16px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 1.3s ease-in-out; -moz-transition: all 1.8s ease-in-out; -ms-transition: all 1.3s ease-in-out; -o-transition: all 1.8s ease-in-out; transition: all 1.3s ease-in-out; bottom:-10; position:relative;}
#MBG_Popup-SocialBar .popup_social_menu .popup_button_linkedin:hover::before{Content:"Share on"; color: #fff !important; font-family: Oswald; font-size: 16px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 1.3s ease-in-out; -moz-transition: all 1.8s ease-in-out; -ms-transition: all 1.3s ease-in-out; -o-transition: all 1.8s ease-in-out; transition: all 1.3s ease-in-out; bottom:-10; position:relative;}
#MBG_Popup-SocialBar .popup_social_menu > ul { margin: 5px 0px 0px 0px;; padding: 0; list-style: none; }
#MBG_Popup-SocialBar .popup_social_menu .share { background: #fff; color: #111; font-size: 12px; height: 50px !important; width:100%;  box-shadow:4px 4px 4px -4px #111; text-align:left;   }
#MBG_Popup-SocialBar .popup_social_menu .share .h2 { font-family: Oswald; text-align:center!important; font-size:18px; top:10px; position:relative;}
#MBG_Popup-SocialBar .popup_social_menu > ul > li { margin: 2px 2px 0px 0px; position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 50px; width:49.21%; overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#MBG_Popup-SocialBar .popup_social_menu > ul > li a { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none; }
#MBG_Popup-SocialBar .popup_social_menu > ul > li i { color: #fff !important; font-family: FontAwesome; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; top:13px; position:relative; }
#MBG_Popup-SocialBar .popup_social_menu > ul > li:hover i { opacity: 0.9; top:-5px; }
@media only screen and (min-width:420px) and (max-width:559px){
  #MBG_Popup-SocialBar .popup_social_menu > ul > li{width:48.94%;}
}
@media only screen and (min-width:320px) and (max-width:419px){
  #MBG_Popup-SocialBar .popup_social_menu > ul > li{width:48.61%;}
}
</style>

STEP6] Now search for below line inside blogger template.

<div class='post-footer-line post-footer-line-3'>

STEP7] Now paste following HTML code just below of <div class='post-footer-line post-footer-line-3'> line.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div id='MBG_Popup-SocialBar'>
      <div class='popup_social_menu'>
<div class='share'>
<div class='exit-button-sharebox'/>
<div class='h2'>Share This Article <i class='fa fa-share'/></div> 
        </div>       
    <ul>
   <li class='popup_button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/></strong>
</a>
</li>
<li class='popup_button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @MyBloggerGuides - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/></strong>
</a>
</li>
<li class='popup_button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/></strong>
</a>
</li>
<li class='popup_button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/></strong>
</a>
</li>
<li class='popup_button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/></strong>
</a>
</li>
<li class='popup_button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/></strong>
</a>
</li>
</ul>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie(&#39;sharebar_popup_box&#39;) != &#39;yes&#39;){
$(&#39;#MBG_Popup-SocialBar&#39;).delay(120000).fadeIn(&#39;medium&#39;);
$(&#39;.exit-button-sharebox, .button&#39;).click(function(){
$(&#39;#MBG_Popup-SocialBar&#39;).stop().fadeOut(&#39;medium&#39;);
});
}
$.cookie(&#39;sharebar_popup_box&#39;, &#39;yes&#39;, { path: &#39;/&#39;, expires: never });
});
</script>
<!-- /Jumbo-Share-Counter-Ends -->
    </b:if>
    </b:if>

Customization:
Change twitter User ID (@MyBloggerGuides) in above code with your twitter User ID.
Change 120000 If you want to make changes in Popup timing. 1000 = 1Sec.

STEP8] Now Click On Save Template. That's it.

Also Read: Create Responsive Drop Down Menu With Search Box in Blogger.

Also Read:  Viral Grid-Mag Blogger Template! Professional and Free Version.

Conclusion:

So above guide is about "How To Add Pop-Up Social Sharing Widget to Blogger Blog?" We hope above guide is enough to understand the method of adding this popup social sharing bar to blogger blog. We hope you will like it. If you have any query or any suggestion then drop a comment below. Your opinions are always welcome. Do Share and Subscribe Us.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.