Paşii de urmat pentru instalarea widget-ului:
1. Urmati calea Aspect –> Editati Html si salvati o copie a sablonului in calculator. Acta pentru ca in cazul in care ceva nu merge cum trebuie sa puteti reveni la forma lui actuala.
2. Bifati casuta care extinde codul sablonului.
3. cauta acest cod (Ctrl+F):

</head>

si chiar inainte de el copie codul de mai jos.

<!--Related Posts with thumbnails Scripts and Styles Start-->Pentru a modifica culoarea fundalului care apare cand miscati mouse-ul deasupra lor, modificati #d4eaf2 cu ce culoare doriti. Puteti folosi codul de culori din Adobe Photoshop.

<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEhwQ036ionSjd_Jd4FlB1Ws0-HET6xn95GKePSkoWSUwt7qqgz5zImsBnTsn6n3qINMOugN-mRnvtwENuat0cB1od283iEE7sEIZ1iXtgL5sQbKJBT-F1VMQxpqKyrKy_AsGg2gaJrUXPA/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Acum cauta una din urmatoarele linii de cod:

<data:post.body/>

sau

<div class=’post-footer-line post-footer-line-1′>

sau

<p class=’post-footer-line post-footer-line-1′>

si imediat dupa una din ele adauga codul de mai jos:

<!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></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' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Pentru a modifica numarul de posturi asemanatoare care vor apare dupa postare schimbati numarul 5 cu ce numar vreti, dar aveti grija la latimea coloanei de postare a sablonului vostru.

var maxresults=5;

Pentru a modifica titlu care apare deasupra lor modificati Related Posts cu ce credeti voi ca ar fi mai bine.

var relatedpoststitle=”Related Posts“;

Previzualizati pentru a vedea daca ati gresit ceva si daca nu, puteti salva sablonul. Pentru a vedea cum arata trebuie sa va duceti pe adresa unei pagini, widget-ul nefiind vizibil pe pagina principala.

[SOURCE]