sâmbătă, 20 iunie 2009

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.

19 comentarii:

  1. sooper,ai niste posturi super.mega interesante...una ce numi place la blogu' asta e ca se gruzeste,cred ca e din pricina emoticoanelor...nui asa??

    RăspundețiȘtergere
  2. Multumesc Dumittru, si tu ai un blog foarte interesant. :)
    Cat despre faptul ca se gruzeste nu prea inteleg ce inseamna. Stiu ca blogul se incarca destul de greu, dar asta este de la toate scripturile instalate pentru a le proba. Emoticonurile sunt generate si ele de un JavaScript dar nu cred ca ele provoaca vreo problema.

    RăspundețiȘtergere
  3. eu nu am aia cu data post body;(

    RăspundețiȘtergere
  4. Roxy, cauta asta:

    div class='post-footer'

    si copiaza codul dupa linia gasita.

    Succes!

    RăspundețiȘtergere
  5. am facut intocmai, dar dupa Articole similare imi apar si tagurile.. Help!

    RăspundețiȘtergere
  6. Bună dimineaţa, nu ştiu de ce, dar la templatu ăsta nou, când adaug acest widget, îmi apare sus în postare....

    pot să shimb cv la widget ? să-mi apară normal în josul paginii ??

    RăspundețiȘtergere
  7. Incearca dupa una din aceste linii:

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

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

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

    RăspundețiȘtergere
  8. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
  9. Am procedat intocmai, dar nu-mi apare in blog. :(

    RăspundețiȘtergere
  10. Am pus de doua ori "Related posts" pe blog si acum nu stiu cum sa sterg una dintre ele. Te rog sa ma ajuti. www.geografilia.blogspot.com

    RăspundețiȘtergere
  11. Ionut, bifeaza casuta de extindere a codului si cauta codul de la punctul 4. Acolo vei gasi 2 grupuri de cod identice, sterge unu din grupuri.

    RăspundețiȘtergere
  12. La ce te referi prin "codul de la punctul 4"? Unde este acest punct 4? :D

    RăspundețiȘtergere
  13. Daca te referi la comentariul 4, am cautat acel cod, dar nu am gasit nimic de doua ori. Probabil din cauza faptului ca pentru cele 2 "related posts" am adaugat cate un cod diferit (odata de la articolul asta, si altadata de la alt articol de pe acest blog)

    RăspundețiȘtergere
  14. Eu nu reusesc sa gasesc primul cod, dau cautare dar nimic :(

    RăspundețiȘtergere
  15. Am modificat in articol codul de la punctul 1. Cauta-l pe acela.

    RăspundețiȘtergere
  16. Cum pot sa schimb fundalu unde scrie "Posturi similare in categoria"si etichete ?
    sau sa nu mai apara de loc,acel fundal de "mov"

    RăspundețiȘtergere
  17. Daniel se poate face ce a spus "Anonim" deoarece doresc sa scot si eu acel fundal ?

    RăspundețiȘtergere
  18. Buna,am facut exact cum ai scris tu mai sus da...nu imi apare nimik!Blogul este http://setmefreepc.blogspot.com/

    RăspundețiȘtergere
  19. am instalat asta si nu imi apar imaginile :|
    uite blogul, te rog da-mi un sfat...
    http://allyouneedtoknowaboutmetin.blogspot.ro/2012/07/what-did-buff-mean.html

    RăspundețiȘtergere