BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Menambah Sebuah Breadcrumb Trail ke dalam blogger Post

Hack By Hoctro's Place

Ini merupakan hack yang powerfull dari hoctro. karena hack ini sangat membantu dan memudahkan, dalam menuntun  pembaca   untuk kembali ke halaman depan blog kita atau ke dalam kategorie/label yang sama tampa perlu jauh-jauh  menjangkau tab menu atau widget/ elemen label.

Karena widget ini di simpan tepat di atas judul artikel yang di baca atau bisa juga di simpan pada bagian bawah artikel yang dibaca. dan setidaknya juga, hack ini memberi tahukan pada pembaca tentang hirarki blog dan  artikel yang di bacanya.

 

gam 01

 

Bagaimana cara mengunakanya ke dalam blog kita ?

Jika anda telah lama paham cara mengedit-edit blog, saran saya lebih baik langsung pada sumber penulisnya.

 

1. Dalam  Tata-letak ( edit layout ) buka tab Edit Html. kemudian tandai/centang tulisan  Expand Template Widget.

expand-template 

 

2. Setelah itu masukan kode dari hoctro's  ini.

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          You are here:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>
        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

 

di atas kode ini.

 

<b:includable id='main' var='top'>

 

3. Kemudian masukan sebaris kode dari hoctro's. ini.

 

<b:include data='post' name='breadcrumbs'/>

 

di atas kode ini.

 

<b:if cond='data:post.dateHeader'>

 

4. Setelah itu pada bagian  Css na, masukan kode ini.

 

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

 

skin

 

Note :

Contoh ini saya mengunakan pada template " Minima ". dan posisi kode tanggal-nya belum di rubah atau di pindahkan.

Jika anda telah merubah posisi tanggalnya, saya menyimpan baris kode ini.

 

<b:include data='post' name='breadcrumbs'/>

 

di antara kode ini. ( dan berhasil )

 

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<b:include data='post' name='breadcrumbs'/>

 

Perhatian Juga :

Hack ini tidak akan keliatan jika artikel/ post anda belum di berikan sebuah label/categorie.

 

 

Page views this post: reader

11 komentar:

Bani Risset said...

Salam kang,

Cing ah sayah mo tes dulu yaahh...

Makasi tips nya..

subagya said...

hehehehhe coba ah.....thanks ya kang tipsnya

JALOE said...

silahkan mas.. moga sukses

cewek_culun said...

Ntara bang kalo atikel say asudah banyak barulah ini ditampakkan...

JoVie said...

oh gitu yah caranya...
nambah ilmu nih disini..mantaph man..

www.duny4ever.co.cc said...

minta ijin copas ya..

RaymonRicky said...

Ilmunya Mantab Abizz. TEngkyu

Cah Cilacap said...

waduh.....gue tambah puyeng aja nih....
gaptek sich

RaymonRicky said...

Kang mau tanya
Klo masang breadcrumb di website pake website editor kayak dreamweaver gitu gimana ya???

JALOE said...

@ RaymonR = wow sy belum nyoba tuh mas

alat ukur kadar air said...

keren tutorialnya mas

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial