In this Blogger tutorial we will add the Popup Widget box, this Popup is very simple design it will show on the center in any page on blogger site, This popup helps to your site engagement for Facebook Likes if put facebook page plugin or adds engagement for email subscribers, Popup Widget Box is effective engagement compare than sidebar widgets, base on my website popup email subscribing users are engaging to subscribe in the popup box than sidebar email subscribe.
This popup script made by jQuery FancyBox Plugin, so we need to include the jQuery library script to works this popup, we will add this Blogger Popup Widget Box in step by step my advice… READ the instruction
You can also watch the video tutorial version in my YouTube Channel.
Before we get start see the preview:
Blogger Popup Facebook Like Box Preview
Popup Email Subscription Preview
the popup that’s look like, so let’s started…
Step 1: Check your template if have already jQuery Script
Go to Blogger Admin, Themes -> Edit HTML and ctrl + f (inside the editor) and find the word ‘jquery’, and check your theme if already have jquery library. (see screenshot)
if your theme already have jQuery have library -> Go to STEP 2…
If your theme have NOT jQuery library , add the library, (ctrl + f) and find the…
</head>
and add the library before that close head tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Mostly third party template already have jQuery library, like other than Blogger built-in themes i guess i has No jQuery library and you’ll need to add it.
Step 2: Adding Popup jQuery FancyBox Script
Add this Fancybox script and style before close head tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script language="javascript">
//<![CDATA[
jQuery(function($) {
/* coded by @axlmulat */
$(window).load(function() {
/* coded by @axlmulat */
var seconds_pop = 20000; // 20 seconds
var expireDate = new Date(); // todays date
var minutes = 30;
expireDate.setTime(expireDate.getTime() + (minutes * 60 * 1000)); // 1 hour
var BlogSiteVisit = parseInt(cookieVal("BlogSiteVisit")); // parse in convert str to int // bcus it is content
BlogSiteVisit++; // loop by 1
if(BlogSiteVisit == 1) { // if BlogSiteVisit if 1
document.cookie = "BlogSiteVisit=" + BlogSiteVisit + ";expires=" + expireDate.toGMTString() + ";path=/"; // store cookie
setTimeout(function(){ // then show popup, deley in .5 second
$.fancybox.showLoading(); // show loading
setTimeout(function(){ // then show popup, deley in .5 second
$.fancybox({ // Fancybox Properties
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayColor' : '#000',
'overlayOpacity' : '.6',
'href' : '#popup_content',
'helpers' : { overlay : {closeClick: false } },
'onCleanup' : function() { }
});
}, 500); // .5 second
}, seconds_pop);
} else {
return;
}
function cookieVal(cookieName) {
var thisCookie = document.cookie.split("; ");
for (var i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1];
}
}
return 0;
}
});
}); // jQuery End
//]]>
</script>
The Popup will appear in 20 seconds, you can adjust the value in the script if you want
var seconds_pop = 20000;
20000 is 20 seconds, 10000 is 10 seconds.
The popup shows once every 1 hour, and it will not show every time because the visitors will distract.
Step 3: Adding Hidden div tag for popup
and lastly the content of the popup box, find this close body tag
</body>
and paste the html code below before that close body tag
<div style="display:none">
<div id="popup_content">
<p style="text-align: center; font-weight: bold;">Please Support us, we inspire to create more.</p>
Your Content here (Message or Facebook like box or Email Subscription)
</div>
</div>
And Now how Popup Works?
The popup will show up every 30 minutes, this value is set into…
var minutes = 30;
When the popup show up it will save a Cookie Name to your Browser, the cookie name is BlogSiteVisit, if want to show the popup again just delete this cookie name to your Browser, this cookie will expire after 30 minutes, after expire the popup will show up again.
If in case height / width box issue in Firefox Browser
The popup will resize automatically, if in case you can set the height and width of the popup by replacing / add the fancybox properties in the like…
$.fancybox({ // Fancybox Properties
'width':340, // added
'height':255, // added
'autoSize' : false, // added
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayColor' : '#000',
'overlayOpacity' : '.6',
'href' : '#popup_content',
'helpers' : { overlay : {closeClick: false } },
'onCleanup' : function() { }
});
The popup will resize automatically, if in case you can set the height and width of the popup by replacing / add the fancybox properties in the like…
Hidden div tag for popup with Facebook like box
Javascript in blogger editing xml template you must add CDATA wrap to able to run the Javascript, here’s the sample for adding Facebook like box just change into your Facebook page.
<div style="display:none">
<div id="popup_content">
<p style="text-align: center; font-weight: bold;">Please Support us, we inspire to create more.</p>
<!--Step 2: -->
<div id="fb-root"></div>
<script language="javascript">
//<![CDATA[
(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/sdk.js#xfbml=1&version=v2.9&appId=816316045205143";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!--Step 3: change this to your facebook page-->
<div class="fb-page" data-href="https://www.facebook.com/axlmulatblog/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/axlmulatblog/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/axlmulatblog/">Axlmulat.com</a></blockquote></div>
</div>
</div>
Now you can replace your own content like Facebook Like Box or Email Subscription like Google Feed Burner, also video tutorial available in my Youtube Channel, if you like this post please like and share, thank for reading happy blogging…
