Cara Mudah Memasang Breadcumbs SEO di Blogger

Breadcumb merupakan sebuah menu navigasi yang ada pada postingan artikel dari suatu website. Menu navigasi ini umumnya berisikan label atau kategori dari artikel tersebut. Selain mempercantik tampilan blog, Breadcumb juga memiliki peran terhadap SEO. Breadcumb yang merupakan salah satu faktor pendukung dari SEO sebuah web.

Pada artikel kali ini penulis akan memberikan sedikit tutorial singkat Cara Mudah Memasang Breadcumb SEO di Blogger. Jika kamu tertarik untuk memasangnya, kamu bisa simak dalam tutorial berikut ini.

Cara Memasang Breadcumbs di Blogger

1. Log in ke akun Blogger -Tema  – Edit Html.

PicsArt 11 03 08.44.42

2. Masukan kode Style CSS di bawah ini dan taruh tepat sebelum kode ]]></b:skin> atau </style>

IMG 20191103 WA0002

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

3. Cari dan temukan kode Html yang hampir mirip seperti di bawah ini.

IMG 20191103 WA0001

<b:includable id='main' var='top'>...</b:includable>

4. Copy dan Pastekan kode Breadcumbs di bawah ini tepat sesudah kode tadi.

IMG 20191103 WA0000

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span  ><a expr:href='data:blog.homepageUrl'  title='Home'><span >Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span  ><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' ><span ><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

5. Simpan Tema.

Berikut adalah tampilan Breadcumbs yang telah terpasang di Blogger.

PicsArt 11 03 08.36.27

Sekian tutorial Cara Mudah Memasang Breadcumbs SEO di Blogger yang telah penulis bagikan untuk kamu. Jika kamu memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ya. Semoga bermanfaat.

Komentar

Leave a Reply

Your email address will not be published.

To Top