Cara Membuat Navigasi Breadcrumb

Kamis, 09 Februari 2012 | 7komentar

Breadcrumb
Cara Membuat Navigasi Breadcrumb. Breadcrumb menurut ahli SEO adalah merupakan navigasi yang berfungsi sebagai 'user interface'. Ini cukup membantu SEO,Breadcrumb memungkinkan pengunjung untuk tetap dapat mengetahui lokasi halaman artikel dalam sebuah blog atau web yang sedang dibaca.Breadcrumb biasanya muncul horizontal di bagian atas dari suatu halaman web,biasanya di bawah bar judul atau header

Pada bagian Halaman depan dan Label akan diberi link yang berfungsi sebagai tombol kembali sehingga dapat memudahkan pengunjung untuk memilih Artikel atau Kategori yang lain.Umumnya breadcrumb berbentuk hierarki yang menjelaskan posisi dan keberadaan sebuah artikel didalam blog. Struktur dasar breadcrumb terdiri dari Halaman depan, Label atau Kategori dan Isi artikel,serta dipisahkan oleh tanda >> atau tanda >. Bagan Breadcrumb yang khas terlihat seperti dibawah ini:
Home page> Halaman Bagian> Ayat halaman

atau

Home page: Bagian halaman: Halaman Ayat
Halaman depan >> Label/Kategori >> Isi Artikel. Atau
Halaman depan > Label/Kategori > Isi Artikel

Cara membuat breadcrumb

Login ke draft.blogger.com
Klik Design
Klik Edit HTML
Klik Expand Widget Templates
Copy kode CSS dibawah ini diatas kode ]]></b:skin>

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:1px dotted #CCCCCC;
}

Cari Kode <div class='post hentry uncustomized-post-template'> kemudian paste kode dibawah ini diatasnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &gt; <data:post.title/></div> </b:if> </b:if>

Simpan Template dan nimati hasilnya.
Share this article :
Judul: Cara Membuat Navigasi Breadcrumb
Rating Blog: 5 dari 5
Ditulis oleh Eva Wangi
Anda sedang membaca artikel Cara Membuat Navigasi Breadcrumb. Anda bebas Copas untuk kode HTML pada Tutorial Blogging dan Tips Blogging, namun jika terpaksa ingin mengutip secara keseluruhan harap memberikan link aktif dofollow ke URL inihttp://evawangi.blogspot.com/2012/02/cara-membuat-navigasi-breadcrumb.html. Terima kasih sudah singgah dan berkomentar di blog ini.

7 komentar:

  1. waow..tutorialnya sangat mudah dipahami nih, simpel pisan penjelasannya. mantaf-lah
    templatenya keren neng...mau euy!?

    BalasHapus
  2. @Cilembu thea
    Makasih pak Kades,selamat datang di blog yang lagi belajar ini.Senang bisa berbagi semoga bisa benrmanfaat.

    BalasHapus
  3. Bade dicobian engke wengi,,,,
    hatur nuhun ,,,,

    wilujeng ngeblog

    BalasHapus
  4. wah nice share sob,...kunjungan perdana nih
    ijin kopas gan

    BalasHapus
  5. @siopeng
    Silahkan sop,dengan senang hati,manfaat untuk sahabat lainnya juga.
    Salam kembali,makasih ya,happy blogging.

    BalasHapus
  6. Ijin mampir di blog sahabat,
    siapa tahu suatu waktu pengen navigasi yang seperti ini, tinggal reference ke blog sahabat :)

    BalasHapus
  7. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
    Ready Stock ! BlackBerry Curve 9360 Apollo Rp.950.000,-

    BalasHapus

Tulis Komentar Yang Menyejukan Hati saja.
Tidak menerima Komentar Yang bermuatan Sara, Politik, Makar,
tidak pula Komentar Yang menjurus Iklan.
Terima Kasih sudah sedikit meluangkan Waktunya disini!

Ketik Yang Sobat Mau !

Artikel Terbaru

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2012. Shaka InghetS - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger