Breadcrumb Melayang Diatas Atau Dibawah Halaman

Breadcrumb Melayang Diatas Atau Dibawah Halaman - Navigasi posting breadcrumb ditampilkan melayang hanya menambahkan properti position:fixed sedangkan untuk membuat breadcrumb-nya sendiri sama seperti kita membuat breadcrumb sederhana pada postingan sebelumnya, dengan menampilkan breadcrumb dengan cara melayang akan menampilkan breadcrumb secara statis ketika scroll menggulung layar.

Untuk membuat breadcrumb melayang diatas bisa menggunakan CSS dibawah ini dan ditempatkan css tersebut dibawah <b:skin><![CDATA[ diatas ]]></b:skin> pada template.

CSS

#breadcrumbs {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 5px 10px;
  border-bottom: 2px solid white;
  box-shadow: 0 2px 5px #555;
  font: normal 13px Arial, Helvetica, sans-serif;
  color: white;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}
#breadcrumbs a, #breadcrumbs a:visited {
  color: white;
  text-shadow: 1px 1px 0px black;
}
#breadcrumbs a:hover {
  text-shadow: 0px 0px 5px white;
}

dan untuk breadcrumbnya sendiri letakan diatas kode <a expr:name='data:post.id'/>

HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div id='breadcrumbs'> 
        <a expr:href='data:blog.homepageUrl'>Beranda</a>  &#10151;
        <b:if cond='data:post.labels'> 
            <b:loop values='data:post.labels' var='label'> 
                <a expr:href='data:label.url' rel='tag'> 
                    <data:label.name/> 
                </a> 
                <b:if cond='data:label.isLast != &quot;true&quot;'>  &#10151; </b:if> 
            </b:loop> 
        </b:if>  &#10151; <data:post.title/>  
    </div> 
</b:if>

✩✩★✩✩

untuk menempatkan breadcrumb melayang pada posisi bawah, hanya mengganti sebagian nilai css-nya menjadi seperti ini:

#breadcrumbs {
  border-top: 2px solid white;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 3px #555;
}

/* sisanya sama seperti css diatas. */

Save template.

Tampilan css diatas hanya memberikan tampilan breadcrumb yang sederhana, untuk modifikasi breadcrumb dengan tampilan yang lebih baik bisa tambahkan gaya css yang sesuai dengan keinginan, baik itu merubah background atau pun menambah gaya tampilan yang lain.