Tutorial widget posturi asemanatoare cu thumbnails pentru Blogger

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–>
<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://blogergadgets.googlecode.com/files/relatedthumbs19.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. Puteti folosi codul de culori din Adobe Photoshop.

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–>
<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.

via