WordPress Görsel BreadCrumbs Yapımı

Aşağı indir

wpMerhaba arkadaşlar, bu yazımda BreadCrums NavXT eklentisini kullanarak nasıl görsel bir breadcrumb yaratabileceğinizi anlatacağım. Hemen derse geçelim.

Öncelikle sizlere kendim de kullandığım CSS yi vereyim.

/* Bread Crumbs */
#crumbduzenle{
  width:1000px; //Buraya İstediğiniz genişliği girebilirsiniz.
  margin:0px auto;
}

#bredkrumbstil{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 1000px;
  margin:0px auto;

}

#bredkrumbstil li{
  float: left;
}

#bredkrumbstil a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#bredkrumbstil li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#bredkrumbstil a:hover{
  background: #fff;
}

#bredkrumbstil a::after,
#bredkrumbstil a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#bredkrumbstil a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

#bredkrumbstil a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

#bredkrumbstil a:hover::after{
  border-left-color: #fff;
}

#bredkrumbstil .current,
#bredkrumbstil .current:hover{
  font-weight: bold;
  background: none;
}

#bredkrumbstil .current::after,
#bredkrumbstil .current::before{
  content: normal;  
}

stilimiz benim kendi stilimdir.

Temanızda eklemek istediğiniz yere aşağıdaki kodu yerleştirin.

<div id="crumbduzenle">
<div id="bredkrumbstil">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
</div>

Bitti ^_^

[Toplam:1    Ortalama:10/5]