Widget Posturi asemanatoare cu thumbnails pe Blogger

Unul din cele mai cautate trucuri pentru Blogger ramane posibilitatea de a afisa la sfarsitul articolului un widget care sa afiseze articolele similare cu articolul citit. Acum catva timp va prezentam un widget cu posturi asemanatoare  care afiseaza link-uri din aceeasi categorie cu articolul citit.

Widget creat de Related Posts with Thumbnails for Blogger

Acum va prezint un widget asemanator, bazat tot pe categorii, dar care pe langa link-ul clasic afiseaza si o poza din articolul respectiv. Pentru a fi afisata poza, ea trebuie sa fie upload-ata prin metoda pusa la dispozitie de Blogger. Daca nu este nici o poza in articol, v-a fi afisata o poza default.
Pentru ca widget-ul sa functioneze, trebuie ca etichetele de blogul vostru sa contina deja cateva articole.

Acest widget este foarte important pentru un blog el ducand la creasterea numarului pagini citite din blog, asa ca cine vrea sa il instaleze trebuie sa urmeze pasii de mai jos.




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. Cautati acest cod (Ctrl+F):

</head>

si chiar inainte de el copiati codul de mai jos.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Pentru a modifica culoarea fundalului care apare cand miscati mouse-ul deasupra lor, modificati #d4eaf2 cu ce culoare doriti. Aici aveti un tabel cu peste 300 de culori din care sa alegeti.

4. Acum cautati 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 adaugati codul de mai jos:

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><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 widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</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.

Succes!