ENTRADAS RELACIONADAS CON MINIATURAS Y EFECTO HOVER

ENTRADAS RELACIONADAS CON MINIATURAS Y EFECTO HOVER.


 



Ya he publicado un par de tutoriales de entradas relacionadas con imagen en miniatura,pero el truco que traigo como lo dice el titulo trae incorporado el efecto Hover,si no sabes que es el efecto hover entonces te lo explico:





El efecto Hover consiste en la alteración del aspecto de un elemento de la interfaz gráfica cuando se sitúa el puntero sobre el mismo, pero no se ha seleccionado aún.


El efecto queda de la siguiente manera:

El script pertenece a Spice Your Blog y le hice algunos cambios para adaptarlo a nuestran necesidades.


Para agregar este truco pega antes de ]]></b:skin> lo siguiente:


Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:




1 Un clic en “Plantilla”                                                 





   2 Un clic en “Editar HTML”                                     




  Ahora se te abrirá el Editor HTML de tu plantilla





En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 





3 Busca el siguiente código



]></b:skin> 



ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}


Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste




Ahora debajo de  <div class=’post-footer’> (buscas esta linea con los artilugios expandidos) agrega lo siguiente:




Un clic en Plantilla                                             






Un clic en “Editar HTML”                                         




 Ahora se le abrirá el Editor HTML de su plantilla





En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca 

el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar 

el código para buscarlo e insertar los códigos correspondientes en el editor, 

a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML 

de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.



Buscador de la Plantilla




(buscas esta linea con los artilugios expandidos) debajo de  <div class=’post-footer’>  agrega lo siguiente:



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;http://www.webaholic.co.in/other/no-image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>


Por ultimo guardas los cambios y Guardar plantilla





Fecha de la Publicación;  18/11/2020



Fuente miltrucosblogger.




Publicado por:                                                       



















CONVERSATION

0 comentarios:

Publicar un comentario

Back
to top