Tube trucos

Personalizar el Gadget de etiquetas dandole un estilo diferente

Por Unknown No comments

El gadget Labels,etiquetas es muy usado en los blog,muchos los usan como menú otros simplemente muestran las etiquetas que tienen,en este tutorial van a saber como personalizar esas etiquetas dándole un estilo diferente y no el que viene por defecto que solo son palabras sin ningún fondo o color.

Para personalizar las etiquetas en Blogger es muy sencillo y no nos toma mucho tiempo,y así vamos mejorando poco a poco cada parte del blog.

Para añadirlo se los voy a brindar de dos formas una mediante el siguiente botón ,solo dan click y escogen el blog al que quieres añadirle este estilo.también pueden editarlos una ves se instale buscan el gadget con el titulo Estilos de las etiquetas lo abren y lo pueden editar ustedes mismos cambiándole el color a sus gustos y le borran el titulo solo se lo pongo para que sepan donde se encuentra el código y no se pierdan.

.label-size a:hover{background:#000;}

.label-size a:hover:before{border-color:transparent #000 transparent transparent;}</style>

Si lo quieren añadirlo ustedes mismos van a Diseño >>> Añadir un gadget >>> y buscan :

Una ves encontrado pegan el siguiente código :

<style>
.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:20px; line-height:20px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:5px; padding:0 10px 0 5px; background-color: #696969;background-image: -moz-linear-gradient(#000, #696969);background-image: -webkit-linear-gradient(#000, #696969);background-image: -o-linear-gradient(#000, #696969);background-image: linear-gradient(#000, #696969); color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px;-moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-top-left-radius:4px; }

.label-size a:hover{background:#000;} .label-size a:hover:before{border-color:transparent #000 transparent transparent;}</style>

Si se fijan al final de este blog pueden ver que lo tengo implementado en este sitio, le di dos tonos, el cual ustedes pueden darle el color que quieran .

Lo que esta en color rojo es el color negro que es el color de arriba.
Lo que esta en color naranja es el color gris que es el color de abajo.
Lo que esta en color amarillo es el color negro que aparecerá cuando le pases el mouse por encima.

Si no saben que color ponerle ,pueden encontrarlos aquí.

Cómo activar el nuevo perfil de Twitter

Por Unknown No comments

La red social twitter lanzó recientemente su renovado perfil, ahora contiene mas visualidad, permitiendo tener una imagen de cabecera, al estilo del nuevo Timeline de Facebook y google plus.
Aunque en un principio se rumoraba que sólo unos pocos usuarios podrían tenerlo y que se iría aplicando a todas las cuentas con el tiempo,ahora todos los usuarios pueden ya tener esta nueva cabecera.

No es obligado actualizarse al nuevo perfil, por ahora, pero todos aquel que quiera poseer esta nueva configuracion ,solo tienen que hacer lo siguiente:

- Dirigirse a la red social twitter.

- Iniciar sesión .

- Hacer click en el icono de la rueda situado en la esquina superior derecha y luego click en “configuración”

- De las opciones de la columna , click en “Diseño”.

- Al abrirse la columna de la derecha, baja hasta la sección “Personaliza el tuyo” y ahí pulsa en “Cambiar encabezado”.

- Ahí podremos subir, desde nuestra pc, la fotografía que queramos para nuestro perfil. Twitter recomienda un tamaño de la imagen de 1200 x 600, con un peso máximo de 5MB.

- Una vez subida la imagen podremos ajustarla, moverla, ampliarla, reducirla… Una vez que queda tal y como queremos, le damos click a guardar y ya contamos con el nuevo perfil .

Mostrar la fanbox de twitter en una lightbox al cargar la pagina con Jquery

Por Unknown No comments

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 :

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

Mostrar la fanbox de facebook en una lightbox al cargar la pagina con Jquery

Por Unknown 15 comments

Este Widget que les presento en el dia de hoy es 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 facebook cada ves que un visitante entre al sitio esta le aparecera de primero, con un efecto muy bonito proponiendole seguirte en facebook al igual si no quieren tienen la opcion de cerrar.

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

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 {
background-color: #dcdcda;background-image: -moz-linear-gradient(#000, #dcdcda);background-image: -webkit-linear-gradient(#000, #dcdcda);background-image: -o-linear-gradient(#000, #dcdcda);background-image: linear-gradient(#000, #dcdcda);
-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;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#000,direction=125,strength=5);-webkit-box-shadow: 5px 5px 8px #000;
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;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook 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: 16px !important;
   font-weight: bold;
   margin: 10px 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:25px; 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'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Ftube-trucos%2F161206907309924&width=300&height=180&colorscheme=dark&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:180px;" allowtransparency="true"></iframe></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 Facebook 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 Facebook</center></h4>

Lo que esta en color   000   es el color negro del fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.
lo que esta en color dcdcda   es el color gris que esta tambien de fondo de la fanbox lo pueden remplazar por el color que ustedes quieran.

Donde dice    false   lo pueden remplazar por true ,con false aparece siempre que carge la pagina con true solo una ves .

Donde dice pages%2Ftube-trucos%2F161206907309924 lo remplazan por el nombre de su pagina en facebook si todavia no tienen la url personalizada y tienen nombre y numeros lo copian desde donde dice page y las / la remplazan por %2F una ves hecho eso la colocan donde les dije en el codigo .

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.

Personalizar la caja de comentarios de blogger añadiendole un fondo

Por Unknown 7 comments

Hasta no hace mucho hacer cambios en la caja de comentarios de blogger era inposible,debido al nuevo sistema de comentarios anidados que añadio blogger pero indagando un poco vi la forma de personalizar lo que es la caja de comentario añadiendole un fondo para cambiar el aspecto.

Entonces para darle este toque personal solo hay que seguir unos pocos pasos recuerden siempre guardar una copia de seguridad de su plantilla para eso nos dirigimos a plantilla >>> Edicion de html >>> Continuar >>> marcan Expandir plantillas de artilugios Y buscamos.

]]></b:skin>
Una ves encontrado pegamos el siguiente codigo justo encima :

#tube-trucos-form iframe{
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifIWdKBnYiLdz7Y6cMoDRDA5wDF5XXK05wkbUs81n4XSlG0zWu5S8hpA4nPJN20slXOBINjw8nCenyEfUrsNJjRxeNpwrLrkdKBAaQwbj79-ECL9wJ5sDdP0G4TeosNhptt46P4m-KLP0/s1600/fondos-graciosos-pc.jpg) repeat;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:560px; height:213px !important;
}
#tube-trucos-form iframe{
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifIWdKBnYiLdz7Y6cMoDRDA5wDF5XXK05wkbUs81n4XSlG0zWu5S8hpA4nPJN20slXOBINjw8nCenyEfUrsNJjRxeNpwrLrkdKBAaQwbj79-ECL9wJ5sDdP0G4TeosNhptt46P4m-KLP0/s1600/fondos-graciosos-pc.jpg) repeat;
border:2px dotted #F35C1B;

Lo que esta marcado en rojo lo cambian por su url ,por la imagen de sus gusto.

Recuerden que para una busqueda mas rapida usen Ctrl+F
Ahora buscan

<div class='comment-form'>

Y lo sustituyen por el siguiente:

<div id='tube-trucos-form'>

Una ves hecho los pasos correspondientes guardan la plantilla y van a una entrada para ver como les quedo el fondo en la caja de comentarios.

Nuevo widget de twitter para mostrar nuestra timeline en cualquier sitio web o blog

Por Unknown No comments

Twitter da un paso adelante con este widget,a pesar que ya existen algunas herramientas que te permiten mostrar tu timeline de Twitter en tu sitio web o blog, este es el primero creado por la famoza red social y es que han presentado este widget el cual nos va a permitir mostrar cualquier tipo de tweet en nuestro sitio web.

Gracias a este nuevo widget vamos a poder mostrar no solo nuestros tweets, sino también de cualquier otro usuario,que tengamos en la lista de favoritos.

Para poder obtener este widget, debemos dirigirnos a la sección widget de nuestra cuenta de Twitter, ahí damos clic en widget y luego en crear nuevo ,luego lo configuran a sus gusto (tamaño, color, etc). Luego nos mostrará un código HTML que debemos colocar en donde queramos en nuestro sitio web o blog.

Via: twitter blog

Personalizar el Gadget de etiquetas dandole un estilo diferente

Cómo activar el nuevo perfil de Twitter

Mostrar la fanbox de twitter en una lightbox al cargar la pagina con Jquery

Mostrar la fanbox de facebook en una lightbox al cargar la pagina con Jquery

Personalizar la caja de comentarios de blogger añadiendole un fondo

Nuevo widget de twitter para mostrar nuestra timeline en cualquier sitio web o blog

Popular Posts

Seguidores

te unes en facebook ?

Te gustó lo que viste?

Estadística de T.trucos

Me llevas a tu blog▼▲

Blogroll▼▲

directorios▼▲

Etiquetas

Archivo del blog

Comentarios recientes

visitantes

Labels

Personalizar el Gadget de etiquetas dandole un estilo diferente

Cómo activar el nuevo perfil de Twitter

Mostrar la fanbox de twitter en una lightbox al cargar la pagina con Jquery

Mostrar la fanbox de facebook en una lightbox al cargar la pagina con Jquery

Personalizar la caja de comentarios de blogger añadiendole un fondo

Nuevo widget de twitter para mostrar nuestra timeline en cualquier sitio web o blog

Redes Sociales

Popular Posts

Seguidores

te unes en facebook ?

Te gustó lo que viste?

Estadística de T.trucos

Me llevas a tu blog▼▲

Blogroll▼▲

directorios▼▲

Etiquetas

Archivo del blog

Comentarios recientes

visitantes

Labels