Membuat navigasi breadcrumb di Wordpress

» Author : Ansory | Hari Sabtu, Juni 20, 2009

Setelah beberapa minggu saya tidak fokus untuk meng update isi blog ini, rasanya kangen juga untuk kembali melukiskan baris kata-kata bermakna yang bisa menghilangkan dahaga yang mendera { cia.... nga salah nih....hik..hik }.

Ok...... Hari ini kita akan coba membuat navigasi breadcrumb yang terkenal itu, tapi kali ini kita akan mencoba membuat nya pada themes Wordpress. Untuk teman-teman yang ingin membuat navigasi breadcrumb untuk Template blogspot, silahkan menuju Ke membuat navigasi breadcrumb di blogger.
Memang kita akui bahwa keleluasaan kita untuk mengedit template wordpress sangat sedikit sekali, karena themes wordpress berbasis php, yang setiap susunan pengCodeannya sangat berbeda dari code-code templates blogger. Kita lanjutkan.....

catatan : - Tips trik ini berlaku untuk Wordpress yang anda install di Hosting anda.
- Jika anda tidak mempunyai Hosting sendiri, mungkin Tips trik ini tidak jitu untuk diterapkan pada themes Wordpress anda.

Apa yang harus kita lakukan untuk menanamkan fungsi breadcrumb ini :

1. Untuk langkah awal silahkan anda mendownload themes wordpress kesukaan anda.

2. Extract file themes yang anda download tadi,dan cari file " Style.css " lalu buka dengan text editor kesayangan anda ( contoh:Notepad ).

3. Setelah langkah No.2 dilakukan, Copy code dibawah ini dan Pastekan pada bagian terakhir dari code Style.css yang kita buka tadi.

#breadcrumb {
font: 11px Arial, Helvetica, sans-serif;
background-image:url('bc_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/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#000;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
color:#35acc5;
}

Perhatikan Tulisan yang berwarna Merah pada code diatas, Seperti biasa Upload file gambar yang nanti akan saya kasih tersebut ke Hosting anda lalu ganti tulisan tersebut dengan link gambar yang anda upload tadi. lalu Save settingan anda tadi

4. Setelah anda melakukan langkah No.3 , sekarang anda cari file Header.php dari Extract an Themes yang anda download tadi, lalu buka lagi menggunakan Text Editor anda dan Copy code dibawah ini,
<ul id="breadcrumb">
<li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
<li><?php the_category(', ') ?></li>
<li><?php the_title(); ?></li>
</ul>

lalu Paste kan diantara Bagian...
< div id="content">

</div>

5. Setelah semuanya selesai, jangan lupa untuk menyimpan settingan anda tadi ya...

6. Point terakhir, Upload lah Themes Wordpress yang sudah anda Modif tadi ke Hosting anda.

7. selesai.

NB : - Upload Themes tersebut ke /Wp-content/themes/default/.
- Silahkan Download File image tersebut disini.

Bagi anda yang kurang memahami langkah diatas silahkan bertanya para form komentar dibawah, mudah-mudahan bisa saya bantu.

0 komentar

» Ciptakan Komentar yang Membangun