Tuesday, 17 July 2012

JQuery Social Traffic Pop up Plugin For Blogger

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     bsresearcher.blogspot.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqi1Z3psP0xPiQo840-l__qVWIhz9Y4kFVL3FGmbVdcJd5f0H1cC-cfyf9ue3b4DU7imIoEZsINRUKLdJxHVIy3apVRHbjmFRlD8IF-eAVXGKxX1VhTOSU7BPt_F2nJmqCXGI7Z8azPQY/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqi1Z3psP0xPiQo840-l__qVWIhz9Y4kFVL3FGmbVdcJd5f0H1cC-cfyf9ue3b4DU7imIoEZsINRUKLdJxHVIy3apVRHbjmFRlD8IF-eAVXGKxX1VhTOSU7BPt_F2nJmqCXGI7Z8azPQY/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwg-NyrU0Vyc5XrMkpBWcv6ZeZfiff_wSFhHGNre4310OBhTNsAye-oIgkJ9wgDAFmlj6lYkgcvf3AmUV6mrqBMjQ0x2ur3Lgs114gJvqXW6ZwsKLTG-ev0Rvn0uvxGgoktfmM2e4cjI8/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZ1o-GjzhxX4ed_NgsRzSCxsJ6fK_9yNLBiXJ-MrTGz-AZsEpNZnmPTbHPiFuuxEv_0l68EZI-FYSZe0opOL9iEi1tKOdV8pX1GDozF1olgFnSwnwglFy0vZwiJtxP9vtogT_ipCrEIs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqi1Z3psP0xPiQo840-l__qVWIhz9Y4kFVL3FGmbVdcJd5f0H1cC-cfyf9ue3b4DU7imIoEZsINRUKLdJxHVIy3apVRHbjmFRlD8IF-eAVXGKxX1VhTOSU7BPt_F2nJmqCXGI7Z8azPQY/s400/border.png) repeat-x top left;}     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat -36px 0;}     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat 0 -32px;}     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqi1Z3psP0xPiQo840-l__qVWIhz9Y4kFVL3FGmbVdcJd5f0H1cC-cfyf9ue3b4DU7imIoEZsINRUKLdJxHVIy3apVRHbjmFRlD8IF-eAVXGKxX1VhTOSU7BPt_F2nJmqCXGI7Z8azPQY/s400/border.png) repeat-x bottom left;}     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) no-repeat -36px -32px;}     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) repeat-y -175px 0;}     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/s1600/controls.png) repeat-y -211px 0;}     #cboxContent{background:#fff; overflow:visible;}         #cboxLoadedContent{margin-bottom:5px;}         #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwg-NyrU0Vyc5XrMkpBWcv6ZeZfiff_wSFhHGNre4310OBhTNsAye-oIgkJ9wgDAFmlj6lYkgcvf3AmUV6mrqBMjQ0x2ur3Lgs114gJvqXW6ZwsKLTG-ev0Rvn0uvxGgoktfmM2e4cjI8/s400/loadingbackground.png) no-repeat center center;}         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZ1o-GjzhxX4ed_NgsRzSCxsJ6fK_9yNLBiXJ-MrTGz-AZsEpNZnmPTbHPiFuuxEv_0l68EZI-FYSZe0opOL9iEi1tKOdV8pX1GDozF1olgFnSwnwglFy0vZwiJtxP9vtogT_ipCrEIs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFpz4BbiAuZ0_JIrIreD5aYuRD-WwwulRN0GPJSoZ-UkVOKssrgbRp0MgpVG3pzRgI-VK1Kn-6EYN0hh6Q5bAg3Ltgd246XBZoZcmHk53Ia3m9mFDIIk39gwH-JpIiCK9EOv1rQnWqeY/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.bsresearcher.blogspot.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
JQuery Social Traffic Pop up Plugin For Blogger
4/ 5
By

GET OUR BLOGGING SECRETS DIRECTLY TO YOUR INBOX!

Want access to our blogging secrets,We never shared on our blog.Just enter your email address below to get access to our 3 ultimate guides on how to run a successful blog!

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!