Cara Memasang Breadcrumb Pada Template Default Terbaru Blogger Versi ke 3

Seiring dengan gejolak perubahan zaman yang semakin canggih, dunia pun seakan mudah saja kita raih dalam genggaman tangan kita. Setiap data dan informasi dari segenap penjuru semesta dapat kita akses dengan mudahnya hanya melalui hp atau smartphone yang kita miliki. Tidak heran jika kini banyak pemilik situs (blog) yang mendesain tampilan situsnya agar lebih mudah saat diakses pengunjung lewat gadget smartphone.

Sebagai pemilik blog, kita memang tidak boleh ketinggalan untuk membuat tampilan blog kita agar semakin ramah mobile. Untuk itu, pihak blogspot juga sebenarnya sudah jauh-jauh hari menawarkan beberapa template default blogger terbaru yang siap kita gunakan untuk tema blog kesayangan kita. Template-template tersebut telah mengusung desain layout versi ke 3 sehingga pastinya memiliki fitur responsif dan Mobile friendly. Template-template tersebut antara lain yaitu Contempo, Soho, Emporio, Notable, dan Essential. 

Namun sama halnya dengan versi sebelumnya, template-template tersebut sayangnya juga belum dilengkapi dengan fitur breadcrumbs yang menurut beberapa orang cukup penting keberadaannya. Untuk itu, ada baiknya bagi anda yang menggunakan salah satu dari template versi ke 3 tersebut agar melengkapinya dengan memasang fitur breadcrumb ini. Fitur ini ibarat penunjuk jalan yang berfungsi untuk mengarahkan pengunjung agar mereka lebih mudah saat menjelajahi konten-konten di blog kita. 

Template default blogget versi terbaru ini memiliki penulisan elemen yang agak berbeda dengan versi sebelumnya sehingga cara pemasangan breadcrumbnya pun juga sedikit berbeda. Mungkin anda pernah coba mengikuti beberapa tutorial pemasangan breadcrumb yang ternyata gagal saat diaplikasikan di template blog anda. Tutorial itu bisa jadi sudah tidak sesuai sehingga anda mesti lebih spesifik dalam mencari tutorial pemasangan breadcrumb pada template blogger versi terbaru. 

Nah, untuk itu kali ini Santos Blog ingin berbagi caranya kepada anda sekalian agar dapat berhasil memasang fitur breadcrumbs di template blog kesayangan anda. Cara ini kebetulan saya temukan ketika ada seseorang bertanya tentang cara pemasangan breadcrumb pada salah satu varian template terbaru tersebut. Setelah saya utak-atik mathuk, akhirnya pun ketemu caranya. 

Tutorial ini cukup mudah diterapkan tanpa harus menghapus elemen-elemen lain di dalam template. Tutorial ini juga bisa anda terapkan pada semua varian template terbaru tersebut (dengan langkah yang sama) tanpa perlu takut mengalami kegagalan. Adapun tampilannya nanti akan seperti di bawah ini. 

tampilan breadcrumb pada template Essential

Bagaimana cara memasangnya?, silahkan ikuti langkah-langkah di bawah ini. 

Cara Membuat/ Memasang Breadcrumbs Pada Template Blogger Terbaru 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut ini di atasnya. 

.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#000;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}

.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#000;font-weight:400}

.breadcrumbs a:hover{color:#089416}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}

.breadcrumbs svg path{fill:#000}

4. Selanjutnya cari kode <b:includable id='commentForm' var='post'> dan tambahkan kode berikut ini di atasnya. 

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

5. Terakhir adalah memasang kode pemanggilnya, silahkan gulir lagi ke bawah dan cari kode <h3 class='post-title entry-title'> 

Kode tersebut adalah kode html untuk judul postingan. Kalau sudah ketemu, letakkan kode berikut ini di atasnya. 

<b:include data='posts' name='breadcrumb'/>

6. Simpan kembali template anda dan lihat hasilnya. 

Khusus untuk varian template Emporio, mungkin anda perlu lebih cermat lagi agar pemasangan breadcrumb ini berhasil. Kalau hasilnya error, coba anda hapus akhiran huruf 's' (posts) pada kode terakhir tadi sehingga kodenya menjadi: 

<b:include data='post' name='breadcrumb'/>

Mungkin sedikit aneh tapi seperti itulah caranya. Demikianlah tadi tutorial tentang Cara Memasang Breadcrumb Pada Template Default Terbaru Blogger Versi ke 3. Semoga bermanfaat.

Lokasi:

Berbagi :