Entradas Relacionadas con Imagen (Personalizado)

Ayer les Mostre como añadir entradas relacionadas con imagen pero añadiendo solo un gadget
pero hoy les mostrare como añadir entradas relacionadas con imagen, pero añadiendo codigos
en la plantilla.

Comenzemos..

Primero vamos a Diseño / Edición de HTML / Expandimos Artilugios /
(Presionamos Control + F para buscar mas Rapido)
y buscamos </head> y justo encima pegamos:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remover --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDthHS3rooCPkWChPywYHMTZEBBKGuRs3rBATVDHZnY3uSjuUzicBedGkOZJ2W0JOE_-GT09T7YllNWQkn1h2epGvlonTeRTTT-A4hqWoLdSkIpaE2pWa-ENKOKcwwzlC_m137jxvRRzs/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas Relacionadas";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remover --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

En el Codigo se Encuentra el CSS donde podemos cambiarle el estilo, y un script que hara que
el truco funcione.

Ahora Buscamos:

<div class='post-footer-line post-footer-line-1'>

 si no lo encontramos buscamos este otro codigo:

<p class='post-footer-line post-footer-line-1'>

 Ahora Justo abajo del codigo que encontremos pegamos:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remover --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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>
</div><div style='clear:both'/>
<!-- remover --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

 y asi agregamos las entradas relacionadas con imagen.