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

Vezi subiectul anterior Vezi subiectul urmator In jos

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

Mesaj Scris de Keir la data de Vin 1 Iun - 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:
Panou de Administrare 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. La revedere

   
Acest tutorial a fost scris de catre L!.

   Copyright ˆ Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Keir
Membru onorific
Membru onorific

masculin

Mesaje : 6769
Varsta : 19
Localizare : Buzau
Data înscrierii : 28/12/2011
Multumiri : 68
Niciun avertisment

http://neotalk.wikiforum.ro/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum