Adauga un widget cu posturi asemanatoare in Blogger

Unul din cele mai cautate trucuri pentru Blogger este posibilitatea de a adauga la sfarsitul articolului un widget care sa afiseze articolele similare cu articolul citit. Am cautat si eu acest truc si se pare ca sunt o gramada de astfel de widget-uri pe net care pot face asta. Desi multi au postat pe blogurile lor codul pentru acest widget se pare, din cate am citit, ca toate se bazeaza pe munca lui Hoctro, cel care a creat primul acest widget.
Cu toate astea, am gasit si un alt cod un pic mai greu de implementat dar care iti da o mai mare posibilitate de editare. Si cum acest cod l-am gasit pe acest blog creditul i se acorda lui. Sub postul meu aveti si un exemplu la cum arata widget-ul.


Adaugarea codului in html-ul sablonului
Nu uitati sa salvati o copie a actualului sablon in calculator pentru a putea reveni la el daca ceva nu merge bine. Bifati casuta de extindere a sablonului si cautati aceasta linie (Ctrl+F si cauta):

<data:post.body/>

Imediat sub ea copiati acest cod:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Posturi similare in categoria <b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

La acest cod aveti posibilitatea de a modifica aceasta parte: "Posturi similare in categoria". Acest text va apare inaintea link-urilor catre posturile similare.
Mai puteti modifica si numarul de link-uri care vor aparea. Schimbati valoarea lui 5 cu ce valoare vreti.

Dupa ce am adaugat acest cod vom trece la adaugarea codului CSS si a codului JavaScript. Cautati aceasta linie:

</head>

si inainte de el copiati urmatorul cod:

<style>

#related-posts {
float : left;
width : 470px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Aici puteti modifica modul cum va arata widget-ul in pagina.
Pentru a modifica culoarea de fundal a widget-ului schimbati aceasta linie (scrisa cu rosu) :

background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;

cu aceasta:

background: #000000;

Aceasta cod va face fundalul negru, dar puteti modifica cu orice culoare doriti. Aveti aici un tabel de culori, dar de preferat este sa faceti fundalul la fel ca fundalul blogului.

------------------------------------------

Pentru a modifica culoarea link-urilor schimbati codul scris cu verde 054474  in codul de sus. Din nou puteti alege ce culoare doriti dar ar fi bine sa fie la culoarea link-urilor din blog.

------------------------------------------

Pentru a modifica culoarea link-urilor cand treceti cu mouse-ul peste ele modificati codul scris cu albastru  054474  Alegeti ce culoare vreti.

------------------------------------------

Pentru a schimba culoarea textului care apare inainte de link-uri modificati codul scris cu culoarea portocaliu  940f04 .Alegeti ce culoare vreti.

------------------------------------------

De asemenea puteti modifica si latimea widget-ului. Modificati valoarea scrisa cu violet (sau mov :) ) 470 cu ce latime vreti.

------------------------------------------

In curand voi posta un articol in care veti invata cum sa modificati sablonul Minima cu 2 coloane intr-un sablon cu 3 coloane, asa ca nu uitati sa va abonati la feed.