Cara Memasang Apple Style Breadcrumb Navigation MyBB

Cara Memasang Apple Style Breadcrumb Navigation MyBB - Tutorial kali ini sundaboy ingin mencoba membahas tentang  Apple Style Breadcrumb Navigation untuk forum MyBB, sebenarnya sudah banyak tutorial yang membahas tentang Breadcrumb untuk Forum MyBB, tetapi ternyata masih banyak kendala pada tutorial tersebut dikarenakan beberapa faktor diantaranya link yang sudah tidak valid dan kode script yang tidak bisa di download akibat broken link. banyak sekali cara untuk mempercantik tampilan dari forum MyBB, salah satunya dengan cara memodifikasi Breadcrumb sehingga bisa tampil lebih menarik.

Fungsi daripada Memasang Apple Style Breadcrumb Navigation untuk forum MyBB ini berfungsi untuk mempercantik tampilan dari  Breadcrumb itu sendiri, sehingga tampilan forum MyBB anda akan terlihat lebih menarik. berikut contoh Apple Style Breadcrumb Navigation yang akan kita buat.

Baiklah, langsung saja ke pokok bahasan yaitu bagaimana Cara Memasang Apple Style Breadcrumb Navigation MyBB.

Sebelumnya anda harus download dulu ketiga gambar dibawah ini dan upload ke cpanel. tepatnya letakan di public_html

Gambar1, Gambar2, Gambar3

Setelah semua gambar di upload melalui cpanel selanjutnya silahkan lakukan langkah langkah dibawah ini :

Langkah Pertama :
Silahkan masuk Admin CP > Templates & Style > Themes
selanjutnya copy kode dibawah ini dan letakan pada global.css

#breadcrumb{
font: 11px Arial, Helvetica, sans-serif;
background-image:url(images/sundaboy_bg.png);
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li
{
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a
{
height:30px;
display:block;
background-image:url(images/sundaboy_separator.png);
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
.home
{
border:none;
margin: 8px 0px;
}

#breadcrumb a:hover
{
color:#35acc5;
}

Langkah Kedua :
Pilih Templates & Style > Templates
selanjutnya pilih template yang anda gunakan lalu Expand Templates dan cari Navigation Template, setelah ketemu silahkan di Expand, didalamnya terdapat 5 bagian dari Navigation, lalu copy kode dibawah ini kemasing masing bagian pada navigation.

Pertama : Edit nav lalu ganti semua kode yang ada didalamnya dengan kode dibawah ini

<ul id="breadcrumb">
<li><a href="{$mybb->settings['bburl']}" title="Home"><img src="images/home.gif" alt="Home" class="home" /></a></li>
{$nav}{$activebit}
</ul>

Kedua : Edit nav_bit lalu ganti semua kode yang ada didalamnya dengan kode dibawah ini

<li><a href="{$navbit['url']}" title="{$navbit['name']}" alt="{$navbit['name']}">{$navbit['name']}</a></li>

Ketiga : Edit nav_bit_active lalu ganti semua kode yang ada didalamnya dengan kode dibawah ini

<li>{$navbit['name']}</li>

Kempat : pastikan nav_sep_active dan nav_sep kosong

Langkah Terakhir : Simpan Template dan lihatlah hasilnya.

Sebelum Memasang Apple Style Breadcrumb Navigation MyBB diatas, alangkah baiknya backup terlebih dahulu template yang anda gunakan, supaya apabila terjadi eror dapat dengan mudah dikembalikan seperti semua.

Nah itulah seditkit tentang Cara Memasang Apple Style Breadcrumb Navigation untuk forum MyBB, kalau ada yang kurang paham anda bisa bertanya melalui kotak komentar dibawah ini. Mudah mudahan tutorial ini dapat bermanfaat untuk kita semua. Amin

Subscribe to receive free email updates: