Poner scroll top como T!

Añadimos el siguiente código:

<script type="text/javascript">
$(function(){$window=$(window);$link=$("#scrollToTop");$link.click(function(){$("html, body").animate({scrollTop:0},"slow")});$window.scroll(function(){if($window.scrollTop()<=0){$link.fadeOut("fast")}else{$link.fadeIn("fast")}})});
</script>
<style type="text/css">
#scrollToTop:link, #scrollToTop:visited {
display: none;
width: 40px;
height: 40px;
position: fixed;
top: 10px;
z-index: 9999;
right: 35px;
opacity: 0.5;
cursor: pointer;
}
#scrollToTop:hover, #scrollToTop:active {
display: none;
width: 40px;
height: 40px;
position: fixed;
top: 10px;
z-index: 9999;
right: 35px;
opacity: 0.8;
cursor: pointer;
}
</style>
<a href="javascript:;" id="scrollToTop"><img src="http://i.imgur.com/0am8n.png"/></a>

Quedará una cosa así en vuestro sitio:

• 0
• Compartir en:

Tooltip Pure CSS3

Hola nuevamente, se que no he compartido mucho desde hace tiempo pero intentare publicar mas seguido, por ahora les dejo estos tooltip que desarrolle hace poco, están echo totalmente de CSS3, cheque la compatibilidad con varios navegadores pero por motivos de tiempo no probé con muchos, sin embargo si experimentan algún inconveniente siempre pueden contar con mi ayuda dejando un comentario aquí en la entrada explicando el problema. Sin mas que decir comencemos

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin> ensima de eso ponen esto:

.gzero {cursor: pointer;position: relative;}
.gzero > span.tl {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    color: #FFF !important;
    line-height: 1.2;
    font-weight: normal;
    font-family: arial;
    font-size: 11px;
    margin-right: -100px;
    max-width: 200px;
    opacity: 0;
    padding: 8px;
    position: absolute;
    text-align: center;
    text-decoration: none !important;
    transition: all 300ms ease-in-out 0s;
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    visibility: hidden;
}
.gzero.left > span.tl {left: -144px;margin-top: -7px;width: 120px;}
.gzero.top > span.tl {bottom: 25px;left: 0;margin-left: -8px;}
.gzero.right > span.tl {margin-top: -7px;right: -46px;width: 120px;}
.gzero.bottom > span.tl {margin-left: -100px;margin-right: -8px;right: 0;top: 27px;}

.gzero:hover > span.tl {visibility: visible;opacity: 1;}
.gzero span.tl > i {display: block;position: absolute;}

.gzero.left span.tl > i {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_mUfCvNnf5JEweEsppJtiVcj0daZH1I__5ieHBoHDPsClUfDvWtUIPAYIgXkjDGr3vY4tGBGblAoqpNA-aKC3BK5v1hgLO0h_H3Byy-2K0hDP11OEqqOvtWyfpit11NdT6UmFRMT714/s1600/left.png") no-repeat scroll center top transparent;
    height: 10px;
    right: -5px;
    top: 10px;
    width: 5px;
}
.gzero.top span.tl > i {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifXIgeSv0tdtzcgu-Tk5TGJbDrmZZRkwnw0p6ASQ-ZYftS7P4_aDRYB6yndrlAYnMRHw9j8_Zcv1Y-RYFsi7OSCOyIEPH6u_iBd4s4lXMnqXcx2VtUQFpzaMGroEe05h93BYxnNBxH5lFi/s1600/top.png") no-repeat scroll center top transparent;
    height: 5px;
    width: 10px;
    bottom: -5px;
    left: 12px;
}

.gzero.right span.tl > i {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GOe1cj-hna_jhK5rqdbq3eiT6IRgqljDUQOIBBVjgwAIF8r5CxDmBw0-NEoTAy_UL7fx_bun_EKdK1BFux6BeH6kdQvYUb08wyIK9FUeQyxu4HajSl-xuefCojdzuUP9hN1FyH-B8__w/s1600/right.png") no-repeat scroll center top transparent;
    height: 10px;
    left: -5px;
    top: 10px;
    width: 5px;
}

.gzero.bottom span.tl > i {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibre1PGXq_3tJ1hZxR2HnNmQbYOUJ-wMx1kisfg10qnRajp42R0Av-kGDfq4_2UiLkwsbH90tGlA43tgoZbIvIT_A-5L4QtdrmZZ9s83-5XnT8pjV0mwrx_ZvVKMNpJaiD4ikUHAQBL1Eh/s1600/bottom.png") no-repeat scroll center top transparent;
    height: 5px;
    right: 12px;
    top: -5px;
    width: 10px;
}

 

Y listo, ya podemos correr nuestros tooltips en CSS3, para ello lo hacemos de la siguiente manera

 

 si queremos un pequeño tooltip en un enlace ubicamos el siguiente codigo de esta manera:

<a href="#" class="gzero top">Tu Enlace<span class="tl"><i></i>Tooltip del enlace</span></a>

 en el caso de que fuera un texto en lugar de usar la etiqueta "a" usaremos "span"

<span class="gzero top">Tu texto<span class="tl"><i></i>Tooltip del texto</span></span>

podemos usar diferentes direcciones para nuestro tooltip, para ello en donde dice "gzero top" cambiamos "top" por left, right o bottom

 

por ultimo les dejo un ejemplo del código funcionando, si lo hicieron bien se vera asi (pasar el mouse sobre el texto o enlace):

Espero que les haya gustado, cualquier duda no olviden dejarme un comentario

Gadget de etiquetas en forma de menú desplegable

Ya que seguimos con el tema de ahorrar espacio en el blog veamos cómo podemos mostrar las etiquetas en forma de menú desplegable, esto será para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.

Cuando usamos el gadget de etiquetas éstas se muestran en forma de lista ordenada:

Lo que haremos será que se muestren de esta forma:





Sólo necesitas entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este código:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>

Elimínalo y en su lugar pega esto:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Con eso será suficiente. Puedes cambiar el texto Selecciona una categoría donde se indica. Si quieres que no se muestren el número de entradas que tiene cada etiqueta elimina lo que está en color azul.

También puedes darle un poco de color para que se vea más o menos de esta forma:



Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:

.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}

Ahí puedes cambiar los colores donde se indica.
No está de más decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el código y no lo encuentra.

Música al entrar en la web

Este sonido solo se reproducirá una vez por sesión. Cuando lleve un tiempo inactivo y vuelva a entrar, volverá a sonar.


<div id="player__"></div>
<script type="text/javascript">
function getCookie(a){var b,c,d,e=document.cookie.split(";");
for(b=0;b<e.length;b++){c=e[b].substr(0,e[b].indexOf("="));d=e[b].substr(e[b].indexOf
("=")+1);c=c.replace(/^\s+|\s+$/g,"");if(c==a){return unescape(d)}}}

if(getCookie('player') != '1'){
    document.getElementById('player__').innerHTML = '
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="1" HEIGHT="1"><PARAM NAME="movie" VALUE="ae075771f27d60018ac297c5d44b1115%2Eswf">
<PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#FFFFFF"><EMBED
src="http://static.tumblr.com/pjueksb/PBum56g40/ae075771f27d60018ac297c5d44b1115.swf"
quality="high" bgcolor="#FFFFFF" WIDTH="1" HEIGHT="1" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>';
    document.cookie= 'player=1; path=/';
}

</script>

---

¡Bonito buscador para blogger!

Hoy traemos un buscador completamente bonito por que tiene una estilización que lo hace ver bastante elegante.

El HTML del formulario del buscador es:

<form class="formularioblogger cf">
  <input type="text" placeholder="ingresar busqueda ..." required>
  <button type="submit">buscar</button>
</form>

A continuación otro ejemplo:

<form class="formularioblogger cf" action='URL/search' method='get'>
  <input type="text" placeholder="ingresar busqueda..." requiredname="q">
  <button type="submit">buscar</button>
</form>

Eso es todo, lo pueden ubicar donde quieren que le aparezca el formulario aquí puedes ver un demo: Demo 1, Demo 2. Como pueden ver en los dos blog el buscador está colocado en el header.


El CSS es el siguiente y debe ser colocado debajo de ]]></b:skin>

<style>

  .cf:before, .cf:after {
    content:"";
    display:table;
  }
  .cf:after {clear:both; }
  .cf { zoom:1; }

   /* el formulario en sí mismo */
  .formularioblogger {
    background-color: #303941;
    border-radius: 10px;
    box-shadow: 0 0 2px #606971 inset;
    margin: 0 auto;
    padding: 15px;
    width: 450px;
  }

   /* la caja donde se ingresa el texto a buscar */
  .formularioblogger input {
    background-color: #EEE;
    border: none;
    border-radius: 3px 0 0 3px;
    float: left;
    font-family: Tahoma;font-size:15px;font-weight: bold;
    height: 20px;
    padding: 10px 5px;
    width: 330px;
  }
  .formularioblogger input:focus {
    outline: 0;
    background: #FFF;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
  }

  /* el estilo del atributo placeholder debe ser declarado para 

  cada navegador de modo separado */
  .formularioblogger input:-moz-placeholder { color: #999; font-weight: normal; 

   font-style: italic; }
  .formularioblogger input::-webkit-input-placeholder { color: #999; font-weight: 

   normal; font-style: italic; }
  .fformularioblogger input:-ms-input-placeholder { color: #999; font-weight: 

   normal; font-style: italic; }

  /* aquí iría el estilo de del atributo required si es que 

   se desea definirlo */
  .formularioblogger input:required { box-shadow: none; }

   /* el botón de envío */
  .formularioblogger button {
    background-color: #9099A1;
    border: none;
    border-radius: 0 3px 3px 0;
    color: #FFF;
    cursor: pointer;
    float: right;
    font-family: Tahoma;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    overflow: visible;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    width: 110px;
  }
  .formularioblogger button:hover{ background: #E54040; } 
  .formularioblogger button:active, .formulariodemo button:focus

   { background: #C42F2F; }
  .formularioblogger button:before { /* el detalle del triángulo izquierdo */
    content: "";
    border-color: transparent #9099A1 transparent;
    border-style: solid solid solid none;
    border-width: 8px 8px 8px 0;
    left: -6px;
    position: absolute;
    top: 12px;
  }
  .formularioblogger button:hover:before { border-right-color: #E54040; }
  .formularioblogger button:focus:before { border-right-color: #C42F2F; }    

</style>

A continuación puedes ver un demo online de como queda en sí el buscador:

El que tengo colocado tiene una pocas modificaciones al CSS que vas a poner en tu blog, sólo le he cambiado el color de fondo del buscador y el color del botón.

Espero que les encante el buscador y así que anímense a renovar su triste buscador.. XD

Poner un buscador en Blogger

 

Algunos se preguntarán -¿para qué poner un buscador en mi blog? Bueno, piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.
Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Dieño | Elementos de la página | Añadir un gadget | HTML/Javascript. Y pega este código:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

El resultado será este:

Para el segundo buscador entra en Diseño | Elementos de la página | Añadir un gadget y elige Cuadro de búsqueda. Ahí selecciona las opciones, por si quieres que las búsquedas sean sólo en el blog o en la web. Cabe señalar que los resultados los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.

Y por último este buscador de Google, que a diferencia del anterior en este aparecen las casillas en el buscador sobre dónde queremos hacer la búsqueda. El código es el siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>

Sólo debes cambiar los datos que están en color rojo por los tuyos y el resultado será este:

Botones G CSS3

Pues paso rapido a dejarles estos botones que diseñe hace un rato, estan disponibles en 5 colores, tienen efectos hover y active, los desarrolle usando solo CSS3 y es compatible con todos los navegadores exceptuando versiones viejas, bueno es muy sencillo, solo tienen que hacer esto:

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin> ensima de eso ponen esto:

 

/*botones GZero*/

.nw-btn {
    border-image: none;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 13px;
    font-family: Arial;
    line-height: 20px;
    margin: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
    text-decoration: none !important;
}
.nw-btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
    background: #F5F5F5;
    background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF));
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #333 !important;
}
.nw-btn.white:hover {background:#E6E6E6;}

/*Azul*/
.nw-btn.blue {
    background: #49AFCD;
    background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}

/*Verde*/
.nw-btn.green {
    background: #5BB75B;
    background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}

/*Naranja*/
.nw-btn.orange {
    background: #FAA732;
    background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450));
}
.nw-btn.orange:hover {background:#F89406;}

/*Rojo*/
.nw-btn.red {
    background: #DA4F49;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));
}
.nw-btn.red:hover {background:#BD362F;}

/*Fin botones GZero*/

y listo, ya tienen los botones en su web, ahora para hacer uso de ellos simplemente a una etiqueta "a" le agregan el atributo "class" de la siguiente manera:

 

<a class="nw-btn white" href="#">Boton Blanco</a> 

 "white" lo cambian por el color que quieran entre uno de estos:

white
blue
green
orange
red

espero que les haya gustado este pequeño y rapido aporte, saludos

 

Corazones en la Web blogger

se acerca el dia del amor y la amistad me desidi a crear el mod para blogger

caps :



Nos vamos a main_header.tpl y antes de

</head>

ponemos

<!-- Corazones la web -->
<div style="display:none;">
<script type="text/javascript"  

src="http://blogparts.giffy.me/0082/parts.js">

</script><p style="text-align: center;margin:0;padding:0;">

<a href="http://giffy.me/baby/"><img style="border:0;"  

src="http://blogparts.giffy.me/0082/parts.gif"/></a></p>

<p style="text-align:center;font-size:12px;margin:10px 

 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/">

 求む！タイピング初心者</a></p>
</div>
<!-- Fin de Corazones en la web -->

eso es todo

Microsoft Account Connect

Lo primero que tienen que hacer es ir a https://manage.dev.live.com/ para crear una aplicación de Microsoft, luego loguearse con su cuenta de Microsoft si no lo están ya. Luego rellenan los formularios con los datos de su web:


En donde dice nombre de la aplicación ponen el nombre que quiere que se muestre en la página.

Luego dan a "Acepto" y verán esto:



En donde dice "dominio de redirección" tienen que poner la url de su web y le dan a guardar. El Id. de cliente y la clave secreta serán esenciales en este mod.

Luego dan click en "información básica" en el panel de opciones de la izquierda y lo configuran a su gusto:


En las direcciones de condiciones de servicio pueden poner los términos y condiciones de su web (suweb.com/pages/terminos-y-condiciones), al igual que en privacidad (suweb.com/pages/privacidad/) y en el logotipo siguen lo que dice ahí.

2) Ejecutar la siguiente consulta en la pestaña SQL de su PhpMyAdmin:

ALTER TABLE `u_miembros` ADD `user_microsoft` VARCHAR( 50 ) NOT NULL

3) Subir los archivos del zip que dejé adjunto (si usan V4 (theme default) bajen "Microsoft Connect.zip", si usan V5 (Hecho en el theme v5 3.0 de Gonzalo) bajen el "Microsoft Connect V5.zip") en la raíz del sitio y reemplazar, abrir c.mconnect.php que está en /inc/class/ y en

private $MClient = '';

entre los '' tienen que poner el Id. de cliente que se generó en el panel de Microsoft.
y en

private $MSClient = '';

entre los '' tienen que poner la clave secreta del cliente que se generó en el panel de Microsoft.


4) Abrir header.php ubicado en la raíz y buscar:

include TS_EXTRA.'QueryString.php';

Abajo poner:

// Microsoft Connect
include TS_CLASS.'c.mconnect.php';

Buscar:

$smarty =& tsSmarty::getInstance();

Abajo poner:

// Microsoft Connect
$mconnect = new Mconnect;

Buscar:

$smarty->assign('tsMPs',$tsMP->mensajes);

Abajo poner:

// Microsoft Connect 
$smarty->assign('microsoft', $_SESSION['gData']);

5) Abrir c.user.php (si tienen instalado el fb connect de tutan no tienen que hacer esta parte) y buscar:

function loginUser($username, $password, $remember = FALSE, $redirectTo = NULL) {

reemplazar por:

function loginUser($username, $password, $remember = FALSE, $redirectTo = NULL, $microsoft = false) {

Buscan:

$pp_password = md5(md5($password) . $username);

Lo reemplazan por:

if(!$microsoft){ $pp_password = md5(md5($password) . $username); } else { $pp_password = $password; }

Si usan V4 (theme default):

6) Abrir head_menu.tpl que está en /themes/tutheme/templates/sections/ y buscar:

<div id="login_error" style="display: none; padding:3px 0;"></div

Abajo poner:

<center><a href="/microsoft-connect/"><img src="http://i.imgur.com/bRD89Mq.png"></a></center>

7) Abrir m.cuenta_sidebar.tpl que está en /themes/tutheme/templates/modules/ y buscar:

<div id="prueba"></div>

Arriba poner:

{if $tsUser->info.user_microsoft == ''}                    <center><a href="/microsoft-connect/"><img src="http://i.imgur.com/bRD89Mq.png"></a></center>                    {else} <center><span style="color:green">Estás vinculado con Microsoft</span></center>{/if}

8) Abrir p.registro.form.tpl que está en /themes/tutheme/templates/t.php_files/ y buscar:

<div id="RegistroForm">

Abajo poner:

<center><a href="/microsoft-connect/"><img src="http://i.imgur.com/bRD89Mq.png"></a></center>

Si usan V5 (Hecho en theme Taringa V5 3.0 de Gonzalo):

6) Abrir main_header.tpl que está en /themes/tuthemev5/templates/sections/ y buscar:

<div class="login_cuerpo">

y abajo poner:

<center><a href="/microsoft-connect/"><img src="http://i.imgur.com/bRD89Mq.png"></a></center>

7) Abrir m.cuenta_sidebar.tpl que está en /themes/tuthemev5/templates/modules/ y buscar:

<div style="background: #CCC;padding:2px;line-height:17px"><div style="width: {$tsPerfil.porcentaje}%; height:17px;border-right:1px solid #004b8d; border-left: 1px solid #004b8d;background: url('{$tsConfig.tema.t_url}/images/barra.gif') top left repeat-x;" id="porc-completado-barra"></div></div>

y abajo poner:

{if $tsUser->info.user_microsoft == ''}<center><a href="/microsoft-connect/"><img src="http://i.imgur.com/bRD89Mq.png"></a></center>{else} <center><span style="color:green">Estás vinculado con Microsoft</span></center>{/if}

8) Abrir p.registro.form.tpl que está en /themes/tuthemev5/templates/t.php_files/ y buscar:

<div id="RegistroForm"> 

Abajo poner:

<center><a href="/microsoft-connect/"><img src="http://i.imgur.com/bRD89Mq.png"></a></center> 

y listo, cualquier bug lo comentan. Capturas V4:










 (aviso que anda medio para atrás el hosting, a veces tira errores de include pero no es por el mod)

Con este mod podrán loguearse, registrarse y vincular su cuenta de Microsoft.

Edit 05/02/2013: Añadí dos fixes a la clase, si ya tenían el mod instalado sólo bajen el c.mconnect.php que está adjunto y lo reemplazan por el de la carpeta /inc/class/

•  Microsoft Connect V5.zip   31,43K
•  Microsoft Connect.zip   31,3K
•  c.mconnect.php   4,99K

Entradas Shadow Albums - Blogger

Lo prometido es deuda, el dia de hoy les voy a enseñar una nueva forma de mostrar nuestras entradas de blogger al inicio de la pagina, a esta modificacion le he puesto el nombre de "Entradas Albums" asi que todas las entradas que le dedique este nombre tratara sobre este tipo de modificacion que solo afecta a la home de nuestros blogs, se que me he demorado mucho en este tutorial pero eso fue debido a que estaba buscando una forma de hacer esta modificacion lo mas compatiblemente posible, esto se debe a que todos usan tpls distintos por lo que la estructura tambien lo es, aunque he podido completar el tutorial debido a las variaciones de diseño que existen se que mas de uno necesitara de mi ayuda y con todo gusto contestare sus comentarios, comencemos con este tutorial

Paso 1 - agregando el script

Lo primero que necesitamos es el script que nos dara un resumen automatico de nuestras entradas, si ya tienen uno funcionando en sus blogs recomiendo que lo remuevan totalmente e instalen este, este script es una modificacion realizada por El potro al script original por Anhvo y ahora es nuevamente modificado por mi para este tutorial, recuerden que esto es solo para usuarios blogger


 Entren al panel de su blog y dirijansen a Plantilla > Edición de HTML y busquen: "</head>" ensima de eso agregan esto:

<script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<a href="'+ pURL +'"></a><div class="cut-img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQnw7x789a09wZ0O3DFCS6Qst-oIuCj3T1CApiSjCQdTBt-XddRw3iiEVGxp77Pdjzx8zKtDMukl0sQTAZq0e4YIMGFGYqm6KUhExR6xNqkJedY1oqg5LafAuuTNJHQmNXslbMkKGp44/" /></div>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<a href="'+ pURL +'"></a><div class="cut-img"><img src="'+img[0].src+'" /></div>';
summ = summary_txt;
}
var summary = imgtag + '<div style="display:none">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Paso 2 - agregando el estilo

El estilo tiene igual de importancia o incluso mayor como el script, este ocultara todos los elementos inecesarios de la home sin modificar al momento de entrar al post, tambien le dara el acabado final y acomodara todo en su sitio correspondiente.

Nuevamente en la plantilla busquen "</head>" y ensima agregan lo siguiente, es decir que el siguiente codigo quedara debajo del primero que pegamos en el paso 1:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/*paso 3 estilos*/
.date-outer, .date-posts, .post-outer {
    display: inline;
}
.post {
    border: 0 none;
    display: inline-block;
    margin-bottom: 0 !important;
}

.post-body {
    background: none repeat scroll 0 0 transparent !important;
    display: inline-block;
    height: auto !important;
    line-height: 1.25 !important;
    margin: 0;
    padding: 0;
}

.post-footer {
    display: none;
}

#shadow-album {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}

.contenido-s {
    float: left;
    padding: 0 0 40px;
    width: 265px;
}

#shadow-album img {
    max-width: 300px;
}

#shadow-album a {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 60;
}

#shadow-album .content-img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 8px solid #F3F3F3;
    cursor: pointer;
    height: 130px;
    margin: 0 auto;
    position: relative;
    width: 230px;
}

i.tshadow {
    box-shadow: 0 0 50px -15px #000000 inset;
    color: #FFFFFF;
    font-family: Arial,Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    height: 100%;
    left: 0;
    line-height: 130px;
    position: absolute;
    text-align: center;
    text-indent: -9999px;
    top: 0;
    -moz-transition: all 400ms ease-in-out 0s;
    -webkit-transition: all 400ms ease-in-out 0s;
    -o-transition:all 400ms ease-in-out 0s;
    transition: all 400ms ease-in-out 0s;
    width: 100%;
    z-index: 50;
}


#shadow-album .contenido-s:hover i.tshadow {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px 0px #000 inset;
    text-indent: 0;
}

.cut-img {
    height: 130px;
    overflow: hidden;
    width: 230px;
}

#shadow-album h1 {
    background: #555;
    color: #FFF;
    font-family: Arial,helvetica;
    font-size: 13px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    width: 200px;
}

.post-title {
    display: none;
}
</style>
</b:if>
</b:if>

Paso 3 - agregando html y modificando la plantilla

hasta el momento ya tenemos todo lo que funcionara como "motor" que mostrara todo los cambios realizados hasta ahora.

En la parte superior izquierda de donde nos encontramos ahora hay una casilla en blanco que dice "Expandir plantillas de artilugios", marcan esa casilla y despues que cargue buscamos esto:

<data:post.body/>

Este codigo puede estar 3 veces en sus plantillas, solo necesitamos modificar el que este primero, asegurensen de dar con el indicado, una vez localizado lo reemplazan por esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='shadow-album'>

    <div class='contenido-s'>
    <div class='content-img'>
        <div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <i class='tshadow'>Ver más</i>
    </div>
    <h1><data:post.title/></h1>
    </div>
<div style='clear:both'/>
    </div>

</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Paso 4 - Configurando blogger

pude darse el caso que algunos elementos indeceados aparescan entre las entradas, para evitarlo lo unico que tienen que hacer (si es que les sucede) es configurar las entradas de esta forma, para ello nos dirigimos en el panel a "Diseño", veremos algunos cuadros blancos con la opcion "editar", precionaremos el que se encuentra en el cuadro blanco que dice Entradas del blog y nos aseguraremos que lo tengamos de esta forma:

y listo, terminamos el tutorial, aunque dependiendo de cada plantilla y diseño pueden tener algun problema, si es asi dejenme un comentario explicandome su situacion

16 Simples pero Elegantes barras separadoras

Hola a Todos de File Virtual
Les quería compartir estas barras separadoras que me encontré en la web y edite para ustedes. Aclaro Editado y no Creado por mi.
Me parecen muy útiles para los post y muy originales, no las he visto en otras webs Se encuentran en formato PNG, las pueden guardar o copiar el URL y pegarlo en sus Post (no se caeran las imagenes).
Su diseño me parece excelente y multifacetico.
Comentarios sin sentido, spam, gifs que no tengan que ver con el post seran borrados.
Espero las disfruten. Click AQU para ir a la fuente. (hay que pagar).
Sin mas preámbulos aquí están las barras.