Las plantillas de Vistas Dinámicas son muy modernas e interesantes, pero a algunas personas no les gusta que esté el logo de Blogger en todas partes. Cada vez que nuestro blog está cargando nos aparece una imagen con el logo de Blogger diciendonos que nuestro blog se está cargando. La imagen es la siguiente :

Para cambiarla debemos hacer lo siguiente :



Si usas la antigua interfaz entra en Diseño | Diseñador de plantillas | Avanzado | Añadir CSS.
Y si usas la nueva interfaz entra en Plantilla | Personalizar | Avanzado | Añadir CSS


Si buscas que no aparezca ningún icono agregá lo siguiente:

.blogger-gear {background-image:none !important;}

Guarda los cambios y listo. Con eso no aparecerá nada mientras cargue el blog.


Si buscas reemplazar la imagen que viene por defecto (la del logo de Blogger con los engranajes) agregá lo siguiente :

.blogger-gear {
background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbuyYrh2ib6VrowCokcIzdwUzej2ulclsceZcdgS-Go2WqvqlwYVJcoDHH3ta2Et8nyb0D-vVCSx6tUAOiMSD8qh0EFGqs1RXyhM1H0Tax3hdqRYb5rY86JdQbNNVFSlnywaTUqxjpvNQW/s1600/cargando.gif );
width:128px; /* Ancho de la imagen */
height:128px; /* Alto de la imagen */
}

Si quieres cambiar la imagen por otra, cambia la URL que está en color verde.

Hola amigos, hoy les traigo una interesante caja flotante hecha con Css, la cual nos va a permitir tener la opcion de copartir en Google +, Twitter y Facebook. Para utilizarla en nuestro blog debemos hacer lo siguiente:

Antes de ]]></b:skin> pegamos el siguiente código:

/****** Contenedor de botones facebook, twitter y Google ********/
#caja-botones {
position: fixed;
top:207px;
bottom: 30%;
margin: 120px 0 0 -160px;
left: auto;
z-index: 2;
width: 85px;
height: 245px;
background-color:#f7fcfd;
border: 1px solid #ffffff;
-webkit-border-radius:  6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#caja-botones h4{
font-size: 11px;
margin: 4px 0 3px 0;
padding: 0;
text-align: center;
color: #0d72fb;
font-weight: normal;
background: none;
letter-spacing: 0em;
}

.boton-facebook {
float: left;
display: block;
margin: 3px 0 2px 7px;
padding: 0;
width: 80px;
height: 70px;
}
.boton-twitter {
float: left;
display: block;
width: 80px;
height: 70px;
margin: 4px 0 2px 9px;
padding: 0;
}
.boton-google {
float:left;
display: block;
text-align: center;
margin: 2px 0 0 7px;
padding: 0;
width: 70px;
height: 65px;
}

Una vez realizado el paso anterior buscamos <div class='post-footer'> y antes de esto pegamos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='caja-botones'><h4>&#161;Compartir!</h4>
 <div class='boton-twitter'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='facu_b' href='http://twitter.com/YOUR_USERNAME'>Twettear</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
<div class='boton-facebook'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=80&amp;height=70&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:70px'/>
 </div>
<div class='boton-google'>
<g:plusone size='tall'/>
</div>
 </div>
  </b:if>

Pueden ver un ejemplo funcionando en este blog de pruebas.

Windows 8 Consumer Preview

 

 

Fuente : http://windows.microsoft.com/es-ES/windows-8/download

Hola gente, hoy les vengo a mostrar como insertar iconos de suscripcion arriba del titulo de las entradas , esto es muy facil y realmente util. Podes ver un ejemplo funcionando en este blog de pruebas .

Antes de ]]></b:skin> pegamos este código :

#suscribir {
float: left;
margin-top:-38px;
margin-bottom:18px;
margin-left:-13px;
position: relative;
}

Los valores marcados en negrita nos permitiran cambiar la posición.


Abajo de <div id='outer-wrapper'> pegamos lo siguiente :

<div id='suscribir'>
<a href='http://EL NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default' imageanchor='1' style='margin-left: 1em;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvEoMt2GCmNHU9PuyPZd_zfsjSmZsSwm72x2_bWt_tvIgMjMJ5HHFY4APH5QFrsLOSbBmezIbl1X9VBzAphKjcTRakPh_gWrckldAZJhuDhjA19b514_trpriE02aPakQV5TKq2xVv2ph/s1600/rss.png'/></a><a href='http://twitter.com/TU NOMBRE EN TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZXr4WczeV8HnW36XBHO1NkjH57EbmYq-9CXhuXNVMvUoKYWPoU9wlHCRGT5lmWiN_zPlt7aAOTlzGrckeuHqVh7ekPVmhiun13z3WQ5t9ZaObzyRWO5COQsRjI_L1V4HJ656pdHIO0VJD/s1600/twitter.png'/></a><a href='TU PÁGINA DE FACEBOOK' imageanchor='1' style='margin-right: 1em;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJnR_zWdAy2k0lx8wTNcnnylycYrTc6CdyVv7tWqiB55Zt-r8pVpjS0dCvWQrjWMYsR27H7xmu3B8GXQELUaiHtvPWoVwj5GCw2Ru6XUa8Ir3FDvb45xrmUndDUnU4KBx4feS265OtEpg7/s1600/facebook.png'/></a>
</div>

El resultado será algo como esto :

Hola amigos , en esta entrada les traigo un efecto genial para nuestras imagenes ,como lo dice el título de la entrada se trata de que las imagnes rotan y al rotar se agrandan.

Lo primero que debemos hacer es pegar el siguiente código antes de </b:skin>

@-webkit-keyframes rotater {
    0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert    { width:125px; height:125px; display:block; }
a.advert:hover {
    /* safari / chrome */
    -webkit-animation-name:rotater;
    -webkit-animation-duration:500ms;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function: ease-out;
   
    /* mozilla */
    -moz-transform:rotate(360deg) scale(2);
    -moz-transition-duration:500ms;
    -moz-transition-timing-function: ease-out;
   
    /* opera */
    -o-transform:rotate(360deg) scale(2);
    -o-transition-duration:500ms;
    -p-transition-timing-function: ease-out;
   
    /* ie */
    -ms-transform:rotate(360deg) scale(2);
    -ms-transform-duration:500ms;
    -ms-transform-timing-function: ease-out;
}

Con esto ya tenemos los estilos , ahora debemos hacerlos actuar. Para eso vamos a utilizar el siguiente código para agregar las imagenes.

<div style="width:125px;float:left;overflow:hidden;height:125px;margin-right:20px;">
    <a href="#" class="advert"><img src="URL DE LA IMAGEN"/></a>
</div>

<div style="width:125px;float:left;overflow:hidden;height:125px;margin-right:20px;">
    <a href="#" class="advert"><img src="URL DE LA IMAGEN"/></a>
</div>

Para agregar otra imagen solamente debemos copiar este código y reemplazar lo que se pide.

<div style="width:125px;float:left;overflow:hidden;height:125px;margin-right:20px;">
    <a href="#" class="advert"><img src="URL DE LA IMAGEN"/></a>
</div>

 Aclaraciones : 

TODAS las cosas que se  encuentran en negrita pueden ser cambiadas.

width:125px y height:125px : Lo alto y lo ancho de la imagen .
# : Esto puede ser reemplazado por un link si queremos .




Las imagenes nos quedarán de este modo :

Hola amigos ,en esta oportunidad les vengo a mostrar como utilizar la letra capital en las entradas de sus blogs. Es muy fácil, a continuacion les voy a enseñar como utilizarlo para una entrada específica o para todas las entradas.


Para utilizarla en todas las entradas solamente tenemos que pegar el siguiente código antes de </b:skin> .

p:first-letter {
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#2ECCFA;
    font-size:60px;
    font-family:Georgia;
}

Para agregarlo en una entrada específica pegaremos este código en la parte de "Edicion de HTML" la cual se encuentra justo al lado de "Redactar".

<style type="text/css">
p:first-letter {
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#2ECCFA;
    font-size:60px;
    font-family:Georgia;
}
</style>

En ambos casos debemos pegar el siguiente código en nuestras entradas para poder usar la letra capital.

<p>TU TEXTO</p>

Para quietar en numero de etiquetas lo único que deberemos hacer será ir a Diseño -----> Edición html y expandimos los artilugios de nuestra plantilla y buscamos la siguiente etiqueta (con Ctrl + F al mismo tiempo)

Así debe quedarnos todo.

Una vez encontrada solamente debemos borrarlo, obteniendo como resultado lo siguiente :

Hola amigos  hoy les traigo una muy buena y facil manera de crear una galeria de imagenes con CSS3. El resultado que obtendremos será que al pasar el mouse por la imagen , esta se agrandará .

Lo primero que debemos hacer es pegar este código antes de </body>



<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>


Con esto ya tenemos los estilos , ahora debemos agregarle el atributo "hovergallery" a las imagenes para que entre en acción . Para esto vamos a utilizar el siguiente código :




<div class="hovergallery">
<img src="URL DE LA IMAGEN" />
<img src="URL DE LA IMAGEN" />
<img src="URL DE LA IMAGEN" />
<img src="URL DE LA IMAGEN" />
<img src="URL DE LA IMAGEN" />
<img src="URL DE LA IMAGEN" />
</div>

Para agregar mas imagenes solamente debemos agregar esto antes de </div>

<img src="URL DE LA IMAGEN" />

Para agregarlo vamos a Diseño ---> Añadir un gadget ---> HTML/Javascript 

Y pegar el siguiente código en el :

    <div id="google_translate_element"></div><script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'es'
      }, 'google_translate_element');
    }
    </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Este gadget de Youtube es muy práctico, muestra el avatar, el nombre de usuario, el título del canal, la cantidad de videos y el botón para suscribirse.

Para agregarlo a nuestro blog,agregamos un gadget de HTML/Javascript y pegamos este código:

<iframe id="fr"
src="http://www.youtube.com/subscribe_widget?p=TU NOMBRE DE USUARIO EN YOUTUBE" style="overflow: hidden; height: 105px; width: 250px;
border: 0;" scrolling="no" frameborder="0"></iframe>

Click para ver mas grande

Autor: Facundo
Licencia: Creative Commons (Uso libre y comercial).
Formato: PNG.

Dimensiones: 72x72.

Descargar pack de íconos:
Descargar

My Top Tweets es una de las muchas herramientas que existen para Twitter, lo que podrás hacer con esta herramienta es ver cuales han sitos tus tweets mar retwiteados (RT), esta no es una herramienta que sea muy funcional pero si te interesa saber que es lo que les gusta retwitear a tus seguidores será una buena opción.

Es muy sencillo utilizar esta herramienta ya que solo tienes que iniciar sesión con tu cuenta de Twitter y al pasar algunos segundos te muestra el TOP10 de los mas retwiteados de tus seguidores, también podrás ver lo mas retwiteado por otros usuarios.

Enlace: My Top Tweets 


Algunas imagenes (click en ellas para verlas mas grandes)

Para empazar tenemos que entrar a http://www.blogger.com/home .Hacemos click en "Estadisticas" .

Al hacer click en "Estadisticas" nos aparecerá algo asi.







Lapso de tiempo calculado.

Se utiliza para definir la busqueda por hora,mes,dia,semana,mes,o en cualquier momento.

Actualizar.

Grafico de visitas.

Entradas con mas visitas.

Fuentes de trafico.

Indica de que pais son los visitantes de nuestro blog.

Indica la cantidad de paginas vistas










Actualizar.

Muestra la cantidad de veces que fueron vistas las paginas de tu blog.

Muestra la cantidad de veces que fueron vistas las entradas de tu blog.

Se utiliza para definir la busqueda por hora,mes,dia,semana,mes,o en cualquier momento.

Lapso de tiempo calculado.

-----------------------------------------------------------------------------------------------------------




Indica de que pais son los visitantes de nuestro blog.

Actualizar.

Indica desde que navegador entraron a nuestro blog


Indica que sistema operativo usa nuestros visitantes

Lapso de tiempo calculado.

Se utiliza para definir la busqueda por hora,mes,dia,semana,mes,o en cualquier momento.

Características de la plantilla:

• 2 Columnas.
• Sidebar a la derecha.
• Seccion de redes sociales en la sidebar.
• Comentarios anidados.

Información de la plantilla:

• Autor: Facundo.
• URL: http://blogdefacu.blogspot.com
• Licencia: Creative Commons Attribution.

Hola amigos , en esta oportunidad les traigo otro gadget mas para poner su perfil de Taringa en sus blogs , anteriormente habia hecho la version anterior de este gadget ( CLICK PARA ENTRAR ) . Para agregar el gadget debemos pegar el siguiente codigo en un gadget de HTML/Javascript .
  
Para agregarlo vamos a Diseño ---> Añadir un gadget ---> HTML/Javascript

<fieldset>

<span style="font-size: large;"><b><a href="http://www.taringa.net/TU NOMBRE DE USUARIO EN T!">TU NOMBRE DE USUARIO EN T!</a></b></span>


<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="URL DE TU AVATAR EN T!" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr style="background-color: #6fa8dc;"><td class="tr-caption" style="text-align: center;"><a href="http://www.taringa.net/TU NOMBRE DE USUARIO EN T!/"> <span style="color: white;">TU RANGO EN T!</span></a></td> </tr>
</tbody></table>



<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;">
&nbsp; &nbsp; &nbsp; </div>


<dl class="profile-datablock"><fieldset>

<dt class="profile-data"><span style="font-size: small;"><a href="http://www.taringa.net/TU NOMBRE DE USUARIO EN T!/seguidores" style="color: black;"><b>CANTIDAD DE SEGUIDORES QUE TENGAS</b></a> Seguidores</span></dt>
</fieldset>
<fieldset>

<dt class="profile-data"><span style="font-size: small;"><b style="color: black;">CANTIDAD DE PUNTOS QUE TENGAS</b> Puntos</span></dt>
</fieldset>
<fieldset>

<dt class="profile-data"><span style="font-size: small;"><a href="http://www.taringa.net/TU NOMBRE DE USUARIO EN T!/posts" style="color: black;"><b>16</b></a> Posts</span></dt>
</fieldset>
</dl>


<right></right>
by <a href="http://www.taringa.net/Bloggero/">Bloggero</a>


</fieldset>


<center><a href="http://blogdefacu.blogspot.com/2012/01/gadget-de-perfil-de-taringa-v2.html">¿Cómo obtengo este gadget?</a></center>

El gadget quedará mas o menos asi , dependiendo la plantilla ( la probe en todos mis blogs y queda perfectamente )


























El gadget debe actualizarse manualmente.
Este gadget esta bajo licencia de Creative Commons Reconocimiento 3.0 España.
 Por lo tanto las siguientes lineas del código del gadget no deben borrarse:

<right></right>
by <a href="http://www.taringa.net/Bloggero/">Bloggero</a>

<center><a href="http://blogdefacu.blogspot.com/2012/01/gadget-de-perfil-de-taringa-v2.html">¿Cómo obtengo este gadget?</a></center>