Header Ads Widget

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!


Trimiteți un comentariu

33 Comentarii

  1. Nici la mine nu merge.Am facut exact cum scrie si nu apare nimic sub posturi :(

    RăspundețiȘtergere
  2. Mitza, asa se intampla cand nu citesti tot.

    In ultimele 2 randuri spun destul de clar ca ele nu se vad pe pagina de pornire. Incearca sa intri pe adresa unei paginii si vei vedea ca defapt a mers. Dai clic pe titlul unei postari.

    RăspundețiȘtergere
  3. exista deja pe net acest LinkWithin care se instaleaza mult mai usor

    RăspundețiȘtergere
  4. Stiu ca exista Linkwithin. L-am folosit si eu mai demult.
    Dar nici asta nu e greu de instalat. Trebuie doar putina atentie.

    RăspundețiȘtergere
  5. buna seara!
    oofff,nush ce naiba the skin am ales(dar imi place ff mult),ca nu gasesc nici-o linie de cod in html,de care spui tu...ca sa add !mai exact ,al doilea cod..ce-i de facut in cazul asta? sa renunt la skin?dar imi place...:-/

    RăspundețiȘtergere
  6. In mod normal ar trebui sa gasesti macar aceasta linie:
    <data:post.body/>

    Poate ai uitat sa bifezi casuta de extindere a sablonului!

    RăspundețiȘtergere
  7. buna seara,daniel!
    :( nu merg,dragule...le-am copiat exact asa cum ai zis..si nimik! ooofff,probabil skinul e de vina...pt ca in alt blog ,am direct de pe situl linkwithin si arata si poze,dar in blogul asta nu-mi arata decat linkurile de la articole! mi-a dat batai de cap skinul asta...dar chiar imi place!!!


    cat despre emoticoane...nici macar nu exista acele linii de cod de care zici tu...ma gandeam sa-ti trim codul html pe e-mail sa vezi despre ce e vb?probabil tre facuta o modificare in html,dar yo n-am idee despre ce anume,poate ma ajuti tu?ca deja ma dispera... x(
    scuza-ma de deranj!ti-am scris 2 in 1...ca sa nu mai alerg pe alt topic!sorry
    best regards!

    RăspundețiȘtergere
  8. Heart pe care blog nu poti instala acest widget? Pe cel cu Kanal D sau pe cel cu retete? Pe cel cu retete am vazut ca ai deja "linkwithin" deci ar mai ramane celalalt. Sper ca nu faci confuzie intre widget-ul de la Linkwithin si acesta.

    Despre emoticoane: e posibil sa nu ai acele 2 linii pe blogul cu retete dar ele nu sunt asa de importante. Intre ele se pune codul care arata emoticoanele deasupra casutei de comentarii. Celalalt cod face toata treaba.

    Dar poti sa-mi trimiti o copie a codului sablonului si ma voi uita pe el sa vad care e treaba!

    RăspundețiȘtergere
  9. misiune indeplinita :)) am incercat si cu LinkWithin, dar nu mi-a placut.. jumatate din pagina principala era cu related posts (vorba vine).. am preferat sa folosesc metoda asta, care nu imi arata postarile asemanatoare si pe pagina de pornire.. din nou, multumesc :)

    RăspundețiȘtergere
  10. super fain şi uşor de făcut :)

    io am pus 10 plus alea de la Link-With :))

    RăspundețiȘtergere
  11. merge dar imi apare imediat dupa continutul articolului si imi creaza un spetiu imens pana la comentarii

    RăspundețiȘtergere
  12. s-a rezolvat....dar acum vreau sa scap de dunga dintre poze sau sa o fac mai scurta...multumesc

    RăspundețiȘtergere
  13. Am urmat pasii intocmai si a iesit perfect cu un singur amendament : "Related posts" (pe care l-am redenumit apare scris cu litere de tipar desi eu l-am scris bine si apare scris cam ingrosat si de-o schioapa... Vreo solutie? Multumesc

    RăspundețiȘtergere
  14. Multumesc frumos. Am urmat pasii toti si a iesit bine dar am o intrebare :
    De ce apare doar cand citesc tot postul? Eu am 5 posuri pe pagina si nu-l vad decat atunci cand intru pe fiecare post in parte. Se poate face ceva?

    RăspundețiȘtergere
  15. Salut , am o problema adica nu imi afiseaza deloc :) si in plus de asta vreau sa scot linkwithin si nu il gasesc nicaieri :(

    RăspundețiȘtergere
  16. Sorin, Linkwithin se scoate din pagina Elemente de pagina. Este gadgetul de sub Postari de blog.

    Iar despre widget-ul de fata trebuie sa-mi dai mai multe detalii: pe care blog? ti-a dat vreo eroare? Feedul este cumva oprit?

    RăspundețiȘtergere
  17. Ms foarte fain ptr detalii merge perfect :)

    RăspundețiȘtergere
  18. :(( nu merge... am incercat de 2 ori si nu imi merge!

    RăspundețiȘtergere
  19. gata, am reusit... Imi apareau acele coduri de mai mutle ori... iar codurile pe care trebuia sa le pun nu le nimeream nici cum in la locul potrivit!
    Multumesc!

    http://nuntacustil.blogspot.com ;)

    RăspundețiȘtergere
  20. Nu mai functioneaza de cateva zile... oare de ce?

    RăspundețiȘtergere
  21. Alex, inlocuieste in primul cod acest url:

    http://blogergadgets.googlecode.com/files/relatedthumbs19.js

    cu acesta

    http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

    In articol este deja updatat deci tu va trebui sa-l gasesti in sablonul tau.

    RăspundețiȘtergere
  22. salut, imi poti spune cum fac sa apara imagini la linkwith?? pls apare doar scrisul...

    RăspundețiȘtergere
    Răspunsuri
    1. Multumesc frumos Daniel a esit foarte bine.E super frumos!

      Mii de multumiri!!

      Ștergere
    2. Daniel Te rog dami o mana de ajutor nu vrea sa mai mearga.
      Mi-a creeat un spatiu intre postare si casuta comentariilor, dar nu se mai vede. Nu afiseaza nimic.
      Nu stiu care este problema. L-am instalat de 10 ori si tot nu vrea.
      Iti multumesc anticipat.. !

      Ștergere
  23. salut...am si eu o intrebare...vreau ca atunci cand postez linku pe facebook de exemplu sa imi apara si poza principala a blogului...am incercat sa fac ce ai zis mai sus...dar nu imi merge...imi apare doar linkul si atat :(...multumesc

    RăspundețiȘtergere
  24. Nici mie nu imi merge, desi am facut asta in mai multe randuri. Poate sablonul de blog sa fie o problema? www.hobbybucatar.ro

    RăspundețiȘtergere
  25. Nu merge, se pare ca anumite widget-uri nu merg pe anumite sabloane.

    RăspundețiȘtergere