Cara Membuat Dan Memasang Breadcrumb Di Blog

Hai, Sahabat. . Hari ini, saya akan membahas tentang Cara Membuat Dan Memasang Breadcrumb Di Blog.

Daftar isi

1. Pentingnya Keberadaan Breadcrumb Di Dalam Blog
2. Apa itu Breadcrumb dan Apa Fungsinya?
3. Cara Membuat dan Memasang Breadcrumb Di Blog
4. Saran

Pentingnya Keberadaan Breadcrumb Di Dalam Blog

Breadcrumb merupakan sesuatu yang sangat penting dan keberadaannya sudah menjadi sesuatu hal yang wajib di sebuah blog atau website. Pembuat (desainer) template blog biasanya sudah menyertakan fitur breadcrumb ini di masing-masing template yang dibagikan atau dijualnya. Namun bagi kamu yang masih menggunakan template bawaan yang disediakan blogspot, biasanya ada yang belum dilengkapi fitur breadcrumb ini,sehingga ada baiknya kamu segera buat dan pasang fitur breadcrumb ini agar blog atau website kamu lebih SEO Friendly.

Apa itu Breadcrumb dan Apa Fungsinya?

Breadcrumbs atau secara harfiah berarti jejak remah roti ini memang cukup penting keberadaannya. Breadcrumb berfungsi untuk mengarahkan pengunjung agar mereka tahu dimana posisi mereka saat membuka sebuah postingan di sebuah blog. Fitur breadcrumb ini juga akan menampilkan hierarki dari postingan tersebut berupa link kategori serupa hingga halaman beranda (home) sehingga pengunjung akan lebih mudah untuk menjelajahi isi dalam blog tersebut secara lebih leluasa.

Bagi faktor SEO, keberadaan breadcrumbs di suatu blog juga cukup penting karena berkaitan dengan kelengkapan navigasi di blog tersebut. Dengan adanya fitur breadcrumb ini, navigasi di blog tersebut akan menjadi lebih jelas dan lebih mudah dibaca pada halaman pencarian Google sehingga pengunjung yang menemukannya akan langsung melihat kategori yang menjadi induk dari artikel tersebut.

Cara Membuat dan Memasang Breadcrumb Di Blog

Nah, sekarang saya akan memberi tahu bagaimana cara membuat dan memasang breadcrumb di blog, silahkan kamu ikuti langkah-langkah di bawah ini.

1. Masuk ke Blogger

Pertama, cara membuat dan memasang breadcrumb di blog blogger (blogspot), adalah Masuk ke Blogger dengan Akun Google kamu.




2. Edit HTML

Kedua, Cara membuat dan memasang breadcrumb di blog blogger (blogppot), adalah Pilih menu Tema. Kemudian klik Edit HTML.




3. Masukkan Kode

Ketiga, Cara membuat dan memasang breadcrumb di blog blogger (blogspot), adalah Dengan Meletakkan kode di bawah ini.





Langkah 1, Cari kode ]]></b:skin> atau kode </style>. Kemudian kamu letakkan kode CSS berikut ini di atasnya.




.breadcrumb { margin-bottom: 20px; } .breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 12px;}




Langkah 2, Cari kode <b:includable id='comment-form' var='post'>. Jika sudah ketemu, kamu letakkan kode berikut ini di atas kode tersebut.



<b:includable id='breadcrumb' var='posts'> <b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'>Home</span></a> </span> <b:if cond='data:post.labels'> <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#187;&amp;nbsp; <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> &amp;nbsp;&#187;&amp;nbsp; <span><data:post.title/></span> <b:else/> &amp;nbsp;&#187;&amp;nbsp; Tidak Ada Kategori </b:if> </div> </b:loop> </b:if> </b:includable>




Langkah 3, Cari lagi kode <b:includable id='main' var='top'>. Jika sudah ketemu, letakkan kode berikut ini di bawahnya:



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




Kalau kode <b:includable id='main' var='top'> tidak bisa kamu temukan, silahkan cari kode seperti di bawah ini:



<h1 class='post-title entry-title'>

Atau

<h2 class='post-title entry-title'>

Atau juga

<h3 class='post-title entry-title'>



Kode-kode tersebut intinya adalah kode html untuk judul postingan. Kalau sudah ketemu, kamu letakkan kode <b:include data='posts' name='breadcrumb'/> di atas salah satu kode html untuk judul postingan tersebut.




4. Klik Simpan.

Jika semua langkah-langkah telah kamu lakukan, Silahkan kamu lihat hasilnya, fitur breadcrumbs akan muncul di atas judul artikel blog kamu.

Saran

Gunakan CTRL+F untuk mempermudah pencarian kode. Jika kamu menggunakan android, kamu bisa mencoba menggunakan aplikasi Quoda untuk mempermudah edit HTML.

Demikianlah penjelasan tentang Cara Membuat Dan Memasang Breadcrumb Di Blog.

Lihat juga:

• Cara Menjadikan Tag Heading H1 Sebagai Judul Postingan
• Berbagai Teknik SEO Untuk Meningkatkan Peringkat Dan Pengunjung Website
• Cara Membuat Kotak Penelusuran Sitelink Di Blog

Semoga bermanfaat. .