Home » , » Tehnik Membuat Menu Navigasi Breadcrumb Blogspot

Tehnik Membuat Menu Navigasi Breadcrumb Blogspot

Apa Itu Navigasi Breadcrumb ?, Pertanyaan itulah yang akan kita selesaikan kali ini.Ok akan sya jelaskan apa yang dimaksut dengan Navigasi Breadcrumb. Navigasi Breadcrumb yaitu sebuah tautan link internal yang terletak diatas atau dibawah halaman situs Web/Blog yang digunakan untuk mempermudah para pengunjung untuk kembali kehalaman sebelumnya.

Biar Lebih Jelas anda bisa lihat gambar berikut :


Perhatikan pada bagian gambar yang ditunjuk oleh warnah merah, itu lah yang saya maksut dengan Navigasi Breadcrumb. Pastinya ada sudah sering melihat menu Navigasi Breadcrumb ini di blog-blog yang lain dan untuk melihat demo aslinya anda bisa coba pada halaman blog Dapur Tutorial Blogspot yang juga sudah dilengkapi dengan Navigasi Breadcrumb ini.

Sekarang kita bahasa langkah-langkah untuk membuat menu Navigasi Breadcrumb.
  1. Pastikan ada sudah login kehalaman blog anda
  2. Pilih Template


  3. Klik Pada Menu Edit HTML


  4. Kemudian Klik Pada Tombol Lanjutkan


  5. Selanjutnya anda akan menjumpai halaman berikut


  6. Sebelum Melakukan Edit HTML sebaiknya anda Download Template Lengkap Terlebih Dahulu.
  7. Cari Kode ]]></b:skin> (Gunakan Tombol CTRL + F3 untuk mempermudah mencari kode)
  8. Copy dan Letakan kode dibawah ini dibagian atas kode ]]></b:skin>  
  9. .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }

  10.  Apababila sudah selesai sekarang cari kode <div class='post hentry uncustomized-post-template'> 
  11. Copy kode dibwah ini dan letakan diatas kode tersebut
  12. <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>

    Browse &#187; <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>
    &#187; <span><data:post.title/></span>
    </b:loop>
    </b:if>
    </b:loop>

    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <div class='breadcrumbs'>
    Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:navMessage'>
    <div class='breadcrumbs'>
    <data:navMessage/>
    </div>
    </b:if>
    </b:if>
  13. Kemudian klik pada tombol simpan
  14. Sekarang lihat pada halam postingan blog anda jika menu Navigasi Breadcrumb muncul berarti anda sudah berhasil melakukan langkah-lankah diatas jika belum jangan menyerah dan berhenti mencoba
Demikian sekilas tetang Tutorial Blogspot  tetang cara membuat Membuat Menu Navigasi Breadcrumb Blogspot semoga berhasil dan bermanfaat.

PENTING!!!
ANDA TIDAK BEKERJA? INGIN TAHU INFORMASI LOWONGAN KERJA TERBARU DI KOTA ANDA? KUNJUNGI LOWONGAN KERJA TERBARU DISINI
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Delta Komputer

0 komentar:

Posting Komentar

 
Support : PING by :Ping-o-Matic | Pusat Promosi
Copyright © 2011. Tutorial dan Free Download - All Rights Reserved
Template Modify by Creating Website
Re Design by Bang Aris