Belajar Askep
.

Monday, December 19, 2011

Browse » Home » » Membuat Breadcrumb Menu Pada Blog

Membuat Breadcrumb Menu Pada Blog

Bagikan Keteman Lewat:



Menu Breadcrumb ialah Menu navigasi yang berurutan di atas artikel posting. Dengan Menu Breadcrumb ini membuat atau merupakan cara efektif untuk memberikan kemudahan bagi pengunjung dalam melihat kategori posting pada suatu blog.
Selain itu dari segi kerapian, kemudahan juga dari segi SEO (Search Engine Optimization), Google sudah support / mendukung Menu Breadcrumb ini. Sehingga sangat Penting untuk diterapkan pada suatu Blog demi kepentingan SEO (Search Engine Optimization).

Ok Langsung Aja ke TKP==>>
  1. Pertama,pastikan anda sudah membuat label pada blog.
  2. Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
  3. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):<b:includable id='main' var='top'>
  4. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya<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'>

              Browse:
              <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>
  5. Kemudian,carai lagi kode berikut:
    <b:if cond='data:post.dateHeader'>
  6. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
    <b:include data='post' name='breadcrumbs'/>
  7. Nah,sekarang cari kode ]]></b:skin>,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.
    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;
    }
  8. Kemudian Simpan Templates dan Selesai.
Menu navigasi Breadcrumbs ini hanya akan terlihat diatas artikel anda atau dibawah judul blog anda saat anda membuka halaman suatu posting bukan halaman utama blogspot anda.
Selamat Berusaha, 

Cara KeDua

Langkah langkahnya langsung saja :
1. Masuk ke Layout > Edit HTML > checklist Expand Widget Templates.

2. Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut. Download Template terlebih dahulu.

3. Copy Paste kode berikut sebelum kode ini ]]></b:skin>

    .breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}

4. Cari kode <b:includable id='main' var='top'> copy paste kode dibawah ini letakkan di atas kode <b:includable id='main' var='top'>

    <b:includable id='breadcrumbs' var='post'>
    <!-- Breadcrumbs By Warung Seo http://kutak-ketik.blogspot.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    Go&#160; :
    <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 == &quot;true&quot;'>
    <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>

5. Selanjutnya cari kode <b:loop values='data:posts' var='post'> (biasanya ada 2 atau 3 kode yg sama pilih kode yang pertama untuk yang 2 kode yang sama, sedangkan untuk yang 3 kode yang sama pilih yang kedua) dan copy paste kode berikut dan letakkan di bawah kode <b:loop values='data:posts' var='post'>

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

6. Simpan Template dan lihat hasilnya

Semoga berhasil dan bermanfaat, jika dalam praktek tidak berhasil pastikan anda untuk membacanya sekali lagi, awalnya saya juga susah tapi berhasil juga..he..he..
Thank You So Much!
Kalau sudah membaca silahkan isi Buku Tamu
Terima kasih telah membaca artikel: Membuat Breadcrumb Menu Pada Blog Silahkan baca artikel Blog ©Belajar Askep Lainya Dibawah ini:
Advertisement below...!

Comments : Ada 0 komentar untuk Membuat Breadcrumb Menu Pada Blog

Post a Comment

 
© Copyright 2011 : Belajar Askep
All Rights Reserved | About | Privacy | Contact | T O S | Sitemap | Stylished by Ahmad Soleh Powered By Blogger
^_^ Submit | Template dari : Free Blogger Templates | Member Area | Report | Report | Log In | Log Out
Ping your blog, website, or RSS feed for Free | |