Like To Enter Advanced Social Traffic Pop For Blogger

Socialize It →

Tweet

33

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.

Like To Enter Advance Traffic POP (Live DEMO)

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHl37swfogI2j45EbVhNlbPlqdGRFfj0KrSHfdEzxf1UZFfiFtcjhhMNDbxdeTPQdDNB4Kp6lfe4AbA-6ksaw-A12FWWK5xMeJyGtfyEwcbpVvbISV5hciL7Kdxr7M-2aONRNjd8mWLa4/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

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