How to Add Google+ Traffic Pop in Blogger and Increase +1s

Socialize It →

Tweet

24

Advertisements

Google+ (sometimes written as Google Plus) is among the finest emerging Social Networking website of the year 2012 while Pinterest ends up being second. Google+ has more than 500 million users, which motivates a blogger to add a Small Google +1 button on his website. Whenever a visitor hits a +1 button, they are helping you to socialize your content, by distributing your content with their friends and family. However, sometimes users admire your content, but when it comes to sharing the content on the social web they fancy their chances and thus, ends up in not sharing. The great alternative of forcing your visitors to +1 your content is to use Google+ Traffic POP that does the job uninterruptedly. Therefore, today in this article, we will Learn How to Add a Google+ Traffic POP in Blogger BlogSpot.

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/AVvXsEi1kO6wHW0EXWWAFrYY58zE-Um_5f0nCSW0TMfmOvk1KdMyX2GAvpXLuZHlvu4FuMyECfGTH5gF05bqZ5nhm2fIDYIbaqmtkkQKvDxZPZiIKXszHoWItRsL8Ruibx81voksqw7OO5yQ53c/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:

1. Replace http://www.mybloggerlab.com with any URL that you want. Remember: This would be the URL which will receive all the +1's from your visitors.


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


3. If anyone want to display a Close button instead of timer then simply replace false  with true from the "closable" JavaScript command. 

That's all, now visitors have to +1 your site or they have to wait until the timers finishes. Since, this gadget catches the history. Therefore, after doing a +1 it will appear anymore. However, after removing history or clearing cache it will again start appearing.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).