Adăugarea widget-ului "Ultimii membrii înregistraţi"

Scris de Keir Vin 1 Iun 2012 - 21:23

Adăugarea widget-ului "Ultimii membrii înregistraţi"

Cu ocazia sarbatorilor de 1 iunie, am venit cu o surpriza. M-am decis sa scriu mult prea asteptatul tutorial, si anume...: Widgetul Ultimii membri inregistrati. Exact! Acum, o astfel de optiune este disponibila si pentru platforma forumgratuit. Nu ezitati sa urmati cativa pasi simplii...

Sageată

Pentru a introduce codurile, trebuie să urmaţii paşii specificaţi mai jos:
- Pentru codul Javascript:

Adăugarea widget-ului "Ultimii membrii înregistraţi" Go-jum10

Panou de Administrare

Adăugarea widget-ului "Ultimii membrii înregistraţi" Arrow10

Module

HTML & JAVASCRIPT

Gestiunea codurilor JavaScript.

- Pentru codul CSS:

Panou de Administrare

Afisare

Imagini si culori

Culori

Foaie de stil CSS.

Versiunea phpBB2:

- Cod Javascript:

Cod:: $(function(){ $('#fa_ticker_block:first').after(' <table class="forumline ultmembri" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="catLeft" height="25"> <div class="genmed module-title">Ultimii membri inregistrati</div> </td> </tr> <tr> <td class="row1"> <table width="100%" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="row1"> <div class="numar 1">1.</div> <div class="membru1"></div> <br /> <div class="numar 2">2.</div> <div class="membru2"></div> <br /> <div class="numar 3">3.</div> <div class="membru3"></div> <br /> <div class="numar 4">4.</div> <div class="membru4"></div> <br /> <div class="numar 5">5.</div> <div class="membru5"></div> <br /> <div class="numar 6">6.</div> <div class="membru6"></div> <br /> <div class="numar 7">7.</div> <div class="membru7"></div> <br /> <div class="numar 8">8.</div> <div class="membru8"></div> <br /> <div class="numar 9">9.</div> <div class="membru9"></div> <br /> <div class="numar 10">10.</div> <div class="membru10"></div> </td> </tr> </table> </td> </tr> </table> '); $('.membru1').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(0)'); $('.membru2').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(1)'); $('.membru3').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(2)'); $('.membru4').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(3)'); $('.membru5').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(4)'); $('.membru6').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(5)'); $('.membru7').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(6)'); $('.membru8').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(7)'); $('.membru9').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(8)'); $('.membru10').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .forumline td:has("span.gen a.gen") a.gen:eq(9)'); $('.ultmembri').css('width','200px'); });

- Cod CSS:

Cod:: .ultmembri .row1 div{ display: inline !important; }

Versiunea phpBB3:

- Cod Javascript:

Cod:: $(function(){ $('#fa_ticker_block:first').after(' <div class="module ultmembri"> <div class="inner"> <span class="corners-top"><span></span></span> <div class="h3">Ultimii membri inregistrati</div> <br /> <div class="box-content"> <div class="numar 1">1.</div> <div class="membru1"></div> <br /> <div class="numar 2">2.</div> <div class="membru2"></div> <br /> <div class="numar 3">3.</div> <div class="membru3"></div> <br /> <div class="numar 4">4.</div> <div class="membru4"></div> <br /> <div class="numar 5">5.</div> <div class="membru5"></div> <br /> <div class="numar 6">6.</div> <div class="membru6"></div> <br /> <div class="numar 7">7.</div> <div class="membru7"></div> <br /> <div class="numar 8">8.</div> <div class="membru8"></div> <br /> <div class="numar 9">9.</div> <div class="membru9"></div> <br /> <div class="numar 10">10.</div> <div class="membru10"></div> </div> <span class="corners-bottom"><span></span></span> </div> </div> '); $('.membru1').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(0)'); $('.membru2').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(1)'); $('.membru3').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(2)'); $('.membru4').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(3)'); $('.membru5').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(4)'); $('.membru6').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(5)'); $('.membru7').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(6)'); $('.membru8').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(7)'); $('.membru9').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(8)'); $('.membru10').load('/memberlist?mode=joined&order=DESC&submit=Ok&username #memberlist .avatar-mini a:eq(9)'); $('.ultmembri').css('width','200px'); });

- Cod CSS:

Cod:: .ultmembri .box-content a img{ display: none !important; } .ultmembri .box-content div{ display: inline !important; }

Versiunea punBB:

- Cod Javascript:

Cod:: $(function(){ $('#pun-visit:first').after(' <div class="module main ultmembri"> <div class="main-head"><h2>Ultimii membri inregistrati</h2></div> <div class="main-content"> <div class="numar 1">1.</div> <div class="membru1"></div> <br /> <div class="numar 2">2.</div> <div class="membru2"></div> <br /> <div class="numar 3">3.</div> <div class="membru3"></div> <br /> <div class="numar 4">4.</div> <div class="membru4"></div> <br /> <div class="numar 5">5.</div> <div class="membru5"></div> <br /> <div class="numar 6">6.</div> <div class="membru6"></div> <br /> <div class="numar 7">7.</div> <div class="membru7"></div> <br /> <div class="numar 8">8.</div> <div class="membru8"></div> <br /> <div class="numar 9">9.</div> <div class="membru9"></div> <br /> <div class="numar 10">10.</div> <div class="membru10"></div> </div> </div> '); $('.membru1').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(0)'); $('.membru2').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(1)'); $('.membru3').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(2)'); $('.membru4').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(3)'); $('.membru5').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(4)'); $('.membru6').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(5)'); $('.membru7').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(6)'); $('.membru8').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(7)'); $('.membru9').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(8)'); $('.membru10').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .frm-form .avatar-mini a:eq(9)'); $('.ultmembri').css('width','200px'); });

- Cod CSS:

Cod:: .ultmembri .main-content a img{ display: none !important; } .ultmembri .main-content div{ display: inline !important; }

Versiunea Invision:

- Cod Javascript:

Cod:: $(function(){ $('#fa_ticker_block:first').after(' <div class="module borderwrap ultmembri"> <div class="maintitle"><h3>Ultimii membri inregistrati</h3></div> <div class="box-content"> <div class="numar 1">1.</div> <div class="membru1"></div> <br /> <div class="numar 2">2.</div> <div class="membru2"></div> <br /> <div class="numar 3">3.</div> <div class="membru3"></div> <br /> <div class="numar 4">4.</div> <div class="membru4"></div> <br /> <div class="numar 5">5.</div> <div class="membru5"></div> <br /> <div class="numar 6">6.</div> <div class="membru6"></div> <br /> <div class="numar 7">7.</div> <div class="membru7"></div> <br /> <div class="numar 8">8.</div> <div class="membru8"></div> <br /> <div class="numar 9">9.</div> <div class="membru9"></div> <br /> <div class="numar 10">10.</div> <div class="membru10"></div> </div> </div> '); $('.membru1').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(0) .popmenubutton a .membername'); $('.membru2').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(1) .popmenubutton a .membername'); $('.membru3').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(2) .popmenubutton a .membername'); $('.membru4').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(3) .popmenubutton a .membername'); $('.membru5').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(4) .popmenubutton a .membername'); $('.membru6').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(5) .popmenubutton a .membername'); $('.membru7').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(6) .popmenubutton a .membername'); $('.membru8').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(7) .popmenubutton a .membername'); $('.membru9').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(8) .popmenubutton a .membername'); $('.membru10').load('/memberlist?mode=joined&order=DESC&submit=Ok&username .member-list .member:eq(9) .popmenubutton a .membername'); $('.ultmembri').css('width','200px'); });

- Cod CSS:

Cod:: .ultmembri .box-content div{ display: inline !important; }

Intrebari frecvente:

Unde va aparea widget-ul?
Widget-ul va aparea mai jos de optiunea Anunturile forumului.

Am urmarit pasii cu atentie, dar nu se intampla nimic.
In acest caz va rog sa fiti siguri de 2 lucruri:
- Ati activat Anunturile pe forum, si ati adaugat unul.
(Daca doriti ascunderea acestora, apelati, va rog, la serviciul de suport)
- Ati activat codurile Javascript, si ati bifat Toate paginile, la optiunea Amplasare.

Cum modific latimea widget-ului?
Pentru a modifica latimea acestuia, la sfarsitul codului Javascript aveti asa o linie:

Cod:: $('.ultmembri').css('width','200px');

Modificati valoarea de 200px cu valoarea dorita.

Cum maresc sau micsorez lista membrilor? (Pentru cei mai avansati!)
Pentru a mari lista, adaugati dupa ultimul cod de acest gen:

Cod:: <div class="numar 10">10.</div> <div class="membru10"></div>

exact acelasi cod, insa cu numarul modificat, adica:

Cod:: <div class="numar 11">11.</div> <div class="membru11"></div>

Dupa cum ati observat, numarul 10 s-a schimbat in 11, si, nu este de exclus faptul ca dupa fiecare linie de acest gen se adauga elementul care separa lista de un rand:

Cod:: <br />

Doar ultimul cod de acest gen, nu are acest element alaturi.

Pentru a micsora lista, nu trebuie decat sa urmariti pasii "de la coada la cap". Asa deci, veti sterge codul urmator de cate ori doriti:

Cod:: <div class="numar X">X.</div> <div class="membruX"></div>

unde X este de fapt un numar...

Nota: Daca nu sunteti sigur in ceea ce faceti, sau doriti niste modificari, va rog sa apelati la serviciul de suport de pe acest forum.