joi, 30 iulie 2009

Pune un widget cu cele mai populare posturi pe Blogger

In utima vreme am fost intrebat tot mai des daca stiu vreun widget care sa afiseze cele mai populare posturi din blog. Cautand pe net am gasit o gramada de astfel de widget-uri, dar din pacate majoritatea nu functionau.

Totusi am gasit si un widget care merge. El arata ca in poza de mai jos iar aici este blogul autorului. BloggerStop.net



Acest widget se bazeaza pe un Javascript care cu ajutorul Yahoo Pipes gaseste numarul de comentarii pe care le are un post apoi afisandu-le in acest widget in ordine descrescatoare.

Pentru a adauga acest widget pe blogul vostru blogspot nu trebuie decat sa adaugati un cod intr-un gadget html/javascript. Deci urmati calea 'Aspect --> Elemente de pagina' si apoi dati clic pe 'Adauga un obiect gadget'. Din lista care apare alegeti optiunea 'Html/JavaScript'  si copiati codul de mai jos in campul pentru continut.

Inainte de a va arata codul vreau sa va spun ca sunt doua metode de a afisa link-urile catre postare si deci tot 2 coduri care sa produca cele 2 tipuri de widget-uri. Puteti alege metoda care vreti.

Important:
Nu uitati sa schimbati adresa blogului meu cu a voastra.
Nu folositi http://.
Numarul scris cu verde este numarul de link-uri care vor aparea in widget si il puteti modifica dupa cum doriti.
Acest cod creaza fundalul widget-ului:

background-color:#FFFFFF;

modificati-l cum doriti pentru a arata bine in blogul vostru.

Daca vreti ca link-urile sa arate asa:

  • Cea mai comentata postare (28)
  • A doua postare (21)
  • A trea postare (12)
copiati codul de mai jos.

<div style="background-color:#FFFFFF;padding:5px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fbloggerajutor.blogspot.com&num=10" type="text/javascript"></script>
</div>


Daca vreti ca link-urile voastre sa arate asa

  • Cea mai comentata postare
  • A doua postare
  • A trea postare

copiati acest cod:

<div style="background-color:#FFFFFF;padding:5px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2Fbloggerajutor.blogspot.com&num=10" type="text/javascript"></script>
</div>



4 comentarii:

  1. salut,

    am folosit widget-ul propus de tine insa in zona in care ar trebui sa apara imi arata un spatiu gol, stii cumva din ce cauza?

    RăspundețiȘtergere
  2. Am modificat codul si acum merge si widgetul de jos

    RăspundețiȘtergere
  3. şi pe acesta la-am pus
    dar eu tot mai visez la un widget cu posturile cele mai accesate sau comentate, dar să aibă imagine cum au alea pentru posturi asemănătoare de sub post

    Aşa să fac în partea dreată un rând de posturi mai accesate cu imagine ar fi superb...... poate o să-i afli tu într-un final secretul :D

    pana atunci succes in continuare cu blogu NOTA 10

    RăspundețiȘtergere
  4. mi-am pus si eu codul...dar nu imi arata toate postarile.De exemplu em postari cu comm. mai multe decat postarea nr2 e exemplu care are mai putine decat cea care nu apare....:)

    RăspundețiȘtergere