How to add popup social share widget in blogs

social share widget is a very good and working way to increase traffic to Blog. If you are a blogger too, you can easily increase your blog traffic through it. In this post, you are going to tell about adding popup social share widget to the blog. Very simple way you can add this widget to your blog.

Since I was public about the internet and when I stepped on the internet, social share widget was the only public in the world and I had first made an account on Facebook on the internet. Still, I am active on social share widget but due to lack of time, now I can not give the same time as before.

With the help of social share widget, we can increase the traffic of our blog in a very short time. Many people are always active on social media to enhance their blog’s popularity. I have seen many success bloggers like he updates a new post on his blog and shares it in social share widget. This lets the old visitor of his blog know and he visits the blog to read the post. In the same way, if you want you can increase the traffic of your blog with this help.

If you add a social share widget to your blog, then it will be able to easily share your blog visitor post in social share widget, which will bring traffic to your blog. The feature of this social share widget is that it is open in popup. After 10-12 seconds, the automatic closure will be done. This widget is almost supported in the browser. Here are some popular social share widget like facebook, twitter, google plus, linkedin, Pinterest and social media. There are 6 social networks in total. Font Awesome is also embedded in it, so it will also be well designed and fast loading too.


How to Add Popup social share widget to Blogs


Now let’s tell you about adding this widget to a blog. In the past you will want to tell one more thing that if you have already added social sharing widget to the blog, then it can or may not even do widget work. That’s why remove the old social sharing widget before adding this widget.

Step 1:

First, login to Blogger and go to Blog’s Dashboard.

  1. Now click on the template.
  2. Then click Edit HTML.

Step 2:

Now press CTRL + F in the keyboard and search <head>. Now copy the code below and paste it below <head>.

<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’/>

Step 3:

Now press CTRL + F button and search </ head>. Now copy the code below and paste it below </ head>.

<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>

Step 4:

Now by pressing CTRL + F button again]]> </ b: skin> to search. Now copy the code below]]> </ b: skin> paste the code below just above.

<style type=’text/css’>

/*————————————————————

Popup Social Share Bar for Blogger

Designed by: Raaz

Founder of: https://www.lsvdpr.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>>

Step 5:

Now press CTRL + F button again and search for <div class = ‘post-footer-line post-footer-line-3’>. After searching, copy the following code to be pasted and paste the following code of <div class = ‘post-footer-line post-footer-line-3’>.

  1. <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@LSVDPR – &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>Type your twitter user name in the above code @LSVDPR and you can change it in place of 120000. This is popup timing. 1000 = 1 second
  2. Now save the template.

I hope you enjoy this information. Share this post in social media.