Membuat Breadcrumb tanpa menggunakan plugin Wordpress

fikdesign, grafis desain, tutorial desain, web desain, tutorial blogspot, belajar membuat blog wordpress

Berikut ini adalah kode yang diperlukan untuk kita menggunakan breadcrumb tanpa menggunakan plugin apapun. Pertama, copy kode berikut dan paste di function.php :
<?php
function the_breadcrumb() {
  echo '<ul id="breadcrumb">';
 if (!is_home()) {
  echo '<li><a href="';
  echo get_option('home');
  echo '">';
  echo 'Home';
  echo "</a></li>";
  if (is_category() || is_single()) {
   echo '<li>';
   the_category(' </li><li> ');
   if (is_single()) {
    echo "</li><li>";
    the_title();
    echo '</li>';
   }
  } elseif (is_page()) {
   echo '<li>';
   echo the_title();
   echo '</li>';
  }
 }
 elseif (is_tag()) {single_tag_title();}
 elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
 elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
 elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
 elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
 elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
 elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
 echo '</ul>';
}
?>
Langkah Kedua copy paste kode CSS di bawah ini :

#breadcrumb
{
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url(images/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:#454545;
}
#breadcrumb a:hover
{
    color:#35acc5;
}
Save As kedua image ini dan letakkan di folder images pada theme Anda:



Kemudian dengan satu langkah mudah.. yaitu paste kode berikut di struktur theme yang akan di munculkan breadcrumb nya :
<?php the_breadcrumb(); ?>
Selamat mencoba ^_^

4 comments

  1. bingung nih, mang ga ada pluginnya ya

    ReplyDelete
  2. @buku islam : pluginnya sih banyak.. Tp lebih aman tanpa plugin
    @alat tulis : tinggal copy aja kok om..

    ReplyDelete