|
Info

SELAMAT DATANG

Selamat datang di Coretan \\nn// Black MetaL \\nn// - Saya Sangat Senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang Artikel Blog's Saya Memang Tidak Sesuai Dengan Judulnya, Tapi Bagi Para Bloggers Pasti Judul Blog Sedikit Tidak Penting Bukan ?.Yang Penting Bagi Para Bloggers Hanyalah Isi Artikelnya Yang Menarik .

Sekilas Tentang Saya

Nama saya FraNz , Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Cara Membuat Breadcrumb Menu Pada Blog

Kali ini Tutorial Blog ingin berbagi buat teman-teman Blogger tentang Cara Membuat Breadcrumb Menu Pada Blog yang berada di atas artikel posting. Breadcrumb, merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Dengan breadcrumb, pada artikel blog akan muncul menu tambahan di bagian atas. Menu tersebut akan ditampilkan dengan format Home > [Nama Label] > Judul Posting, seperti contoh pada blog ini.

Selain memudahkan navigasi, breadcrumb juga dipercaya memudahkan search engine untuk mengindeks posting.

Langkah-langkah Membuat Breadcrumb Pada Blogger

1.     Login ke Blogger dengan akun kamu

2.     Selanjutnnya, pilih  Design dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.

3.     Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard kamu untuk membantu pencarian):

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

4.     Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

Code Script

<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,cari 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.     Sekarang cari kode

]]></b:skin>

Jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya..

Code Script


.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

8.     Kemudian Simpan Templates dan Selesai.

Menu breadcrumbs ini hanya akan terlihat diatas artikel kamu atau dibawah judul blog  saat kamu membuka halaman suatu posting bukan halaman utama blogspot

Selamat mencoba

0 komentar: