Truco CSS:Codigo para crear blogroll efecto deslizante en blogger

Este es el codigo para que su blogroll luzca asi o algun lector de noticias que tengas aplican este efecto con las etiquetas marquee

Juega Bingo GRATIS!!
Trabaja por Internet
Juega Poker

Read More

Truco:Como agregar emoticones en Blogger

Emoticones.- Son figuras construidas con caracteres ortográficos, para expresar gestos o emociones en los mensajes enviados y los usuarios las utilizan diariamente en su chat. Algunas de las más usuales son:

Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre y . Preferible que lo pegues casi al final (antes de ), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

<script src='http://benjamin0331.googlepages.com/addSmiley.js' type='text/javascript'/>

Entre agregar lo siguiente:

.post-body img#new {

margin:0;

padding:0;

border:none;

}

Esto es para evitar que los Emoticonos se desplacen o se vean con un borde.

- Los emoticones se verán en los post (entradas) y en los comentarios cuando están expandidos. Una vez que el blog acabe de cargar aparecerán los emoticonos.

Nota: Estos emoticones te funcionan bien si es que no utilizas el Leer Más (Entradas ampliables).

Read More

Facebook LikeBox JQuery Popup con Timer!

Widgets hacen a blogger mas especial y le dan una vista impresionante. Este Pop up Facebook like box con timer es un gran elemento de blogger. Es un widget de facebook con pop up muy especial que aparece cuando el visitante ingresa a tu sitio y permanece durante un tiempo determinado por ustedes. Eso lo hace aparecer y desaparecer automaticamente. Ustedes asi podrian conseguir mucho mas trafico si a sus visitantes les gusta esto.

Solo necesitan agregar este codigo en tu blog siguiendo estos pasos para agregar Popup para Facebook Like Box con Timer para Blogger.

Para Blogger
Vayan a Blogger > Diseño > Editar HTML
Hagan un Back de su template
Peguen este codigo justo abajo de

Cambien el texto en negrita.
Ahora para cambiar la imagen que les muestra en el pop up solo cambien esta linea
http://folsol.googlecode.com/files/jquery.js
por alguna de las siguientes

http://mybloggertricks.googlecode.com/files/mbtlikebox4.js

 

http://mybloggertricks.googlecode.com/files/mbtlikebox3.js

 

http://mybloggertricks.googlecode.com/files/mbtlikebox.js

Read More

Paginator 3000: Script para Navegacion con paginas numeradas en Blogger con Scroll

Muchas veces echamos de menos tener paginacion en nuestro Blogger y no las tipicas "entradas antiguas" o "entradas mas recientes". Para esto utilizaremos el Paginator 3000. Lo bueno de esta paginacion que soporta mas de 500 entradas a comparacion de otros paginadores que llegan a 100 este llega a muchos mas como ven en la foto.

Paso 1: Aplicando estilo
Vayan a la pestaña Plantilla->Edicion de HTML.
Dan click en continuar y dan check en Expandir Plantilla de artilugios.
Ahora en esta linea:
]]>

reemplacenlo por este codigo:

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ0WtWrSU2l_BDpNk0SsYG7vNwNGUQmuZjyq_kPBuMwLXPxtvpePsPzH02PRcZ7ZxrXq6SSP0jtWx4dUZo8UpDNtgw2G49TzOubBXzCJnR9z5NbV4t5rUfrVuTuyoEPpOImo3VwqVvjb8/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
]]>

Paso 2: Apliquen Javascript.
Encuentra esto:

Reemplacenlo por esto:

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Puedes configurar estos numeros a tu antojo:
var postperpage=7;
var numshowpage=6;

Postperpage : Cuantos post por pagina mostrara tu blog
numshowpage : Cuantos numeros mostraran en tu navegacion de pagina

Y wala =) espero les sirva

Read More

Agregar widget de rotacion de Post Populares con JQuery

Como todos sabemos, en Blogger tenemos el gadget de entradas populares. Pues bien, ahora vamos a darle un toque de movimiento con un poquillo de JQuery. No tiene mucha complicacion y nos quedara muy 'cool'.

Para esto primero ya tenemos que tener el gadget de Entradas Populares en el blog y podemos ponerlo en 5 entradas o las que deseen.

Ahora en la pestaña de Diseño, nos vamos a Añadir un Gadget, buscamos el que diga HTML/Javascript y pegamos este codigo:

Asegurense de mantener estos 2 widgets juntos uno arriba del otro como muestro abajo.

Hacer cambios a los colores y fuentes
No todos usan un fondo blanco para sus blog y algunos de ustedes pueden desear tener control completo sobre la apariencia del widget. Voy a poner algunas areas importantes en las cuales ustedes pueden editar para que el widget conbine perfectamente con el blog.
Para cambiar la altura del cuadro del widget editen en el codigo de arribaheight:310px; aqui:

#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:310px;

}

Para cambiar el ancho de los widgets editen en el codigo de arriba width:310px en este codigo

#PopularPosts1 ul { 
width:310px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:10px 0px 0px 10px; 
}

Para cambiar el ancho del texto editen el ancho width:290px; manten este ancho 20px mas pequeño que el ancho de los rectangulos.

#PopularPosts1 li { 
 width:290px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf51MuposotBdUdPVmxdccCNCji8oIGL2nTk-xuhCq5oWYV2P_Rn49KHgvBqY9Wd8ef12zlT3LqOAkA2VtwTMxw9GRGiMzThshsldmgcD6D3WMEyuvUleL0EuC_k2nz1wbWue4xyi0e2o/s400/popular+posts.jpg) repeat-x; 
border:1px solid #ddd; 
}

Para cambiar el color de link del titulo y tamaño de fuente editen color:#7CA2C4;
font:bold 12px verdana;
Para editar el color del borde de la linea editan aqui border:2px solid #7CA2C4
Espero que este widget les sea util y haga mas vistoso sus blog.

Read More

Agregar buscador personalizado de Google dentro de tu pagina

bueno aqui les paso un codigo de un buscador de google paginado para los que deseen ofrecer esta opcion de buscar dentro de su pagina algun contenido sin recurrir a San Google.
Por ejemplo si buscan de algun luchador escriben en la caja de busqueda y les saldra algo como esto:

Primero en Diseño se van a Añadir un Gadget

una vez aqui se van a HTML/Javascript

una vez aqui les aparecera una ventana lo que tienen que hacer es agregar este codigo

Loading

 

y Wala =D espero les haya servido

Read More

Como crear Link 'To The Top Of Page' para Blogger

PASO #1 Entran con su cuenta de Google y van a Layout

Agregan un gadget de tipo HTML/JavaScript

Luego agregan este codigo dentro:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://www.incontext.indiana.edu/images/to_top_arrow.gif" /></a>

Le dan click en Guardar y Listo

Read More

Agregar widget social sharing/bookmarking con efecto hover

En este post veran como agregar un widget y agregar el efecto hover con CSS3 para ustedes. Este widget social de sharing/bookmarking con escala de grises y a color lo pueden agregar en su blog y lucira como ven abajo:

Ejemplo

Como instalar este widget sharing/bookmarking

Paso 1: Agregar codigo CSS

1. Ir a las pestañas de blogger > Pestaña Diseño > Editar HTML
2. Click en el checkbox Expandir plantilla de artilugios
3. Busca la etiqueta ]]> y pongan este codigo antes de la etiqueta

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnhbQCS3BMmDifMI9DeNb4wrHZA0anH7ufJKQ7y0c1_fQSflBOCA9WYckKaGoFxlSblCWQ_eUnF_PyYp7PMGSGO2mvKKZ0zoGryGJ4SSN6u7-xa_ieSTPeRngCiplw7hBG3OYoE1CQuN8/s1600/share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
#w2b-share ul li a.facebook   {background-position: -32px -0px;  }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover  {background-position: -160px -33px;}
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover  {background-position: -128px -33px;}
#w2b-share ul li a.del-icio-us  {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px;  }
#w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
#w2b-share ul li a.technorati  {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin   {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Step 2: Agregar codigo al widget

1. Busca la etiqueta
2. Coloca este codigo despues de la etiqueta. y guarda tu template (por si no les funcione antes de este guarden su template en caso de errores)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='w2b-share'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Read More