Page 1 of 1

Kako postaviti KRUŽNI BANNER rotator na phpBB forum

Posted: Sun May 16, 2010 2:27 pm
by IvanC
Kako postaviti kružni banner rotator na phpBB forum

Ako koristite kojim slučajem phpBB 2x forum i želite postaviti banner koji će rotirati slike sa linkovima evo male ali detaljne upute.

Primjer: Postavljanje kružnog – rotirajućeg bannera u gornji dio (head) stranice phpBB2x foruma.

U ovom slučaju trebate nabaviti skriptu koja će definirati parametre bannera i proučiti na koji način skripta funkcionira. Za ovaj primjer ja sam koristi skriptu/datoteku magicimage.js koja funkcionira na slijedeći način. (ako imate neku drugu skriptu trebate pažljivo proučiti njezino funkcioniranje)

1. datoteka magicimage.js je osnovna i u njoj se postavljaju parametri za bannere. Download na vaše računalo možete napraviti sa linka na ovom tutoriajlu
2. obavezno napravite download slijedećih datoteka na HDD i kopirajte svaku a kopiju spremite na sigurno pod originalnim imenom jer na njima nećemo raditi. Dakle skinite si slijedeće datoteke:
- http: //www. vaša-domena.com/forum/templates/subSilver/overall_header.tpl
- http: //www. vaša-domena.com/forum/templates/subSilver/overall_footer.tpl
3. kreirajte folder GRAPHICS na serveru: http: //www. vaša-domena.com/graphics

Ova skripta funkcionira na način da kružno rotira slike 1,2,3,4,1,2,3,4,1,2,3,4…..
Download ove skripte (magicimage.js datoteke sa uputama ) možete izvršiti na linku Skripta izvornog autora za kružni rotator bannera ili niže već pripremljenu skriptu sa komentarima na hrvatskom jeziku. Ovdje je važan DIV tag koji pozicionira bannere tj. određuje mjesto prikazivanja.

Prvi uvjet je imati programsku aplikaciju pomoću koje ćete moći editirati *.TPL datoteke a to je nekakav PHP editor (npr: PHP-editor, Ultraedit …)

Drugi uvjet je, ako ne znate raditi sa HTML kodom tada bi trebali imati nekakav HTML program pomoću kojega ćete jednostavno kreirati tablicu sa ćelijama i pozicionirati mjesto za prikaz bannera (Frontpage, Dreamviewer … ). Kada kreirate tablicu source code dotične tablice trebat će Vam za postavljanje na forum ili ako nemate takav program kopirajte ove "source code" sa ovog tutorijala uz vaše preinake.

Da se razumijemo, Vi ne morate kreirati tablicu ako ne želite. Možete jednostavno DIV tag id="MagicImage" koji određuje mjesto prikazivanja bannera postaviti direktno u TPL datoteku. (pogledajte Korak 5.)

Treći uvjet je postavljanje skripte koja će pozivati navedenu datoteku. Ova skripta postavlja se u HEAD sekciju (jer želimo bannere prikazivati na vrhu foruma) u datoteci overall_header.tpl

Četvrti uvjet je postavljanje kreirane tablice (i DIV taga) na mjesto gdje želimo da nam se prikazuju banneri.
Ako želimo na vrhu foruma tada ćemo editirati datoteku Overall_header.tpl a ako želimo na dno foruma tada ćemo editirati datoteku overall_footer.tpl

U ovom primjeru ja ću prikazati kako postaviti kružni rotator bannera na vrh foruma, kao na ovom forumu koji sada čitate, dakle u datoteku overall_header.tpl

KORAK 1.
Isplanirajte i pripremite si nekoliko bannera (slika) istih dimenzija (npr: 468x60 *.gif, *.png, *.jpg ) i postavite u graphics folder na vaš server (domenu) koji se treba nalaziti u "rootu". http://www.vaša-domena.com/graphics/banner1-468x60.gif

KORAK 2.
Downloadajte pripremljenu i dorađenu ovu datoteku/skriptu i postavite parametre u njoj. Za ovaj primjer ja imam 6 bannera koji su postavljeni na mom serveru u folderu "graphics" http://www.domena.com/graphics/banner1-468x60.gif
Vi možete za početak (ako se niste dobro pripremili i nemate bannera za razmjenu) napraviti nekoliko bannera koji će se linkati na Vašu web stranicu za početak

Editirajte skinutu (već pripremljenu i dorađenu) datoteku magicimage.js u PHP editoru (obavezno) u dijelu source koda kao na slici ispod

Image

Obratite pažnju da u zadnjem redu gdje postavljate linkane domene ne smije biti ZAREZ.

Snimite datoteku i uploadajte je na server (vaše domene) u ROOT. Npr: www . vasa-domena.com/magicimage.js (ako je uploadate u neki folder tada morate voditi računa o putanji do navedene datoteke)

KORAK 3. Postavljanje skripte ( OBAVEZNO u datoteku overall_header.tpl) za pozivanje bannera. Bez obzira gdje želite postaviti rotator bannera ovu datoteku morate editirati i ovu skriptu postaviti u nju.

U phpBB forumu na putanji forum\templates\subSilver\overall_header.tpl nalazi se datoteka u koju ćemo postaviti prvi dio naše skripte da bi rotator funkcionirao.
Otvorite ovu datoteku obavezno pomoću PHP editora i pronađite dio source koda koji označava </head> i ISPRED njega umetnite skriptu.

To izgleda ovako

Code: Select all

<!-- END switch_enable_pm_popup -->
<!—pocetak skripte za rotator -->
<script 
		language="JavaScript" 
		src="http://www.vaša-domena.com/magicimage.js" 
		type="text/javascript">
</script>
<!—kraj skripte za rotator -->
</head>
Kod mene konkretno to izgleda ovako kao na slici ispod

Image

KORAK 4. Izrada tablice i umetanje DIV taga za mjesto bannera

Slijedeći korak je pripremiti tablicu u koju ćemo postaviti DIV tag koji će pozicionirati mjesto na kojem će se prikazivati banneri. To možete ako znate ručno napraviti HTML kod ili pomoću nekog GUI programa. Npr: pomoću Microsoft Frontpage možete izraditi tablicu sa jednom, dvije ili tri ćelije i pozicionirati objekte u ćelijama. Za primjer pokazat ću kreiranje tablice sa jednom, dvije i tri ćelije i sa pozicioniranjem objekta u ćeliji.

Ovo je source code tablice koja je maximalne širine sa jednom ćelijom gdje je objekt centriran u sredinu

Code: Select all

<table border="0" width="100%">
	<tr>
		<td align="center">Ovdje se postavlja objekt koji je centriran</td>
	</tr>
</table>
Ovo je source code tablice koja je maximalne širine sa dvije ćelije a prva lijeva ćelija je širine 30% a druga desna ćelija je širine 70% web stranice

Code: Select all

<table border="0" width="100%">
	<tr>
		<td align="left" width="30%">Objekt pozicioniran u lijevo u prvoj LIJEVOJ ćeliji</td>
		<td align="center" width="70%">Centriran objekt u drugoj DESNOJ ćeliji</td>
	</tr>
</table>
Ovo je source code tablice koja je maximalne širine sa tri ćelije od kojih srednja ima dimenzije širine 468 pixela a ostale su proizvoljne širine

Code: Select all

<table border="0" width="100%">
	<tr>
		<td align="left">lijeva ćelija objekt pozicioniran u lijevo</td>
		<td align="center" width="468">srednja ćelija širine 468 pix. objekt centriran</td>
		<td align="right">desna ćelija objekt pozicioniran u desno</td>
	</tr>
</table>
Dakle, kada smo isplanirali tablicu i broj ćelija kao i pozicije objekata u njima potrebno je postaviti DIV tag koji će odrediti mjesto gdje će se prikazivati banneri. Taj DIV tag izgleda kao u koraku 5.

Za ovaj primjer ja sam napravio jednu tablicu sa tri ćelije i u nju postavio rotator bannera u srednju ćeliju. Lijevu i desnu ćeliju nisam uopće dirao radi pojašnjenja i da bolje razumijete tutorijal (na ovom forumu na vrhu možete vidjeti da u njima imam dvije slike 120x60 koje se linkaju)

I na kraju naša pripremljena tablica izgleda ovako (ova tablica ima tri ćelije od kojih je srednja širine 468 pix. a visine 60 pix. Objekt u njoj je centriran. Ćelije Lijeva i Desna su prazne i nemaju objekta kao ni određenih parametara, a služe ako Vam ponekada zatreba da u njih nešto postavite ili ćete pak izraditi novu tablicu). Uočite DIV tag koji nam određuje mjesto prikazivanja bannera.

Code: Select all

<table border="0" width="100%">
	<tr>
		<td>&nbsp;</td>
		<td align="center" width="468" height="60"><div id="MagicImage"></div></td>
		<td>&nbsp;</td>
	</tr>
</table>
Ovdje morate voditi računa ako samo u jednu ćeliju sa strane stavljete neki objekt suprotna će Vam se poremetiti u širini pa je poželjno postaviti objekt i u nju da bi dobili balans ili postaviti fiksne širine.

I na kraju naše tablice izgledaju ovako (s time da sam prikazao debljinu okvira tablice radi boljeg razumjevanja)
Image

Na Vama je odluka koju tablicu ćete upotrijebiti. Ja sam upotrijebio ovu zadnju tablicu. Zašto? Ako koristite rezoluciju 1024x768 na monitoru tada će vam ovaj tutorijal biti možda van cjelokupnog pogleda, a to je zbog CODE elemenata u tutorijalu. Ali opet su se banneri na vrhu pozicionirali prema unaprijed pdređenom rasporedu u tablici.

KORAK 5. Postavljanje source koda tablice ili umetanje DIV taga za mjesto prikazivanja bannera. Prije bilo kakvog rada u datoteci "overall_header.tpl" napravite si rezervnu kopiju i spremite je na sigurno pod nazivom "overall_header_original.tpl", u slučaju da nešto ne uradite kako treba uvijek možete vratiti na početno stanje.

Kao što sam napomenuo. Imate dvije mogućnosti za postavljanje (određivanje) mjesta na kojem će se prikazivati banneri.

To mjesto se određuje postavljanjem DIV taga koji glasi ovako

Code: Select all

<div id="MagicImage"></div>
Ovaj DIV tag treba umetnuti u tablicu tj u ćeliju gdje želimo da nam se prikazuju banneri ili pak direktno u datoteku overall_header.tpl. Savjetujem Vam da ovaj DIV tag umetnete u tablicu jer ćete kasnije lakše moći kontrolirati ili mijenjati eventualne preinake same datoteke

Gdje postaviti tablicu ili DIV tag u overall_header.tpl datoteci?
Otvorite dotičnu datoteku pomoću PHP editora i pronađite slijedeći dio source koda u njoj, tj. pozicionirajte se na kraj source koda. Umetnite source kod tablice (ili DIV sam tag) iza </table> a prije taga </br > (napravite jedan red razmaka između ovih tagova).

To izgleda kao na slici ispod (btw: nemojte obraćati pažnju na brojeve redova, kod Vas možda nije isto)
Image

A to na kraju izgleda ovako sa tablicom od tri ćelije i širinom srednje 468 pix a visine 60 pix.

Image

Ovdje Vam savjetujem da izbjegavate umetanje "samog" DIV taga jer nemate mogućnost manipulacije pozicioniranja bannera. Dakle idite sa tablicom.

Snimite dotičnu datoteku i uploadajte sve slike bannera na server u folder "graphics" (ako već niste) a datoteku overall_header.tpl u folder na putanji (path stazi) forum\templates\subSilver\overall_header.tpl

Pogledajte sada Vaš phpBB2x forum. Ako nešto ne valja onu datoteku koju ste spremili na sigurno pod nazivom "overall_header_original.tpl" preimenujte nazad u pravo ime "overall_header.tpl" i uploadajte je na server da Vam forum funkcionira a poslije tražite gdje ste pogriješili.

Ako želite postaviti rotator bannera na dno foruma tada je potrebno editirati datoteku overall_footer.tpl. Evo mala naznaka gdje.

U OVERALL_FOOTER.tpl (ispred </body> taga)
Ovo je jedna tablica i jedna ćelija pozicija objekta centrirana i postavljen DIV tag

Code: Select all

<!--scripta za rotator bannera-->
<table border="0" width="100%">
	<tr>
		<td align="center"><div id="MagicImage"></div></td>
	</tr>
</table>
<!--kraj scripte za rotator bannera-->
</body>
I na kraju mali rezime:

1. Download datoteke "magicimage.js" i datoteka sa foruma (vidi uvod ovog tutorijala)
2. Imati instaliran PHP editor (obavezno)
3. Pripremiti slike bannera 468x60 (ili 120x60 ili XXXxYYY) i uploadati na server vaše domene u folder "graphics" (vidi korak 1)
4. Editirati datoteku magicimage.js i postaviti parametre za bannere sa ispravnim linkovima. Nakon editiranja i postavljanja parametara uploadati datoteku na server vaše domene u ROOT folder (vidi korak 2)
5. Imati instaliran program za kreiranje tablice (ako ne znate pisati HTML kod) ili kopirajte ove "source code" sa ovog tutorijala
6. Bekapirajte si jednu kopiju datoteke "overall_header.tpl" na sigurno. Dakle ako nemate datoteke na HDD-u vašeg računala, downloadajte datoteke sa servera iz foruma i usput napravite jednu kopiju svake i spremite na sigurno pod originalnim imenom. Editirajte datoteku "overall_header.tpl" za postavljanje pozivne skripte dotične datoteke sa vaše domene (vidi korak 3)
7. Kreiranje tablice i postavljanje DIV taga u tablicu ili pak direktno DIV tag u TPL datoteku. U ovom koraku se odlučujete gdje ćete postaviti bannere. Na vrh foruma (u overall_header.tpl) ili na dno foruma (u overall_footer.tpl). U ovom koraku odlučujete o mjestu gdje će Vam se prikazivati banneri i rotirati. (vidi korak 4)
OBAVEZNO ! Bekapirajte si jednu kopiju datoteke prije samog editiranja na sigurno
8. Umetanje tablice ili DIV taga u TPL datoteke ovisno gdje želite prikazivati bannere (vrh ili dno foruma). Savjet: idite preko tablice jer ćete lakše manipulirati pozicijom bannera.
9. Upload dotičnih datoteka koje ste editirali na server vaše domene u određene foldere na path stazama.
10. U koliko nešto ne štima jednostavno kopirajte originalne datoteke nazad na početno stanje.

I na kraju još jedan link ako imate HTML klasične web stranice *.html oblika a želite na njih postaviti HTML KRUŽNI ROTATOR BANNERA kao na stranici www.ic.ims.hr u gornjem dijelu web stranice

I što više reći to je to, djeluje komplicirano ali nije, ja sam išao malo previše u detalje pa izgleda da ima puno toga za raditi i da je to veliki posao, nadam se da ćete se snaći i uspjeti postaviti banner na svoj forum koji će kružno rotirati slike i omogućiti da se svaka slika (banner) može linkati.
Nemojte pretjerivati sa brojem bannera (slika) jer će se dogoditi da posjetiocu promakne neki banner jer ih ima puno. Mislim da je dovoljno max 4-5 bannera uz ImageDelay od 3000 (3 sekunde).

Btw: nadam se da nisam negdje fatalno pogriješio a ako jesam (u žurbi) postajte u forum pohvale i kritike pa ću ispraviti.