Blogger es la mejor plataforma web para crear diferentes y atractivos widgets, slideshow, plantillas, diseño web, etc, como también creaciones de contenidos ricos para buscadores web, una plataforma web única y gratis para todos los usuarios del mundo. En este nuevo tutorial para blogger, os voy a presentar un nuevo y espectacular truco para blogger. En una anterior publicación di a conocer un widget de imágenes artículos destacados con thumbnail, el cual es una widget totalmente diferente al que os voy a presentar el día de hoy, pero de igual mente muy atractivo.
Muchos bloggers buscan trucos diferentes y que realmente funcionen en todos los navegadores web. Ayudadeblogger.com les presenta un estilo diferente, al widget se lo conoce como imágenes de artículos destacados versión 2, el cual mostrara 5 imágenes destacadas, con un titulo en cada una de ellas y una pequeña descripción, todo el proceso se lo realiza de forma manual, las imágenes se acomodan automáticamente al widget sin necesidad de hacerlas mas pequeñas para que se muestren en su nuevo widget. Todo el código del widget de imágenes destacadas se lo deberá insertar en un solo widget y no tendrán que insertar el código en su Editor HTML. A este nuevo widget de imágenes destacadas la podrán ubicar debajo de la cabecera principal o al final de su blog.
Muchos bloggers buscan trucos diferentes y que realmente funcionen en todos los navegadores web. Ayudadeblogger.com les presenta un estilo diferente, al widget se lo conoce como imágenes de artículos destacados versión 2, el cual mostrara 5 imágenes destacadas, con un titulo en cada una de ellas y una pequeña descripción, todo el proceso se lo realiza de forma manual, las imágenes se acomodan automáticamente al widget sin necesidad de hacerlas mas pequeñas para que se muestren en su nuevo widget. Todo el código del widget de imágenes destacadas se lo deberá insertar en un solo widget y no tendrán que insertar el código en su Editor HTML. A este nuevo widget de imágenes destacadas la podrán ubicar debajo de la cabecera principal o al final de su blog.
1 Ir a blogger
2 Da un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
5 Una vez que hayas abierto el widget, inserta las siguientes líneas de código en su interior
<style>
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
#blog-toolzboxes{
height:210px;
overflow:hidden;
margin:0px;
width:948px;
padding:5px 5px;
}
#blog-toolzboxes ul{
margin-left: 10px;
padding: 0pt;
position: relative;
list-style-type: none;
z-index: 1;
width: 100%;
}
#blog-toolzboxes ul li{
overflow: hidden;
float: left; width: 180px;
height: 180px;
border-top:0px solid #333;
margin-right:6px;
padding:2px 0px 4px 0px;
}
#blog-toolzboxes ul li:hover{
}
#blog-toolzboxes img{
width:150px;height:100px;
padding:2px;
border: 1px solid #A3A3A3;
border-radius:10px;
-moz-border-radius:10px; margin-top:0px;
}
#blog-toolzboxes img:hover{
border-radius:20px;
}
.blog-toolzbody img{
float:left;
}
.blog-toolzbody {
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4
}
.blog-toolzbody h3{
padding:5px 0;
font-size:12px;
font-weight:bold;
font-family: verdana, sans-serif, arial; margin:0;
}
.blog-toolzbody h3 a:link,.blog-toolzbody h3 a:visited{color:#2E91E7;}
.blog-toolzbody h3 a:hover{color:#E7892B}
.blog-toolzbody p{margin:0; padding:0 0;color:#000000;font:10px normal verdana, sans-serif, Arial;}</style>
<div id='blog-toolzboxes'>
<div style='visibility: visible; overflow: hidden;width: 100%; '>
<ul>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 1'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTwnPn4fCIjw72ircYLof8pNZ0Rpm-jx6zARG97u29edKFE1SXADi50LCbrBgh_5ohSK7HRCzO4DKf84P7eccmLNCVT9ZqfNVyFqnQK_up0LfD50t5AfSM2NfYeTLfmR8nOtAErsCDCTOp/s400/playstation+3.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 1'>Titulo del post 1</a></h3>
<p>La descripción aqui 1</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 2'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrBNln8lLftYqpy_dHDJl2kQExuv-fjrfNfxjEQU790bRmwdu5F4AQ8lWSIpPLlRbDT68iDINke-93HbsihrgtzmU9lXf2NivZPIWGGCi8MK62y76rk17QE3WHDjqkXiQkHyLQ8x7ayib/s400/playstation+2.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 2'>Titulo del post 2</a></h3>
<p>La descripción aqui 2</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 3'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0XtSSi4je6BsEhj2k9zpGcCrdRkOGtagafS4_Nr9OpVdc539ZQWFuW9EsuHBz6ZnB_us7kmNwvu-PQDu7LifoI6mD8-ZQg66zYhTJQJEJqdODqpZ03uTC93S6Hi65wjHp-Re9DiTNRqa/s400/playstation.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 3'>Titulo del post 3</a></h3>
<p>La descripción aqui 3</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 4'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQBTpSrp5cYLMAp_iTA3r8GveCz2vRcG6Bgp5faOUWBY6Q6Q-fal-4dp1XELxYl4fYw-g9BY8KsLBoMnTm5OytroABYUQbw294hgKaIiNlfgzlz57cwlw3uWO93hXLSeqUaKkRQNxdj6g/s400/iphone+2.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 4'>Titulo del post 4</a></h3>
<p>La descripción aqui 4</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 5'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf19g7d8BZJraaSS0ReXhC3NaMYAql37cdnDjq3xh9k31NtpJSadegJwQpfvP5OdcP9LUoQ5yMl5XN4OONXEzYPJZwp0tLgZBbCsJ3m43p2_ATjxJLHqhz8T39vhnIbVWEjeLGQ7Yzcrw6/s1600/ayudadeblogger.PNG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 5'>Titulo del post 5</a></h3>
<p>La descripción aqui 5</p>
</div>
</li>
</ul>
</div>
</div>
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
#blog-toolzboxes{
height:210px;
overflow:hidden;
margin:0px;
width:948px;
padding:5px 5px;
}
#blog-toolzboxes ul{
margin-left: 10px;
padding: 0pt;
position: relative;
list-style-type: none;
z-index: 1;
width: 100%;
}
#blog-toolzboxes ul li{
overflow: hidden;
float: left; width: 180px;
height: 180px;
border-top:0px solid #333;
margin-right:6px;
padding:2px 0px 4px 0px;
}
#blog-toolzboxes ul li:hover{
}
#blog-toolzboxes img{
width:150px;height:100px;
padding:2px;
border: 1px solid #A3A3A3;
border-radius:10px;
-moz-border-radius:10px; margin-top:0px;
}
#blog-toolzboxes img:hover{
border-radius:20px;
}
.blog-toolzbody img{
float:left;
}
.blog-toolzbody {
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4
}
.blog-toolzbody h3{
padding:5px 0;
font-size:12px;
font-weight:bold;
font-family: verdana, sans-serif, arial; margin:0;
}
.blog-toolzbody h3 a:link,.blog-toolzbody h3 a:visited{color:#2E91E7;}
.blog-toolzbody h3 a:hover{color:#E7892B}
.blog-toolzbody p{margin:0; padding:0 0;color:#000000;font:10px normal verdana, sans-serif, Arial;}</style>
<div id='blog-toolzboxes'>
<div style='visibility: visible; overflow: hidden;width: 100%; '>
<ul>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 1'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTwnPn4fCIjw72ircYLof8pNZ0Rpm-jx6zARG97u29edKFE1SXADi50LCbrBgh_5ohSK7HRCzO4DKf84P7eccmLNCVT9ZqfNVyFqnQK_up0LfD50t5AfSM2NfYeTLfmR8nOtAErsCDCTOp/s400/playstation+3.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 1'>Titulo del post 1</a></h3>
<p>La descripción aqui 1</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 2'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrBNln8lLftYqpy_dHDJl2kQExuv-fjrfNfxjEQU790bRmwdu5F4AQ8lWSIpPLlRbDT68iDINke-93HbsihrgtzmU9lXf2NivZPIWGGCi8MK62y76rk17QE3WHDjqkXiQkHyLQ8x7ayib/s400/playstation+2.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 2'>Titulo del post 2</a></h3>
<p>La descripción aqui 2</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 3'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0XtSSi4je6BsEhj2k9zpGcCrdRkOGtagafS4_Nr9OpVdc539ZQWFuW9EsuHBz6ZnB_us7kmNwvu-PQDu7LifoI6mD8-ZQg66zYhTJQJEJqdODqpZ03uTC93S6Hi65wjHp-Re9DiTNRqa/s400/playstation.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 3'>Titulo del post 3</a></h3>
<p>La descripción aqui 3</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 4'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQBTpSrp5cYLMAp_iTA3r8GveCz2vRcG6Bgp5faOUWBY6Q6Q-fal-4dp1XELxYl4fYw-g9BY8KsLBoMnTm5OytroABYUQbw294hgKaIiNlfgzlz57cwlw3uWO93hXLSeqUaKkRQNxdj6g/s400/iphone+2.JPG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 4'>Titulo del post 4</a></h3>
<p>La descripción aqui 4</p>
</div>
</li>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Inserta la URL de su Post 5'>
<img alt='chromegt' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf19g7d8BZJraaSS0ReXhC3NaMYAql37cdnDjq3xh9k31NtpJSadegJwQpfvP5OdcP9LUoQ5yMl5XN4OONXEzYPJZwp0tLgZBbCsJ3m43p2_ATjxJLHqhz8T39vhnIbVWEjeLGQ7Yzcrw6/s1600/ayudadeblogger.PNG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Inserta la URL de su Post 5'>Titulo del post 5</a></h3>
<p>La descripción aqui 5</p>
</div>
</li>
</ul>
</div>
</div>
Realiza estos cambios:
He marcado de 4 diferentes colores, en los cuales ustedes tendrán que realizar sus respectivos cambios.
Las líneas que están marcadas de color azul Inserta la URL de su Post, es en donde tendrán que insertar la dirección URL de su artículo, realiza los cambios en todas
La URL que esta marcada de color rojo, sirve para mostrar la imagen, tendrán que borrar cada una de ellas e insertar la URL correspondiente de cada imagen que quieran mostrar.
Además la palabra que dice Titulo del post bórralo y pon ahí el titulo de tu post destacado
Y por ultimo, existe otra palabra que esta marcado de color naranja La descripción aqui en el cual tendrán que borrarlo y poner ahí una pequeña descripción de su post.
Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget donde mejor te convenga.
Fecha: 05/01/2018
Fuente: ayudadeblogger
Publicado por:
0 comentarios: