Pop Up Follow de Twitter para Blogger

En un mundo como el bloggero donde las redes sociales son una parte fundamental para dar a conocer nuestro contenido vale la pena crear formar ingeniosas de traer nuevos seguidores y pensando en ello he creado el Pop Up "Follow" de Twitter para Blogger .

Para agregar este truco a tu blog solo debes pegar en un elemento HTML/JavaScript lo siguiente:

<style>

    /*

    ColorBox Core Style:

    The following CSS is consistent between example themes and should not be altered.

    */

    #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/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/s1600/controls.png) no-repeat 0 0;}

    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyBq86TXeUq7buOhBn7r4OYnxCpuYJRllwVkmeSBWNR2cgDnMkC7ZeeyTTwue-KydDQqK_nQ7nwBdQlvsE1bYk5PtrSuZG45kolDPhLQnxQKlasrjkDeZZZ0urTMuyDr7imsWJg6B-phe/s1600/border.png) repeat-x top left;}

    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/s1600/controls.png) no-repeat -36px 0;}

    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/s1600/controls.png) no-repeat 0 -32px;}

    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyBq86TXeUq7buOhBn7r4OYnxCpuYJRllwVkmeSBWNR2cgDnMkC7ZeeyTTwue-KydDQqK_nQ7nwBdQlvsE1bYk5PtrSuZG45kolDPhLQnxQKlasrjkDeZZZ0urTMuyDr7imsWJg6B-phe/s1600/border.png) repeat-x bottom left;}

    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/s1600/controls.png) no-repeat -36px -32px;}

    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/s1600/controls.png) repeat-y -175px 0;}

    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/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/AVvXsEhxJ-GcI6PmTRyVLcbZN59GucgZ9tos5P1FmO-LWUHR_ATSEtO2g9ASQxWtn1W0qOiUCjyUS87WjMtifBUPit3yOtWaxjqQY_RZjZMLn0YVacishf26p51voTvdpMxxJ5F7DsVaB0Hji5TQ/s1600/loading-background.png) no-repeat center center;}

    #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyEIpnthwNm9KsM9mXTUh7pM6KKb1L0WozD2-00yrsCFneDWhLKBxjr2cfrD82-pWBjsm8lsrD7VAid-quwMnDW9LFhEEcb4AU3WBPu-Sj32tqINITfnq82ZVkT_1kWt9VkoGw7rmwRngq/s1600/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/AVvXsEjtOCQDBa5eyEZqBPyvkIHJ11ZtmPBldT_y_J9kOgo0OTGom3BI6TXNJfC9xdU_xBLHhkr8nyyP8lAUV5aNG2b_djDPNbsWWPEVJOmbqrUs4-0fF2diKRz2T9Z8VioiqHu466HPNUdyYQ_8/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;}

    /*-----------------------------------------------------------------------------------*/

    /* Twitter Fanbox popup para Blogger

    /*-----------------------------------------------------------------------------------*/

    #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: #3B5998;

    font-size: 20px !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;

    }

    </style>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

    <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>

    <script type="text/javascript">

    jQuery(document).ready(function(){

    if (document.cookie.indexOf('visited=false') == -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:#E0F2F7;'>

    <h3 class="box-title">Mantente en contacto con nosotros a través de Twitter. Sólo presiona el botón Follow<center><p style="line-height:15px;" >▼</p></center></h3>

    <center>

    <div class="textwidget">

    <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">

    <script type="text/javascript">fanbox_init("UsuarioTwitter");</script></div>

    </div>

    <style>

    .FB_SERVER_IFRAME {

    width: 290px !important; /* Ancho del gadget */

    height: 250px !important; /* Alto del gadget */

    }

    </style>

    </center>

    <p style=" float:right; margin-right:35px; font-size:9px;" > Creado por <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.miltrucosblogger.info/2012/09/pop-up-follow-de-twitter-para-blogger.html">Mil Trucos Blogger</a></p>

    </div>

    </div>