Cara Membuat Breadcrumb Bootstrap di Blogspot

Apa itu breadcrumbs? Banyak blogger pemula yang belum begitu mengenal tentang apa itu breadcrumbs dan seberapa penting meletakkan breadcrumbs ini ke dalam blog yang dikelola. Breadcrumbs adalah menu navigasi pada suatu blog atau website yang biasanya digunakan untuk membantu pengunjung mengetahui letak halaman yang sedang dibuka. Atau dengan kata lain, breadcrumbs ini digunakan untuk memberikan gambaran kepada pembaca mengenai posisi postingan yang sedang dibaca. Dengan menambahkan breadcrumbs ini ke dalam blog, maka breadcrumbs ini bisa melengkapi menu navigasi lainnya.

Manfaat Breadcrumbs

1. Memudahkan pengunjung berpindah ke halaman lainnya.
2. Memberi gambaran kepada pembaca mengenai posisi postingan yang sedang dibuka.

Fungsi atau Manfaat Breadcrumbs untuk SEO

1. Breadcrumbs bisa digunakan untuk membangun internal linking dengan halaman lainnya.
2. Mempermudah robot mesin pencari dalam merayapi seluruh halaman blog.

Cara Membuat Breadcrumbs Dengan Bootstrap di Blogspot

Untuk membuat Breadcrumb Bootstrap di Blogspot, caranya tidaklah sulit. Di bawah ini cara membuat breadcrumbs Bootstrap di Blogspot:

1. Buka blogger.com
2. Buka menu “Tema”, lalu klik “Edit HTML”
3. Karena breadcrumbs ini menggunakan plugin Bootstrap, maka tambahkan Bootstrap di template yang digunakan. Caranya salin code di bawah ini, dan letakkan tepat di atas tag </head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
4. Kemudian cari code seperti ini <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
5. Setelah ketemu, salin code di bawah ini, lalu letakkan tepat di bawah code <b:includable id='main' var='top'> yang ada di bawahnya.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
   <ol class='breadcrumb' name='Breadcrumb' role='navigation'>
     <li>
       <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
          <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
             Home
          </a>
       </span>
     </li>
     <b:if cond='data:blog.pageType == "error_page"'>
       <li>Page not found</li>
     <b:else/>
     <b:if cond='data:blog.pageType == "static_page"'>
       <li><b:if cond='data:blog.pageName == ""'>Untitled document<b:else/><data:blog.pageName/></b:if></li>
     <b:else/>
     <b:if cond='data:blog.pageType == "item"'>
       <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
              <li>
                <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                  <a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='url'>
                    <span itemprop='title'><data:label.name/></span>
                  </a>
                </span>
              </li>
            </b:loop>
               <li><b:if cond='data:blog.pageName == ""'>Untitled document<b:else/><data:blog.pageName/></b:if></li>
          <b:else/>
              <li><b:if cond='data:blog.pageName == ""'>Untitled<b:else/><data:blog.pageName/></b:if></li>
          </b:if>
       </b:loop>
     <b:else/>
     <b:if cond='data:blog.pageType == "archive"'>
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if> archived on <data:blog.pageName/></li>
     <b:else/>
     <b:if cond='data:blog.searchQuery'>
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if> match with keyword “<data:blog.searchQuery/>”</li>
     <b:else/>
     <b:if cond='data:blog.pageType == "index"'> 
       <li><b:if cond='data:numPosts == 1'>Only</b:if> <data:numPosts/> post<b:if cond='data:numPosts != 1'>s</b:if><b:if cond='data:blog.pageName != ""'> categorized in “<data:blog.pageName/>”</b:if></li>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
   </ol>
</b:if>

6. Setelah itu simpan tema dan lihat hasilnya.

Inilah cara membuat breadcrumbs Bootstrap di Blogspot yang terbaru, jika Anda tertarik menambahkan breadcrumbs di template Blogspot Anda, silakan ikuti langkah-langkah di atas. Selamat mencoba!

Posted by Andi Setiawan

Published on July 21, 2019

Edit This

Categorized in Blogger, Blogging, Bootstrap, Breadcrumb