Para Tus Blogs

Botones de redes Sociales con efecto deslizante para blogger

2013-06-18T06:36:00.001-07:00

Botones de redes Sociales con efecto deslizante

Botones de redes sociales deslizantes...Ahora espacio en tu web.

1º Vamos a Diseño :

2º Añadimos un Gadget :

3º Seleccionamos y buscamos :

4º Abrimos y pegamos el siguiente Código :

Donde nos pone Url... en rojo ponemos el url de nuestra red social

5º Guardamos y listo!

Mira También :

La mejor Publicidad son tus Entradas

Ampliar imagen al pasar el ratón

Poner Imagen de fondo a un post para blogger

2013-05-30T12:45:00.000-07:00

Poner Imagen de fondo a un post

En este post veremos lo fácil que es poner una imagen de fondo a cualquiera de nuestras entradas.

1º Vamos a Entradas :

2º Cambiamos a HTML:

3º Pegamos el siguiente código
:

Donde pone URL-DE-LA-IMAGEN ponemos el url de la imagen que queremos poner de fondo.

4º Y cuando terminamos de escribir nuestra entrada cambiamos otra vez a Html y al final del todo ponemos esto :

</div>

5º Guardamos y listo!

Mira También :

La mejor Publicidad son tus Entradas

Ampliar imagen al pasar el ratón

Iconos de redes sociales tipo Boton con efecto 3D para Tumblr

2013-05-27T13:09:00.000-07:00

Iconos de redes sociales tipo Boton con efecto 3D

Fantásticos botones de redes sociales y fáciles de poner.

1»Vamos a: Personalizar

»Le damos a la opción :Editar HTML

3a)»Pulsamos Ctrl+F

buscamos <head>

3 b)»Y justo antes pegamos el siguiente codigo:

3b Y justo debajo pegamos este otro:

<ul id="m-soc6"><li><a class="twitter" href="Url Twitter"><span>Twitter</span></a></li><li><a class="facebook" href="Url Facebook"><span>Facebook</span></a></li><li><a class="google" href="Url Google+"><span>Google+</span></a></li><li><a class="rss" href="Url Rss"><span>Suscribete</span></a></li></ul>

Donde nos pone Url... en rojo ponemos el url de nuestro perfil.

4º Guardamos y listo!

Slider que nos enseña las ultimas entradas para Blogger (jQuery)

2013-05-21T12:28:00.001-07:00

Slider que nos enseña las ultimas entradas

»Vamos al blogger

Con este Slider podemos poner nuestras ultimas entradas a la vista, Abu Farhan fue el que adaptó del Easy Slider, es un slider hecho con jQuery .

1»Luego seleccionamos plantilla

2»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos: ]]></b:skin>

5» Y justo esto antes de ]]></b:skin> pegamos antes lo siguiente:

/* Easy Slider 
----------------------------------------------- */
#slide-container {
width:480px;
height:320px;
position:relative;
}
#slider {
width:480px;
height:320px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmu8gmW2sjcvT6kCs7JNxCdba5fHDZqn_pxEEbrarwzO_4J6-zMr2uA_BnCW2Iz3CfnbrCIrHYojormJB6JGn7b__Uutan_X0rvUBTIJKojpCViLGaRVxs49VvV5JR0RDQdfVEJ4_i2W8/s30/bgtransparent.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
text-align:left;
bottom:0;
width:100%;
z-index:99999;
}
.slide-desc h2{
display:block;
color:#f2f2f2;
font-size:14px;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:480px;
height:320px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn {
left:500px !important;
}
#prevBtn, #nextBtn {
display:block;
left:0;
position:absolute;
top:132px;
width:30px;
height:77px;
z-index:1000;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGGqxuRhWLG9ifv3dJazvat6g-YljbDX4poyTmUCjh1qwngJike01rLusrK_0aDLaVyBimxhf41Sa-WjhnTIZXIwJstwzaXA_0PtWh40mZ-xR6hgyay8VrD3QJbgVgYO-fUJ0qvqgGdA/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBSmkkzwB5uCgeBm_ZMdg9Yz9l4vbNZ4yJdhAJuNxwoyK0QNWBZLrqougj5gkTvg5gLrFMNdr8lcNEugMKMozCqdb_wrBn0Vb6SiECVwAJdtyL9sVEMJeJOUpQozbPkDDwgu3iAKjjNPw/s77/flecha-next.png) no-repeat 0 0;
}
/* Estilos de los números */
ol#controls{
margin:8px 25px;
padding:0;
height:28px;
}
ol#controls li{
margin:0 4px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #000; 
background:#E1E1D7; 
color:#000000; 
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#FEFA00; 
color:#000000;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

6» Buscamos </head> pegamos antes el siguiente script :

}
//]]>
</script>

7» Tambien buscamos </body> y antes pegamos :

$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
//]]>
</script>

8» Por último Vamos a Diseño :

9º Añadir Gadget :

10ºSeleccionamos y buscamos :

-------------------------------------------------------------------------------------------------
11º Abrimos y pegamos el siguiente Codigo :

<div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // Cuantas entradas queremos que se vean
var numchars_gal = 130; // Cuantos caracteres queremos que aparezca
var random_posts = false;
</script>
<script src="http://nombre_del_blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
----------------------------------------------------------------------------------------------------

(Donde esta en azul ponemos el nombre de nuestro blog)

12º ¡Guardamos y listo!

Si quieres cambiar el tamaño tenemos que buscar ( width:480px y height:320px ) y cambiarlo por el tamaño que mejor nos venga.

Un completo widget de suscripcion para blogger.

2013-05-20T02:14:00.000-07:00

Completo Widget de suscripción .

Este widget es muy sencillo de agregar a su blog con el fin de darle un toque elegante y de diseño.

1º Vamos a diseño :

2º Le damos a añadir un gadget:

3º Seleccionamos y buscamos :

4º Abrimos y pegamos lo siguiente:

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYcX0G64HPvHI-i08GFoGeKDtNdzpI50bc6_vjIkoXTjPaN8fNZ_5r1LMqF1SXQdCv3eGWJXTh7nvn1X-NJVX-I2wCzfBpKeAZ1KTXIQRBHXfKm8AJjNG-R2yvv5Btkv7j3dmxP1SnsCo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}

.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}

.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1S7FVzgNW8I8mOQUepLcSNZbsmXqIHcdi5E3ECTtncLIacW96ZMLUiQLrbryvBTrMooEk-SbzJ8BdRDYO88ywuh1SYmgOYou302Zk7A7p0OxawXVwICZ5-MQASyh7OYsAeG7CggKMylM/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}

.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

a.social-icons{margin-right: 5px;height:45px;width:45px;}

a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}

</style>

<br />

<div id="sidebar-subscribe-box">

<div class="sidebar-subscribe-box-wrapper">

<br />

<br />

<div class="sidebar-subscribe-box-form">

5º Ahora solo tienes que cambiar lo que esta en azul por tus datos.

6º Guardamos y listo!

Gadget de Twitter & Facebook para Blogger

2013-05-15T09:57:00.001-07:00

Gadget para Twitter & Facebook

Sencillo gadget para Twitter y Facebook:

1º-Vamos a diseño:

2ºSelecionamos (Añadir un gadget):

3º- Abrimos la opción:

4º-Insertamos lo siguiente:

<a href='URL DE TU TWITER' target="_blank"><img alt='Trucos para blogger' src='http://static.tumblr.com/hfeevyo/9e6lnxaxs/twitter_lrg_bw.gif'/></a>

5º-Lo siguiente será cambiar lo que esta en azul con el Url de su Twitter y Facebook.

6º- ¡Guardamos y Listo!

Mira También :

La mejor Publicidad son tus Entradas

La mejor Publicidad son tus Entradas

2013-05-13T06:41:00.000-07:00

La mejor publicidad son tus entradas

Hoy veremos 4 fáciles maneras de aumentar nuestras visitas por medio de nuestras entradas.

¿No tienes muchas visitas? ¿no sabes que mas hacer? No te desanimes, busca temas que interesan a la gente,noticias, datos importantes, información que sea útil...

Personaliza tus entradas, ya que una imagen vale mas que mil palabras intenta añadir una que otra a tu articulo.

Personaliza el texto: Su tamaño,color y forma, pero tampoco exageres tiene que ser fácil de leer.

Menciona en tus artículos entradas antiguas por medio de los enlaces.

Sigue estos 4 pasos que te ayudaran a atraer a más lectores:

Escribe artículos interesantes.
Añade imagenes.
Personaliza el texto.
Menciona artículos antiguos.

Con esto conseguirás que lean tu articulo hasta el final.

Mira También :

Texto animado HTML

Ampliar imagen al pasar el ratón

Iconos triangulares para SUSCRIBIR BLOGGER

2013-05-08T07:28:00.000-07:00

ICONOS triangulares para SUSCRIBIR

A continuación os enseñare a como colocar en vuestros Blogs estos magníficos botones de suscripción a vuestras cuentas:

1º-Vamos a diseño:

2º-Le damos al boton siguiente :

3º-Clicamos en esta opción:

4º-Insertamos lo siguiente en el anterior campo:

5º-Lo siguiente será cambiar lo que esta en azul con la cuenta propia.

6º-Para finalizar ¡Guardamos y Listo!

Imagenes con efecto Polaroid Blogger

2013-05-04T08:14:00.000-07:00

Imagenes con efecto Polaroid

Nieve

Sol

Efecto

Paisaje

1»Luego seleccionamos plantilla

2»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos: ]]></b:skin>

5» Y justo esto antes de ]]></b:skin> pegamos el siguiente script:

#minigaleria {
margin:0px auto;
padding-left:10px;
padding-top:20px;
padding-bottom:150px;
}

div.imagen1 /* IMAGEN 1*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
 background: #ffffff;         
  margin: 2px;
  border: 1px solid #cccccc;   
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(12deg); 
-moz-transform: rotate(12deg); 
}

div.imagen1 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.imagen2 /* IMAGEN 2*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
 background: #ffffff;         
  margin: 2px;
  border: 1px solid #cccccc; 
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(-16deg); 
-moz-transform: rotate(-16deg); 
}

div.imagen2 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.imagen3 /* IMAGEN 3*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
 background: #ffffff;          
  margin: 2px;
  border: 1px solid #cccccc; 
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(22deg); 
-moz-transform: rotate(22deg); 
}

div.imagen3 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.imagen4 /* IMAGEN 4*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
 background: #ffffff;          
  margin: 2px;
  border: 1px solid #cccccc;  
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(-12deg); 
-moz-transform: rotate(-12deg); 
}

div.imagen4 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.descripcion 
{
  text-align: center;
  font-weight: normal;
  font-family: Arial;
  font-size:11px;
  width: 120px;
  margin: 5px;
}

7º Y vamos a Diseño :

9º Añadir Gadget donde lo queramos poner :

10ºSeleccionamos y buscamos :

11º Abrimos y pegamos el siguiente Codigo :

<div id="minigaleria">
<div class="imagen1">
<a target="_blank" href="enlace1"><img src="URLIMAGEN1" alt="" width="110" height="90" /></a>
<div class="descripcion">Una descripción</div>
</div>
<div class="imagen2">
<a target="_blank" href="enlace2"><img src="URLIMAGEN2" alt="" width="110" height="90" /></a>
<div class="descripcion">Una descripción</div>
</div>
<div class="imagen3">
<a target="_blank" href="enlace3"><img src="URLIMAGEN3" alt="" width="110" height="90" /></a>
<div class="descripcion">Una descripción</div>
</div>
<div class="imagen4">
<a target="_blank" href="enlace4"><img src="URLIMAGEN4" alt="" width="110" height="90" /></a>
<div class="descripcion">Una descripción</div>
</div>
</div>

12º Guardamos y listo!

Animación Cámara de Vigilancia para Tumblr

2013-04-19T14:09:00.001-07:00

Animación Cámara de Vigilancia para Tumblr

Es una animación divertida para tu Tumblr. Una cámara de vigilancia a la esquina superior derecha.

1»Vamos a: Personalizar

2»Le damos a la opción :Editar HTML

3a)»Pulsamos Ctrl+F

Buscamos <head>

3 b)»Y justo debajo pegamos el siguiente codigo:

5»Guardamos y listo

Fantastico Buscador Para Blogger

2013-04-19T13:51:00.000-07:00

Fantastico Buscador Para Blogger

Super Buscador desplegable para blogger.

1»Luego seleccionamos plantilla

2»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos: ]]></b:skin>

5» Y justo esto antes de ]]></b:skin> pegamos el siguiente script:

12º Guardamos y listo!

Iconos de redes sociales tipo Boton con efecto 3D Blogger

2013-04-17T10:47:00.003-07:00

Iconos de redes sociales tipo Boton con efecto 3D Blogger

Fantásticos botones de redes sociales y fáciles de poner.

1º Vamos a Diseño :

2º Añadimos un Gadget :

3º Seleccionamos y buscamos :

4º Abrimos y pegamos el siguiente Código :

4b Y justo debajo pegamos este otro:
<ul id="m-soc6"><li><a class="twitter" href="Url Twitter"><span>Twitter</span></a></li><li><a class="facebook" href="Url Facebook"><span>Facebook</span></a></li><li><a class="google" href="Url Google+"><span>Google+</span></a></li><li><a class="rss" href="Url Rss"><span>Suscribete</span></a></li></ul>

Donde nos pone Url... en rojo ponemos el url de nuestra red social

5º Guardamos y listo!

Menú 3D para Blogger

2013-04-14T12:56:00.002-07:00

Menú deslizante 3D

»Vamos al blogger

Con este fantástico código podemos tener en el blogger un menú de diseño 3D.

1»Luego seleccionamos plantilla

1»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos: ]]></b:skin>

5» Y justo esto antes de ]]></b:skin> pegamos el siguiente script:

/* 3D Menu
----------------------------------------------- */
.meny {
display: none;
padding: 20px;
overflow: auto;
background: #333;
color: #FFFF00; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.meny h4 {
font-size: 27px; 
color:#fff; 
text-align:center;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
display: inline-block;
width: 200px;
list-style: none;
font-size: 20px;
padding: 3px 10px;
}
.meny-arrow {
position: absolute;
z-index: 10;
border: 10px solid transparent;
-webkit-transition: opacity 0.4s ease 0.4s;
-moz-transition: opacity 0.4s ease 0.4s;
-ms-transition: opacity 0.4s ease 0.4s;
-o-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
.meny-left .meny-arrow {
left: 5px;
top: 350px;
margin-top: -16px;
border-left: 16px solid #333; 
}
.meny-right .meny-arrow {
right: 14px;
top: 150px;
margin-top: -16px;
border-right: 16px solid #333; 
}
.meny-top .meny-arrow {
left: 150px;
top: 14px;
margin-left: -16px;
border-top: 16px solid #333; 
}
.meny-bottom .meny-arrow {
left: 150px;
bottom: 14px;
margin-left: -16px;
border-bottom: 16px solid #333; 
}
.meny-active .meny-arrow {
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.contents {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

6» Buscamos <body> y pegamos debajo lo siguiente :

<div class='meny'>
<h4>Menú</h4>
<ul>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
</ul>
</div>

<div class='meny-arrow'/>
<div class='contents'>

6b» Donde pone 'URL del enlace' tenemos que poner la página que queramos abrir al apretar el texto.
Donde pone Texto de enlace ponemos el texto que queramos poner para buscar a cada URL.
Podemos añadir mas URLS poniendo antes de </ul>:
<li><a href='URL del enlace'>Texto del enlace</a></li>

7» Por último antes de </body> pegamos :

var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover">
</div>
';
}

//]]>
</script>

8» Para finalizar guardamos y listo !

Mira También :

La mejor Publicidad son tus Entradas

Animación Cámara de Vigilancia para Blogger

2013-04-14T09:49:00.000-07:00

Animación Cámara de Vigilancia para Blogger

Es una animación divertida para tu blogger. Una cámara de vigilancia a la esquina superior derecha.

1º Vamos a Diseño :

2º Añadir Gadget :

3º Seleccionamos y buscamos :

4º Abrimos y pegamos el siguiente Codigo :

5º Guardamos y listo!

Texto Animado HTML

2013-04-02T03:31:00.001-07:00

Tipos de Texto HTML

Texto en movimiento de Derecha a Izquierda

<MARQUEE> Aquí Tu Texto </MARQUEE>

Aquí Tu Texto

Texto en movimiento de Izquierda a Derecha

Aquí Tu Texto

<MARQUEE DIRECTION=RIGHT> Aquí Tu Texto </MARQUEE>

Texto en movimiento con Subrayado

<MARQUEE BGCOLOR="#3CFD0B"> Aquí Tu Texto </MARQUEE>

Aquí Texto

Texto en movimiento con Subrayado + Negrita

<FONT FACE="IMPACT"><MARQUEE BGCOLOR="#FFFF00">Aquí tu Texto</MARQUEE></FONT>

Aquí tu Texto

Cambia el color del subrayado por cualquier de estos otros Colores. No olvides poner la (#)

Texto en movimiento de un Lado a Otro

<MARQUEE BEHAVIOR=ALTERNATE>Aquí tu Texto</MARQUEE>

Aqui tu Texto

Texto en movimiento Rapido

<MARQUEE SCROLLAMOUNT=50> Aquí tu texto </MARQUEE>

Aqui tu texto

Texto en movimiento Lento

<MARQUEE SCROLLDELAY =200> Aquí tu texto </MARQUEE>

Aquí tu

Texto en movimiento dentro de una Tabla

<TABLE BORDER=1> <TR><TD> <MARQUEE> Aquí Tu Texto </MARQUEE> </TD></TR> </TABLE>

Aquí Tu Texto

Texto en movimiento Led de Colores

Poner texto en movimiento al lado del favicon Tumblr

2013-03-29T05:51:00.001-07:00

Poner texto en movimiento al lado del favicon

Poner el favicon el texto del favicon en movimiento te ayudara a llamar la atención de quienes visiten tu Tumblr. En 5 fáciles pasos lo podemos poner.

1»Vamos a: Personalizar

2»Le damos a la opción :Editar HTML

3a)»Pulsamos Ctrl+F

buscamos <head>

3 b)»Y justo debajo pegamos el siguiente codigo:

//<![CDATA[

var txt=" AQUI EL TEXTO QUE QUIERA PONER EN MOVIMIENTO ";

var espera=100;

var refresco=null;

function rotulo_title() {

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

refresco=setTimeout("rotulo_title()",espera);}

rotulo_title();

//]]>

</script>

4»Nos quedaría una cosa parecida a esto:

5»Guardamos y listo

Barras con iconos de redes sociales animadas Blogger

2013-03-25T09:11:00.001-07:00

Iconos de redes sociales : Facebook , Google+ y Twitter.

Fantasticos iconos con efecto opacidad,para promocionar tu blog a las 3 redes mas de moda en internet. Estos 3 iconos de Facebook, Google+ y Twitter son muy faciles de aplicar para tu blog.

1º Vamos a Diseño :

2º Añadir Gadget :

3º Seleccionamos y buscamos :

4º a) Abrimos y pegamos el siguiente Codigo :

Poner texto en movimiento al lado del favicon Blogger

2013-03-22T12:38:00.002-07:00

Poner texto en movimiento al lado del favicon

Poner el favicon el texto del favicon en movimiento te ayudara a llamar la atención de quienes visiten tu blog. En 5 fáciles pasos lo podemos poner.

1»Vamos a:Diseño

2»Y le damos a la opción

3»Y seleccionamos

4» Y dentro pegamos el código:

Ampliar imagen al pasar el ratón Blogger

2013-03-02T08:13:00.001-08:00

Ampliar imagen al pasar el ratón.

»Vamos al blogger

Con este fantástico código podemos ampliar la imagen con tan solo pasar el ratón por encima de la imagen y asi podremos ahorrar mucho espacio.

1»Luego seleccionamos plantilla

1»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos: </head>

5» Y justo esto antes de </head>pegamos el siguiente script:

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

7 a)»Si queremos ponerlo en una entrada tenemos que ir a

creamos una y cambiamos a la opción HTML

y pegamos el siguiente código:

Pegamos el URL de la imagen donde corresponda y indicamos hasta que amplitud queremos que se abra.

7 b) »Para ponerlo en un gadgets abrimos :Diseño

Y le damos a la opción

y seleccionamos

» Y dentro pegamos el mismo código:

Pegamos el URL de la imagen donde corresponda y indicamos hasta que amplitud queremos que se abra.

8»Guardamos y listo.

Evitar Click derecho Blogger

2013-02-28T11:13:00.001-08:00

Como evitar Click derecho en nuestro blogger

Esta es una técnica muy buena para que sea mas difícil que nos copien la información de nuestro blogger y para evitar el plagio de nuestros artículos.

1»Vamos al blogger

2»Luego seleccionamos plantilla:

3»Luego seleccionamos la opción “Editar HTML”

4» Buscamos: <body>

5» Y debajo de <body> pegamos:

6» Le damos Guardar plantilla y listo.

Colores HTML

2013-02-26T10:51:00.002-08:00

BY GOOGLE