Membuat Menu Tambahan Pada phpbb

3 comments :

Artikel ini akan menjelaskan cara menambahkan menu pada phpbb anda, pada umumnya phpbb mempunyai tampilan seperti berikut :





Tampilan diatas merupakan tampilan standard phpbb, disini saya akan menyelipkan menu tambahan pada phpbb.

Berikut merupakan hasil akhirnya :




Seperti yg anda lihat pada tampilan phpbb diatas sudah ditambahkan menu.

Untuk bisa menambahkan menu seperti diatas, anda lakukan dengan mengedit file overall_header.tpl, yang terdapat pada folder “templates/*nama_theme*/”.

Buka file overall_header.tpl menggunakan editor fav. anda, ketik kode html berikut pada file overall_header.tpl pada baris 275, tepatnya diatas tag<br /> :

<!-- Mulai Tambahan_Menu -->

<div id="extra_menu">

<ul>

<li><a href="http://www.mercubuana-it.org" target="_blank"><img src="templates/*nama_theme*/images/menu/home.gif" alt="Home" hspace="3" align="absmiddle" />Home</a></li>

<li><a href="http://mail.mercubuana-it.org" target="_blank"><img src="templates/*nama_theme*/images/menu/mail.gif" alt="Mail" hspace="3" align="absmiddle" />Mail</a></li>

<li><a href="http://chat.mercubuana-it.org" target="_blank"><img src="templates/*nama_theme*/images/menu/chat.gif" alt="Chat" hspace="3" align="absmiddle" />Chat</a></li>

<li><a href="http://artikel.mercubuana-it.org" target="_blank"><img src="templates/*nama_theme*/images/menu/artikel.gif" alt="Artikel" hspace="3" align="absmiddle" />Artikel</a></li>

<li><a href="{U_LOGIN_LOGOUT}"><img src="templates/*nama_theme*/images/menu/exit.gif" alt="{L_LOGIN_LOGOUT}" hspace="3" align="absmiddle" />{L_LOGIN_LOGOUT}</a></li>

</ul>

</div>

<!-- Habis Tambahan_Menu -->


*> perhatikan pada tag <img src="templates/*nama_theme*/images/menu/mail.gif" alt="Mail" hspace="3" align="absmiddle" />, kode *nama_theme* diganti dengan nama theme yg anda gunakan.


Setelah selesai memasukkan kode html, sekarang tambahkan kode css berikut ini diantara tag <style></style>


/* Style for the extra_menu */

#extra_menu {

background:#DFE6EF;

font:Tahoma;

font-size:11px;

border:1px solid #0099CC;

padding:3px;

}

#extra_menu ul {

list-style-type: none;

padding:0;

margin:0;

}

#extra_menu li {

display:inline;

padding:5px;

font-weight:bold;

}

#extra_menu li a {

text-decoration:none;

}

#extra_menu img {

border:none;

}


Dengan ini menu hampir selesai, anda tinggal memilih gambar untuk ditampilkan pada menu, disini saya menggunakan gambar berukuran 16X16 pixel dengan format *.gif.


Seteah itu anda buat folder dengan nama “menu”, lalu masukkan gambar-gambar yang akan anda pakai ke dalam folder tersebut.


Terakhir copy folder “menu” kedalam folder “templates/*nama_theme*/images” .

Download menu.zip

–selesai–

3 comments :

howie said...

good tuto man, btw itu imagenya dr bawaannya kan? gak perlu upload

Ongo said...

loe bisa pake image yg sudah ada di themenya wie..

atau loe bisa upload lagi.. kalo gw disini gw upload lagi.

gw pake image sendiri..

thx 4 the comment bro :D

Anonymous said...

Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!