Este Widget es muy parecido al de Mostrar la fanbox de facebook en una lightbox al cargar la pagina con Jquery con la diferencia que este es para la fanbox de twitter,este al igual que el de facebook son muy útil para usarlo en
Blogger,se muestra un cuadro emergente ( Popup ) con un fondo oscuro el
cual este es obtenido con JQuery ,seguro han visto este efecto en
imagenes en videos etc.. pero ahora lo que vamos a mostrar es la fanbox
de twitter cada ves que un visitante entre al sitio esta le aparecera
de primero, con un efecto muy bonito proponiendole seguirte en twitter al igual si no quieren tienen la opcion de cerrar.
Hay dos alternativas una si quieres que aparesca cada ves que carge la pagina o mediante las cookie esta lee la IP del visitante y solo le aparecera una sola ves.
Eso si solo se puede usar uno o el de facebook o el de twitter .
Este widget es muy facíl de implementar en solo unos pasos ya esta listo no tenemos que tocar la plantilla para nada solo lo añadiremos a un gadget para eso nos vamos a blogger >>> Diseño >>> Añadir un gadget >>> y buscamos HTML/Javascript y ponemos el siguiente codigo :
El siguiente codigo es por si quieren añadirle un titulo donde les indique en el codigo anterior donde dice Te unes en Twitter lo pueden remplazar por lo que ustedes quieran eso es a gusto de cada persona todo va en la imaginacion .
Donde dice false lo pueden remplazar por true ,con false aparece siempre que carge la pagina con true solo una ves .
Donde dice tubetrucos lo remplazan por su ID de twitter ,
Hecho todo le dan a guardar al gadget y nos vamos a la pagina ya podran apreciar que al cargar les aparece este fabuloso widget.
Hay dos alternativas una si quieres que aparesca cada ves que carge la pagina o mediante las cookie esta lee la IP del visitante y solo le aparecera una sola ves.
Eso si solo se puede usar uno o el de facebook o el de twitter .
Este widget es muy facíl de implementar en solo unos pasos ya esta listo no tenemos que tocar la plantilla para nada solo lo añadiremos a un gadget para eso nos vamos a blogger >>> Diseño >>> Añadir un gadget >>> y buscamos HTML/Javascript y ponemos el siguiente codigo :
<style>
div.fanbox {
width:290px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
#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:fixed;}
#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;}
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVwdqFxw8iT8pY5OLLhJcsbFXMP_ITsIn2xFo9_wV8Gq-1-PDkba0ACKHHHNs8Hdsfgr1OnOSI_VMSg_YCP8xUDDbHD4fHlh2CqkVQhyi6Q3AqN_pZ8JsySqhWBCSa3qzujBb0wwbSTmA/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTE5VPtyBqXcTvmmE0BFyBM1_UCEPB9vvIpEiu6Diit2f-hytgZ2P22ykebloWeBoag3Q1HmguD7436bYAf_XybZQzNlgQYO05cUD-k5Dy_9AODYDePF_C1EX4Kcu9F_VsXS2yvSpj1CVQ/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTE5VPtyBqXcTvmmE0BFyBM1_UCEPB9vvIpEiu6Diit2f-hytgZ2P22ykebloWeBoag3Q1HmguD7436bYAf_XybZQzNlgQYO05cUD-k5Dy_9AODYDePF_C1EX4Kcu9F_VsXS2yvSpj1CVQ/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-top:28px;}
#cboxTitle{position:absolute; top:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; top:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; top:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; top:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_YW5eugFbTnfYVr8G-9TSzqUIpk1i4npJXbNooSDmJRHRZGPsTNjaaCQOxiIwEseXQBOj26hxw2IoSv189rHKTOBeZgh7f80_3MHnofwFdJVSd0sVthOg0KexqV5dOOpdWyk3u5gvA4W/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_YW5eugFbTnfYVr8G-9TSzqUIpk1i4npJXbNooSDmJRHRZGPsTNjaaCQOxiIwEseXQBOj26hxw2IoSv189rHKTOBeZgh7f80_3MHnofwFdJVSd0sVthOg0KexqV5dOOpdWyk3u5gvA4W/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; top:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l7_2yLvzF-gCQan3_dDnCutnB1yBehTX4-B51zXHuIDOxzZf29m5HiHBaBEXeNEXgMOZUiA5Dhm_FjsgLF1SJnpSqm3yJJDC2lWvvY8nxQLCfScbVwCoxNPqe1huG1LDK8ksg-koXt1V/s1600/controls.png) no-repeat -25px 0; width:20px; height:20px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*-----------------------------------------------------------------------------------*/
/* fanbox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#fff;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #00008b;
font-size: 15px !important;
font-weight: bold;
margin: 2px 0;
border:1px solid #000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #00000;
padding:10px;
line-height:5px; font-family:arial !important;
}
.box-tagline {
color: #000;
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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://img89.xooimage.com/files/b/b/1/jquery.colorbox-min-381970d.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:"340px", inline:true, href:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:1px; background-color: #;
-moz-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:5px 5px 8px #000;
'>
/*-----------------------------------------------------------------------------------*/
/* Despues de estas lineas podrian poner un titulo con el codigo que les voy a dar
/*-----------------------------------------------------------------------------------*/
<center><div class='fanbox'><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("tubetrucos");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* Ancho del gadget */
height: 250px !important; /* Alto del gadget */
}
</style></div></center></div></div>
El siguiente codigo es por si quieren añadirle un titulo donde les indique en el codigo anterior donde dice Te unes en Twitter lo pueden remplazar por lo que ustedes quieran eso es a gusto de cada persona todo va en la imaginacion .
<h4 class="box-title"><center>Te unes en Twitter</center></h4>
Donde dice false lo pueden remplazar por true ,con false aparece siempre que carge la pagina con true solo una ves .
Donde dice tubetrucos lo remplazan por su ID de twitter ,
Hecho todo le dan a guardar al gadget y nos vamos a la pagina ya podran apreciar que al cargar les aparece este fabuloso widget.
