JQuery Social Traffic Pop up Plugin For Blogger

Advertisements
Social Traffic Pop Out Widget
Like To Enter Advanced Social Traffic POP V1 has been Released Don't forget to check it.

If your blog has tons of dailyvisitors, but still you are unable to convert your traffic into money then this is a life time opportunity to increase your Facebook, Twitter, Google + and Feeds subscribers in large numbers. Today, while I was browsing the world’s largest Plugins and Widgets resource i.e. Codecanyon I came across lots of Social Traffic Pop widgets for WordPress, but I was amused that there was no resource for users using Blogger platform. So I thought to create a Social Traffic Pop widget, which is not totally identical to WordPress Social Traffic Pop Plugin.

In This Social Traffic Pop Widget, we can easily insert Facebook Like box, Twitter Follow, Google Plus and we can even include Feedburner subscription widget, so instead of waiting let us start working with Social Media Traffic Pop Widget for Blogger. Before we get started, I know you would be astonished to view the live demo so first give it a try

Features of Social Media Traffic Pop Widget:

  • This widget is built with Ultra-fast technology.
  • This widget gives your freedom to include any widget that you want to see in the Social Pop.
  • Has stunning LightBox style.
  • This widget is integrated with Facebook Like Box, Twitter and Feedburner widgets.
  • Social Media Traffic Pop is tested on many browsers i.e. Chrome, FireFox, internet explorer, and etc.

How To Add Social Media Traffic Pop Widget To Blogger?

The steps are extremely straightforward and would hardly take 2 minutes to complete the integration, so to get started just do as mentioned bellow. 
  • Go to Blogger.com
  • Now Select Layout from the tool menu.
  • Then press Add a Gadget
  • Now look for “ADD HTML/JAVASCRIPT” in the list.
  • And now paste the following code inside it. 
<style>
    /*  Social Traffic Pop Widget For Blogger BY MBL     MyBloggerLab.com
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    /*
       User Style:
       Change the following styles to modify the appearance of ColorBox.  They are
       ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
     
   #cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}     #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}     #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}     #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}     #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}     #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}     #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}     #cboxContent{background:#fff; overflow:visible;}         #cboxLoadedContent{margin-bottom:5px;}         #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}         #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}         #cboxPrevious{left:0px; background-position: -51px -25px;}         #cboxPrevious.hover{background-position:-51px 0px;}         #cboxNext{left:27px; background-position:-75px -25px;}         #cboxNext.hover{background-position:-75px 0px;}         #cboxClose{right:0; background-position:-100px -25px;}         #cboxClose.hover{background-position:-100px 0px;}         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}    /*-----------------------------------------------------------------------------------*/

    /*  Social Traffic Pop Widget For Blogger BY MBL
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 18px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }

    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }

/* ---------MBL Subscribe NOW Form---------- */
    .box-title1 {
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
        padding:10px;
  margin: 10px 0;
    }
    .enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
    .submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
    </style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>

        <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >?</p></center></h3>
          <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMyBloggerLab&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> 
</center>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggerlab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="mybloggerlab" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>
<!--Please Do not Remove the Credits -->
    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggerlab.com">My Blogger Lab</a></p>
    </div>
    </div>
Customization:
  • The above text in Blue color can be change to anything that you like, or you keep it same as default.
  • Replace  MyBloggerLab  with your Facebook page username.
  • *30 changing this value will refresh the cookies more quickly. By default you users will be able to see this pop out once in 30 days, but if you want to make it more frequent then reduce its value. Remember: This may annoy your readers so be careful before making any changes. 
6. Now press the save button and now check your blog it will give you picture perfect results.

That’s it guys, hope you have enjoyed the widget. If you have any suggestion or you want to optimize this Social Media Pop with more stunning features, then don’t forgot to leave your comment till then peace, blessings, and happy learning.

Credits:www.mybloggertricks.com
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!

15 comments

July 17, 2012 at 1:30 PM

Thanks for this amazing code.

Regards,
Ahmed Safwan
ToStartBlogging.Com

July 18, 2012 at 2:57 AM

Great idea! I was just thinking that it would be a great idea for something like this

Lisa
http://www.healthyfrugalliving.com

July 18, 2012 at 5:39 AM

Great Sir Thanks For Share :)

July 20, 2012 at 5:46 AM

Bro how to find my post title code in html template please help bro..

July 21, 2012 at 9:27 AM

I don't see any pop ups on the demo page

Editorial Team MOD
July 21, 2012 at 10:03 AM

This Might be happening because the POP UP has sent Messages to your Browser Cookies As it Appears Once in 30 Days. Try to Clear your Cookies or Change Your Browser. Hope That Answer your Question. Peace and Blessings

Editorial Team MOD
July 21, 2012 at 10:06 AM

Brother You cannot Find your Blog Post Titles in any of your Blogger Template because Template usually have the HTML and CSS Structure. If you want to allocate your Titles IDs then Go to Your Blog >> Press CTRL+U it will open a Page Source >> Now Search Your Title >> and now you allocate the same ID in your Templates. Hope that Answer your Question. Peace and blessings

July 26, 2012 at 7:51 AM

HOPE IS NOT AGAINST GOOGLE ADSENCE TOS

Editorial Team MOD
July 26, 2012 at 8:56 AM

Until or unless you don't use Adsense unit in the Pop out then you are at the Safe Side. Peace and Blessings

Anonymous
August 3, 2012 at 5:05 AM
This comment has been removed by the author.
August 21, 2012 at 6:20 AM

Great! Thanks for sharing this code to us. It is one way to add more likes people to appreciate one's work. :D

October 24, 2012 at 10:18 AM

hi admin i do not understand this line " Replace mybloggerlab with your RSS Feed Email username, if you have not burned you feed see this. " please explain this.

Editorial Team MOD
October 24, 2012 at 3:08 PM

Dude i Mean to Say That Replace "Mybloggerlab" with your RSS FEED i.e. (http://feedburner.google.com/fb/a/mailverify?uri=mybloggerlab)This will send automatic emails to those who have subscribed to your blog.

Hope that Helps. Peace

November 9, 2012 at 11:14 AM

Thanks for this buddy
http://www.theabsolue.asia

November 22, 2012 at 2:26 AM

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 - 2018. MBL Networks, All Rights are Strictly Reserved.