Rabu, 26 Desember 2012

Panduan Cara Membuat Breadcrumb Blog Khusus

Cara Membuat Breadcrumb Blog - Berbeda dengan artikel sebelumnya, cara membuat breadcrumb blog sederhana, tampilan breadcrumb yang muncul hanya menampilkan tag atau label artikel secara spesifik yang terpilih namun kalau menurut saya sich kalau cara membuat breadcrumb blog khusus ini hanya meminimalis tampilan tag atau label saya sehingga dengan menggunakan cara ini maka tag atau label yang anda berikan untuk artikel blog anda hanya menampilkan satu tag atau label saja, seperti tampilan gambar berikut ini

Cara Membuat Breadcrumb Blog Khusus

Bagaimana cara membuat breadcrumb blog seperti gambar diatas? Baca juga fungsi breadcrumb
  1. Masuk ke akun Blogger anda
  2. Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
  3. Cari kode ]]></b:skin>
  4. Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}
  5. Cari kode seperti ini : <div class='post hentry'>
  6. Letakkan kode berikut ini tepat setelah atau sebelum kode <div class='post hentry'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    &#187;Unlabelled
    </b:if>
    &#187; <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
  7. Simpan template
Mudah bukan? Kini anda sudah mengetahui cara membuat breadcrumb blog khusus seperti yang ada di artikel blog ini. Terimakasih dan semoga bermanfaat, jika ada pertanyaan silahkan komentari artikel ini, Cara Membuat Breadcrumb Blog Khusus

Panduan Cara Membuat Breadcrumb Blog Khusus Rating: 4.5 Diposkan Oleh: ana sriwahyuni

12 komentar:

  1. Trims atas ilmunya, ane coba dulu ya semoga lancar dan bisa.

    BalasHapus
  2. @kabupatenmagetan.com sama-sama, semoga tidak ada kendala, n makasih juga atas komen serta kunjungannya

    BalasHapus
  3. mantap info nya gan,,,
    nice shared,,

    ijin mraktekin,,,

    BalasHapus
  4. terima kasih sob, sudah saya terapkan dan berhasil :)

    BalasHapus
  5. makasih tutorialnya ya langsung bisa dicoba nih

    BalasHapus
  6. @agen pulsa murah cilacap sama-sama, semoga sukses selalu dengan bisnis pulsanya sob..

    BalasHapus
  7. @Informasi Artis Terbaru sama-sama, silahkan dicoba jika ada permasalahan, silahkan bertanya :)

    BalasHapus
  8. mau tanya dong ... klau cara satu label berisi banyak kolom seperti di blog anda yang '' tentang saya '' itu gmana ya caranya ....?

    BalasHapus
    Balasan
    1. jika di blognya mas Rofi sudah terdapat sub menu maka bisa dipasang seperti itu mas..

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia