Membuat Menu Tambahan Pada phpbb

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–