Like To Enter Advanced Social Traffic Pop For Blogger

Advertisements
Are you looking for an advance Social Traffic Pop, so that you can convert your regular visitors into Social Followers? The main intention of using Traffic pop is to get more exposure on Social websites i.e. Facebook, Twitter and Google Plus. Though there are tons of Traffic Pops available on the internet, but they neither have splendid features, nor they provide user friendly experience. Today we have assembled an Advanced Traffic Pop that will not only increase your social traffic, but would surly give a peaceful experience to your visitors.


What is a Traffic Pop?

Usually people don’t know what does Traffic Pop means, or sometime they are unable to name it. Traffic Pops are your gateway to utilize your traffic by increasing social followers. Social Pops is a widget that only appears when someone lands on your webpage. Usually it has Follow buttons that increase your followers. For Instance, Someone visit your website and a  Pop came into action, now chances are extremely high that he might become your permanent followers by following you on his favorite social networking website.

What’s New In Advance Traffic POP?

Before we jump onto our tutorial first let us learn why we are calling this Traffic pop, “Advanced”. The major reason behind calling this Pop Advance is its robust features that give fruitful treat to both Bloggers and visitors. Follow are some key features of this widget.

  • It has a Close button that would allow users to dismiss and continue reading the content.
  • It is built with a combination of 3 Social websites i.e. Facebook, Google Plus and twitter.
  • Easy to use customizable CSS (Style sheet) works perfectly on Internet Explorer, FireFox, Chrome and etc.
  • Remembers Cookies for those users who have already shared of subscribed.
  • It will only appear to those Visitors who are not following you on any Social website, but if they started to follow then this widget would stop appearing to them.

Installing Share To Enter Traffic Pop in Blogger:

The steps are pretty much straightforward, and it would not require any sort of HTML or CSS training you just have to follow the steps correctly as mentioned bellow.

  • Login to Your Blogger Dashboards >> Template >> Edit HTML >> Proceed.
  • Now within the Template coding Search For ]]></b:skin> and just above it paste the following CSS coding and save your template.
/*---MyBloggerLab.com Like To Enter Advance Traffic POP ---*/
.blackout {
display: none;
position:fixed;
_position:absolute;
width: 100%;
z-index:10000;
background-color:#000;
margin: 0px;
padding: 0px;
left:0;
top:0;
}
.socialmodalOuter {
display: none;
font-family: arial;
color: #575E6D;
    font-size: 14px;
line-height: 20px;
background: rgb(73, 73, 73); /* The Fallback */
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    left: 50%;
    padding: 7px;
    position: fixed;
_position:absolute;
    top: 50%;
    z-index: 10001;
}
.socialmodal {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    width: 460px;
}
.socialmodal .title {
    border-bottom: 1px solid #E5E8EF;
    font-weight: bold;
    font-size: 19px;
    font-weight: bold;
padding:16px 15px 10px 15px;
text-align:center;
}
.socialmodal .subtitle {
margin: 0px;
background:#2e6886;
color:#ffffff;
padding:4px;
text-align:center;
font-weight: bold;
font-size: 15px;
}
.socialmodal .warning {
margin: 0px;
background:#cb2026;
color:#ffffff;
padding:4px;
text-align:center;
}
.socialmodal .content {
padding: 0px 15px;
    margin-top: 10px;
line-height: 17px;
}
.socialmodal .share {
padding: 0px 15px;
margin:20px 0px 15px 0px;
text-align:center;
height: 24px;
}
.socialmodal .close {
background: url("http://1.bp.blogspot.com/-Ke5ehk-86ic/UDjNPBFGGSI/AAAAAAAAE7Q/n_T4qfGD40U/s1600/close.png") no-repeat;
    cursor: pointer;
    height: 12px;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 12px;
display: none;
}
.socialmodal .button {
    float: left;
    width: 115px;
line-height: 24px;
height: 24px;
}
.socialmodal .like {
margin-left: 15px;
}
.socialmodal .twttr {
margin-left: 30px;
}
.socialmodal .plus {
width: 90px;
margin-left: 50px;
}
/*
// cusomize position of elements
*/
.socialmodal .footer {
clear: both;
    background: none repeat scroll 0 0 #E8EAEF;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #DDE0E8;
    padding: 10px 0;
    color: #878D9C;
    text-shadow: 0 1px 0 #FFFFFF;
text-align:center;
font-size:13px;
}

  • Now Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and Paste the Following Code there.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  !window.jQuery && document.write('<script src="js/jquery.js"><\/script>')
</script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript" gapi_processed="true"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="http://mybloggerlab.com/Scripts/Sharetoenter.js" type="text/javascript"></script>
<script src="http://mybloggerlab.com/Scripts/jquery.cookie.js" type="text/javascript"></script>
<script language="javascript">
$(function() {

$('body').socialmodal({
uniqueName: 'autoloadmodal',
subtitle: 'Like And +1 to Disable This Notification',
facebook: 'http://www.facebook.com/mybloggerlab',
plusone: 'http://www.mybloggerlab.com/',
count: 0,
manualClose: true,
});
$('body').socialmodal({
twitter: 'mybloggerlab',
onclick: '#download',
callback: function(success) {
},
});

});
</script>

Customization: 
To add your Facebook Page Replace http://www.facebook.com/mybloggerlab  with your Fan Page or any URL that you want to target for Facebook likes.

If you want to change the Notification message replace Like And +1 to Disable This Notification from the above coding.

To change Google Plus URL Replace http://www.mybloggerlab.com/ with your Home page URL.

All Done: After customizing the Like To Enter Traffic Pop, go a head and save your widget by pressing Save button. Now wait for few hours to witness the significant increase in the numbers of your social Followers.

What’s Next?

Though the advance traffic pop has all the functionalities but anything cannot be perfect, so in coming weeks or months we will share an improved version of it by including some more splendid features i.e. Email Subscriptions and etc. Till then take a lot care of yourself and your family Peace, Blessings and happy popping. 
Advertisements

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

Comment With:
OR
Choose Wisely!

33 comments

August 25, 2012 at 12:33 PM

Awesome share bro.
Keep up your hard work:)

August 25, 2012 at 12:39 PM

But i can enter without liking??
Internet Dreamz

Editorial Team MOD
August 25, 2012 at 12:40 PM

Check Out the Demo, Their is a Close Button. But Once a User have Like it This Widget will never Appear For Him Only. Peace

August 25, 2012 at 12:53 PM

Lokking Amazing Dear Nice Post Sir :P Don Paii :|

August 25, 2012 at 1:13 PM

Can I remove the close button?

If i want to add this for a secret page. I think it would be better.

Editorial Team MOD
August 25, 2012 at 1:14 PM

Yes You Can From the Above Coding>> manualClose: true, << Turn it False From True. Peace

August 25, 2012 at 2:14 PM

looking nice thanks for tutorial. Does it works for wordpress?

Editorial Team MOD
August 25, 2012 at 2:27 PM

I Assume it Should Work On WordPress.

August 25, 2012 at 2:57 PM

this looks interesting, but complicated for me. i dont use wordpress. but i have blogger.com.

Editorial Team MOD
August 25, 2012 at 3:12 PM

I Don't Think its Complicated! And Its for Blogger. Enjoy

August 25, 2012 at 10:36 PM

Hey Buddy nice effort can you tell me any widget like this for wp?

August 26, 2012 at 12:47 AM

same as script installed on pak.net which is on wordpress

Editorial Team MOD
August 26, 2012 at 3:27 AM

Not Exactly, the website which you mentioned in using a Facebook Pop. and This one has Google Plus, Twitter and Fb which is Three in one. Peace

August 26, 2012 at 5:57 AM

This does not work for my blog www.multibandtechnologiessw.blogspot.com Any thoughts? Please email on simon.weiner@multibandtechnologies.com
Unfortunately I can't add my HTML here for you to review. Simon

Editorial Team MOD
August 26, 2012 at 6:11 AM

Dude Its Working Properly. The Reason why you're unable to see it is that you have already liked, Twitted, and Google Plus your URL. So First Unlike Fan Page and Google Plus then clear cookies and Check it will Appear. Here is the Screenshot that it is working. Peace

Check This Image Working Fine

August 27, 2012 at 11:11 AM

syed bro plz help me , I have added images to older, newer and home links but the images has some type of shadow and in Mozilla they are not properly shown PLEASE go to link thetechshell.com
You are blogger and i know you know about the problems. In future i am only expecting your help. Hope you will help me and reply as fast as you can.

Editorial Team MOD
August 27, 2012 at 12:54 PM

Brother, In Chrome it is Working Perfectly And its not Shadow its the part of Design. The Reason why it is not working properly in Mozilla is Lack of CSS.Your Style sheet is not optimize for it. Though this Tip is Old but we will try to cover it in coming days. Peace

Here is the Picture of your Blog Taken From Chrome

August 27, 2012 at 6:09 PM

thanx bro for your fast reply, should i have to redesign or add a new code for this, and can you give the code or link from where i can add this. Again thanx for your Reply bro

Editorial Team MOD
August 28, 2012 at 7:51 AM

Dude as we as we will be rolling out a new Tutorial about it may be a different style and technique. Peace

August 29, 2012 at 10:02 PM

Everything in this is perfect. But it just need a timer for me. Please reply if you know how i can add a time counter in it.

Editorial Team MOD
August 30, 2012 at 2:41 AM

Yes, We do have a Timer in this widget. We will roll out the updated version in few weeks peace.

September 24, 2012 at 6:24 AM

Can you change the way twitter button works, ie instead of tweet it should follow the twitter account?

Editorial Team MOD
October 7, 2012 at 12:09 PM

Sure, We will cover it in the Next Version! Peace

May 7, 2013 at 7:00 AM

Not working on my blog plz tell me how to solve

Editorial Team MOD
May 7, 2013 at 12:04 PM

What error you are facing?

May 26, 2013 at 5:44 PM

please help! when i click twitter button it makes the tweet but not redirecting or unlock the page! the widget is just still opened! and also when i click like button the confirm hyperlink is shown outside the widget frame! far away! so that the visitors will not notice it at all and i lose traffic! please help , am really desperate :( i have been searching for a widget like this for a month now!

Editorial Team MOD
May 27, 2013 at 1:17 AM

Why don't you try Google+1 It fine. Infact the other options are working well too

May 27, 2013 at 2:57 AM

here's my site url : http://minefixer.tk it's blogger blog please take a look at it, and try to like or tweet
i just want to know what's wrong to fix it as i see the demo is working very good!, all i want is to lock the main page of my blog by a facebook like i don't even need twitter or +1, please if you know a fix for this let me know

October 20, 2013 at 8:37 PM

A.o.A...Brother...I tried your code at my blog but its not working...my blog doesn't show any pop up and load straight forwardly....please advise what to do? my blog url is:
www.theconcert-hall.com

Editorial Team MOD
October 27, 2013 at 4:44 PM

Its because your Jquery.js is down.

http://www.theconcert-hall.com/js/jquery.js

Upload a working one

January 15, 2014 at 11:50 AM

Hey.. good work... Just need some help..
1. The facebook like image takes a lot of time to show up.. can u please fixt it.. coz i want all three social images to open instantly.
2. Please tell me how can i remove bloggerlab link from below.... Its not a good idea to put on widgets. I personally dont like shoing other links.
Thanks
Your help would be highly appreciated.

May 24, 2016 at 7:46 PM

thanks a lot, but i have a question: Can i change the tweet button with a follow one?

Editorial Team MOD
May 27, 2016 at 1:06 PM

Yes you can but that needs customization knowledge. You can hire us, we can do it for you.

Send us an email at support@mybloggerlab.com

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.