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
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.

Menampilkan Breadcrumb pada hasil pencarian google

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

Postingan terkait:

Belum ada tanggapan untuk "Floating Breadcrumb Navigation Blogger"

Post a Comment

Note :

1. Berikan komentar Anda yang sesuai dengan isi artikel
2. Berkomentarlah dengan bijak dan mohon untuk tidak melakukan SPAM
3. Jangan menempelkan link hidup, karena tidak akan ditampilkan

Semoga tali Silaturrahmi kita terus terjalin dengan saling berbagi informasi

Regards,
Admin Ellmoo Blog