In the past, we had released many Social Traffic Pops, which had some most popular social buttons i.e. Facebook
and Twitter. Similarly, this time the concept is not new because we
have just replaced the two other Social sites with Google+. We have also
added a Timer, now if a visitor wants to access your site he either
have to like subscribe or have to wait until the timer reaches the
zero.
Before, we get onto our Tutorial let us first learn the meaning of a
Traffic POP because mostly novice bloggers are unaware of it. So here
how it goes:
- Traffic POP: It is a kind of a widget that pops up, whenever a visitor arrives on your website. It blocks access the whole website until a visitors share your site on any of the mentioned social sites. Consider the following screenshot to see how a Traffic POP looks like.
How to Add a Google+ Traffic POP in Blogger:
We have kept the steps extremely straightforward so that anyone can
easily apply them on any kind of website. Yes, it works on almost all
platforms. However, since, we promote Blogger Platform. Therefore, the
following instruction only applies on Blogger Platform.
Go to Blogger.com >> Template >> Edit HTML >> Proceed.
Now within the Template, Search (CTRL+F) for the ending </head>
Tag and just above it paste the following JavaScript Coding.
<!--Google+ Traffic POP for Blogger By Mybloggerlab.com-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.4.2" type="text/javascript"></script>
<script src="https://apis.google.com/js/plusone.js?ver=3.4.2" type="text/javascript"></script>
<script charset="ISO-8859-1" src="https://mybloggerlab.googlecode.com/files/googlepops.min.js" type="text/javascript"></script>
<style>
#gpp-bg{
display:none;
position:fixed!important;
_position:absolute; /* hack for IE 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:998;
}
#gpluspop{
position:fixed!important;
_position:absolute; /* hack for IE 6*/
width:450px;
border:7px solid #2f2f2f;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzBFa5r2ltXiuzpUzfvzvOiyM-0tR27vQ-lp6naMpmI8LYUs2wI_h0zqePKTwn6tcUKvWcdhtFeZdGjTe8cAQ9ZmxBKbMb8FLknnCGzmoJVLmsPnOe5n7BVol-mW1LMs9f_yj-MIpNlQA/s1600/background.png) top center no-repeat #fff;
z-index:999;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif !important;
font-size:13px;
}
#gpp-title{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
font-size:12px;
padding:12px 0px 9px 10px;
font-size:16px;
}
#gpp-close{
float:right;
font-size:12px;
color:#000!important;
margin:0 13px 0 0;
border-bottom:0px !important;
text-decoration:underline !important;
}
#gpp-close:hover{
text-decoration:none !important;
}
#creditosamama { margin-left:10px; margin-top:-10px;}
#creditosamama a { color:#696868}
#gpp-msg{
border-bottom:1px solid #cddcf9;
border-top:1px solid #cddcf9;
background:#ebf2fc;
padding:16px;
}
#gpp-button{
margin:10px 0 0 0;
}
#gpp-bottom{
padding:5px 10px 10px 0px;
}
#gpp-counter{
font-size:11px !important;
margin-top:5px;
text-align:right;
}
</style>
<script>
jQuery(document).ready(function () {
jQuery().googleTrafficPop({
timeout: 30,
title: 'Google+ Traffic Pop',
message: 'Seems Like the Website Is Locked :P Just +1 and get Access to the Content!',
url: 'http://www.mybloggerlab.com',
wait: 0,
opacity: '0.45',
advancedClose: false,
closeable: false
})
});
</script>
Customization:
- Replace http://www.myblogeffect.blogspot.com with any URL that you want. Remember: This would be the URL which will receive all the +1's from your visitors.
- If anyone desire to increase the seconds of the timer then, he can replace 30 accordingly. Remember: The extension of the timer is in Seconds.
- If anyone want to display a Close button instead of timer then simply replace false with true from the "closable" JavaScript command.
0 comments:
Post a Comment