Nube Color Negro Para Etiquetas De Blogger

En este articulo te explicare cómo añadir un atractivo widget de etiquetas negra en forma de nube a blogger. Este widget de etiquetas es limpio y bonito, los visitantes pueden encontrar todas las categorías de tu blog fácilmente. Anade estilo y presencia a tu sitio.

Pasos para insertar este widget de etiquetas negras a tu blog.
 1. Entrar a la cuenta de blogger y Click desplegable.

2. A continuación, seleccione "Plantilla", como a continuación.


3. Ahora se puede ver en vivo en el blog, haga clic en el botón Editar HTML "

4. Ahora haga clic en el botón Continuar.
  
5. Encuentre esta etiqueta ]]> </ b: skin>  usando Ctrl + F 

6. Pegue el siguiente código antes de etiqueta ]]> </ b: skin>

/*-----Custom Labels widget by tricksblogspot.blogspot.com/----*/

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}

#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;  
border-bottom-color: #D8D8D8;}

7. Ahora Haga clic en Guardar plantilla.

    Listo

Slider De Imagenes Con Descripcion Para Blog De Blogger

 En este artículo te explicare  cómo agregar una descripción desplegable de la imagen para blogger. Puede añadir este widget a la barra lateral.
Si tienes cualquier mensaje especial lo puede enlazar en su mensaje con este widget.Este mensaje deslizable de las imagenes se hizo utilizando CSS y HTML.Usted puede cambiar las imágenes y los vínculo a su gusto.


 Ejemplo:Ponga el cursor del raton sobre la imagen para activarlo.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...
More

Siga los sigientes pasos para agregarlo a su blog.
 1. Entrar a la cuenta de blogger y Click menu desplegable.

2. A continuación, seleccione "Diseño", como a continuación.

3. Haga clic en Agregar un Gadget y seleccione "HTML / Javascript

 

 4. Pegar el siguiente codigo.

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}

.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiN-iJxRUurTntWm-hCWQjmrD7yMxEfsLAfrMmsIZ7FgJsXCPv3vLRMc-q5ifvSk063fKGFD-uy6rwjdUu0R0lbojSWGG43SWM9uT5urAcMD1PvVwxg2N1jgWJHCGeSObitTLrVotcjfc/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>
 

 <div style="clear:both;"></div>

</div>

7. Ahora Guarda HTML/Javascript'.

  Listo.

How put the Trick of Infinite Scroll On Blogger

One of the new ways of loading a website or blog, is the infinite scroll, which consists in that as you go down the content of a blog, but it will go automatically loading content thus eliminating the need of having to click on the links page.

This trick will give the reader a much more enjoyable and interactive, as this system is used by sites from the likes of Facebook or Twitter.




To add the scroll trick, no need to touch the template, just go to Design, Add Gadget, HTML / JavaScript, and there paste the following:

     src='http://code.jquery.com/jquery-1.7.1.min.js' <script type='text/javascript'> </ script>
     src='http://yourjavascript.com/4153098131/infinite-scroll-for-blogger-blogs.js' <script type='text/javascript'/> </ script>

Now it only remains to save the changes, and enjoy this great trick :)

You can see a demo the trick. I hope you have enjoyed this great trick.