Floating Breadcrumb Navigation Blogger

Breadcrumb, si remah roti, penolong Hansel dan Gratel ketika tersesat di hutan. Penolong pengunjung blog yang ingin mengetahui letak kategori atau artikel yang sedang dibaca. Sebuah widget yang sederhana tapi sangat membantu sekaligus menambah kesan profesional sebuah blog. Sudah dua macam Breadccrumbs trail yang sudah saya posting di blog ini, Navigasi Breadcrumb Blogger Support RDFa dan Navigasi Breadcrumb Blogger Support Microdata.

Floating Breadcrumb Navigation Blogger

Posisi navigasi breadcrumb biasanya terletak di atas judul postingan. Namun kita bisa memodifikasinya supaya bisa ditempatkan pada posisi yang kita inginkan. Misalnya melayang di bagian atas halaman blog atau melayang di bagian bawah blog.

Kode navigasi breadcrumb ini telah saya modifikasi dengan menambahkan mark up RDFa (Resource Description Framework – in – attributes) yang berfungsi untuk menampilkan breadcrumb pada hasil pencarian search engine khususnya Google™. Untuk lebih jelasnya silahkan lihat screenshoot di bawah ini.

Langkah untuk menerapkannya ke blog relatif mudah, silakan ikuti tutorial di bawah ini.

Navigasi Breadcrumb Melayang Di Atas Halaman Blog

Backup Template

Log in ke Blogger » Template » Cadangkan/Pulihkan » Unduh template lengkap

Tujuan dari membuat cadangan template sebelum langkah modifikasi adalah jika nanti terjadi error pada template, Anda cukup mengupload ulang kode template yang tadi telah didownload

Menyisipkan Kode CSS
Copy kode CSS berikut kemudian letakkan di atas kode ]]></b:skin>

.floating-breadcrumb { 
  position:fixed; 
  z-index:1000; 
  top:0; 
  left:0; 
  background:#333; 
  width:98%; 
  color:#ccc; 
  border-bottom:2px solid #999; 
  padding:1px 1% 1px 1%; 
  -webkit-box-shadow:0 0 7px #000; 
     -moz-box-shadow:0 0 7px #000; 
          box-shadow:0 0 7px #000; 
} 
 
.floating-breadcrumb a,
.floating-breadcrumb a:visited,
.floating-breadcrumb a:active { 
  color:#fff; 
} 
 
.floating-breadcrumb span.kanan { 
  float:right; 
}

Memodifikasi Kode Template
Cari kode yang dihighlight berikut ini:

<b:if cond='data:post.thumbnailUrl'>
       <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
            </b:if>
             <meta expr:content='data:blog.blogId' itemprop='blogId'/>
            <meta expr:content='data:post.id' itemprop='postId'/>
          <a expr:name='data:post.id'/>
        <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'>
               <data:post.title/>
                  </a>
                 <b:else/>

Biasanya kode <a expr:name='data:post.id'/> ada dua, jika navigasi breadcrumb tidak bekerja pada kode pertama maka cobalah menyisipkan pada kode yang ke dua.

Salin kemudian letakkan potongan kode berikut tepat di atas kode <a expr:name='data:post.id'/>

<!-- Floating Breadcrumb Navigation On The Top -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div class='floating-breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'> 
        <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' rel='v:url' property='v:title'>Beranda</a></span> &#187; 
        <b:if cond='data:post.labels'> 
            <b:loop values='data:post.labels' var='label'> 
                <span typeof='v:Breadcrumb'><a expr:href='data:label.url' rel='v:url' property='v:title'> 
                    <data:label.name/> 
                </a></span> 
                <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> 
            </b:loop> 
        </b:if> &#187; <data:post.title/> 
        <span class='kanan'> 
            Konten Lain di Sini 
        </span> 
    </div> 
</b:if>

Perhatikan kode yang dihighlight pada baris kode ke-14, ini adalah space untuk menempatkan widget lain semisal social bookmark, namun jika Anda ingin menghapus space ini, Anda cukup menghapus kode <span class='kanan'> Konten Lain di Sini </span>

Simpan Pengaturan Template
Simpan pengaturan template preview halaman artikel blog Anda

Navigasi Breadcrumb Melayang Pada Posisi Bawah Halaman

Langkah-langkah untuk menampilkan navigasi breadcrumb pada posisi bawah halaman tidak berbeda jauh dengan langkah-langkah menampilkan navigasi breadcrumb pada posisi atas halaman. Cukup mengganti beberapa kode CSS maka navigasi breadcrumb pun sudah berpindah posisi tanpa perlu mengedit kode template lebih jauh. Perhatikan kode CSS berikut.

/* Floating Breadcrumb Navigation Blogger
----------------------------------------------- */
.floating-breadcrumb { 
  position:fixed; 
  z-index:1000; 
  top:0; 
  left:0; 
  background:#333; 
  width:98%; 
  color:#ccc; 
  border-bottom:2px solid #999; 
  padding:1px 1% 1px 1%; 
  -webkit-box-shadow:0 0 7px #000; 
     -moz-box-shadow:0 0 7px #000; 
          box-shadow:0 0 7px #000; 
} 
 
.floating-breadcrumb a,
.floating-breadcrumb a:visited,
.floating-breadcrumb a:active { 
  color:#fff; 
} 
 
.floating-breadcrumb span.kanan { 
  float:right; 
}

ganti kode top:0; menjadi bottom:0; selebihnya untuk border dan yang lainnya Anda bisa memodifikasinya sendiri.

Selamat mencoba semoga berhasil.

sumber kode: dte.web.id

Tweet

Postingan terkait:

Ditulis EM — Tuesday, 23 April 2013 — Add Comment — Blogger Hacks