Scris de Keir Vin Iun 01, 2012 9:23 pm
| 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...
Pentru a introduce codurile, trebuie să urmaţii paşii specificaţi mai jos: - Pentru codul Javascript:
| Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript. | - Pentru codul CSS:
| Panou de Administrare Afisare Imagini si culori Culori Foaie de stil CSS. |
- 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; }
- 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; }
- 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; }
- 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; }
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.
|