Like us on facebook to get more free pro tricks daily...!

Liked us?

Sunday 13 May 2012

Pin It

Premuim Social Traffic popup plugin for blogger


A Social Traffic Pop Up with timer function

Boost your blog traffic with your exiting readers help

I have provide most awaited Social traffic Popup widget for blogger  When the Facebook Like box or +1 button placed in your blogs sidebar, It\'ll not be a attractive place to force the readers to click them.But When a +1 button or Like box popes Up (without annoying them) The readers will surely  click on buttons.
Also you can add Email subscription box in the pop up too.

Features

  • Combined reach of over 1.4 BILLION social media accounts.
  • Completely locks all page usability until popup is closed or a social action is completed.
  • Popup stays centered as the user scrolls up and down.
  • Optional close button.
  • Optional advanced close features allow visitors to close the popup by clicking outside of the popup area or by pressing the escape key.
  • Cookies remember which users have not completed a social action.
  • Like Button and Google +1 with dependent URL configurations.
  • Support for both of Twitters Follow and Tweet buttons.
  • Setup takes literally seconds!
  • 100% customizable CSS.
  • Configure everything from the beautiful built in settings panel.
  • Set background opacity right from the settings.
  • Works on all sites big and small.
  • Proven to induce more social shares = more traffic & better rankings = more $$$$

1.Install The java script

First log in to your Blogger account, Then Go to.. Template tab and then BackUp your template in case if you accidentally delete or add a wrong code.

Then Click Edit HTML and search for </head> tag ( Ctrl+F ) . Add the following code just before it.

<!--Start Social Traffic Pop Up by 7terabyte.blogspot.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});
//only need force for IE6

$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {

//load popup
setTimeout(&quot;loadPopup()&quot;,5000);
}
//CLOSING POPUP
//Click the x event!
$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Click out event!
$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});

});
</script>
<!--End Social Traffic Pop Up by 7terabyte.blogspot.com -->
If you are familiar with Java Scripts, The comments marked with Red color is for you.


2.CSS Code

After the Java script, Search for this code   ]]></b:skin>  Just before it add the following code.


#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
        border-top:5px solid #53A9FE;
        border-left:5px solid #53A9FE;
        border-bottom:5px solid #53A9FE;
       border-right:5px solid #53A9FE;
border-radius:30px;
       -moz-border-radius:30px;
       -webkit-border-radius:30px;
       
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:center;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color#A30101;
font-weight:700;
display:block;
}

3.The Gadgets to appear

You can add anything that fit with the popup box. Such as a feedburner subscription box, Like box, Share buttons or anything. Just with the above format.
And this code should be apear Just before  </body> tag.


<div id='popupContact'>
<a id='popupContactClose'>
<img alt='x' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUI5vBI43OmWHrCM4TdCnsS9UqlxGAiOSGS_gVfqWZkQVrJlQjWXuO7b61L2lRUK-VRn9VeQ9Dbdt5emTbrjMTbSmYPywnTjPOU1PgbCIIg34S47lfwhSbvbUSDanXABEOEUkWfVEzuOwz/s800/Button-Close-icon.png' width='20'/>
</a>
<h1>PopUp Title</h1>
Code of the gadget you need
<br/>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.blogtrickstream.com/2011/12/one-time-popup-for-blogger-like-box.html">Get This</a></p>
<p id='contactArea'/>
</div>
<div id='backgroundPopup'/>



Just replace " PopUp Title " with a PopUp title of your choice . Also replace " Code of the gadget you need " with your gadged HTML code, It could be a Like box, +1 button, Subscription box, Welcome message.. or any.

Thats all...!!!


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Reddit Facebook Twitter
Do you Like this Article..?

Get Subscribe to Free Email Updates!!

*Your email address will not be shared with anyone.



Link To This Page:


Link To Home Page:

2 Responses to Premuim Social Traffic popup plugin for blogger

Anonymous said...

Excellent website. Plenty of useful information here.
I'm sending it to a few pals ans additionally sharing in delicious. And obviously, thanks to your effort!
Also visit my site ; seo

dongvd on 25 October 2012 at 06:38 said...

I have apply this code for my blog. Thanks
Visit my blog bongdensang.info

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder.
2. If you are including a link, Please include it using html tags. However irrelevant links are not tolerated.
3. Please do not spam, Spam comments will be deleted immediately after our review.

Regards,
Rupesh.

 

Total Pageviews

Translate

7TeraByte © 2012. All Rights Reserved | DMCA Protected | Back To Top