--!>
Home » SEO » TipsdanTrik » Cara Memasang Breadcrumbs di Blogger (100% Berhasil)

Sunday, August 13, 2017

Cara Memasang Breadcrumbs di Blogger (100% Berhasil)

      ,    Disqus  
Cara Mudah Memasang Breadcrumb di Blogger
Memasang Breadcrumbs berfungsi sebagai alat bantu navigasi untuk memudahkan pengujung mengetahui letak lokasi sebuah konten yang ada disitus Anda, seperti gambar dibawah ini :
navigasi breadcrumbs

"Memasang breadcrumb sangatlah penting bagi situs Anda dalam faktor pendukung SEO."


Nah, untuk pemasangannya terkadang sulit bagi pemula yang baru  belajar ngeblog dan begitu juga saya yang hampir mencoba sekitar 9 kali namun belum sesuai dengan harapan karena tidak terdetek oleh Structured Data Testing Tool dan tidak munculnya Navigasi Breadcrumbs di atas postingan artikel.

Navigasi Breadcrumb

Tetapi akhirnya saya menemukan teknik memasang Breadcrumb SEO yang benar diblognya KangIsmet dan 100% berhasil.

STEP 1 - Memasang Breadcrumbs 


    1. Login ke Blogger
    2. Lalu pilih menu Template > Edit HTML
    3. Cari kode ]]></b:skin> letakan kode dibawah ini tepat diatasnya
    
.breadcrumbs{display:block;position:relative;background:#fff;padding:19px 9px 16px 22px;color:#666666;margin:0 0 18px 0;white-space:nowrap;overflow:hidden;font-size:110%;text-overflow:ellipsis;width:100%;border:1px solid #e3e3e3;border-radius:6px}

    1. Sekarang kode <b:includable id='main' var='top'> ganti dengan :
    
<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">Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond="data:blog.pageType == &quot;item&quot;">
<!-- Halaman Breadcrumb -->
<b:loop values="data:posts" var="post">
<b:if cond="data:post.labels">
<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href="data:blog.homepageUrl" property="v:title" rel="v:url">Home</a></span>
<b:loop values="data:post.labels" var="label">
&#187; <span typeof="v:Breadcrumb"><a expr:href="data:label.url" property="v:title" rel="v:url"><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class="breadcrumbs"><span><a expr:href="data:blog.homepageUrl" rel="tag">Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond="data:blog.pageType == &quot;archive&quot;">
<!-- Halaman label search breadcrumb -->
<div class="breadcrumbs">
<span><a expr:href="data:blog.homepageUrl">Home</a></span> &#187; <span>Archives 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">Home</a></span> &#187; <span>All post</span>
<b:else/>
<span><a expr:href="data:blog.homepageUrl">Home</a></span> &#187; <span>Post filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id="main" var="top">
<b:include data="posts" name="breadcrumb"/>
    Dan terakhir Simpan Template Anda

    STEP 2- Mengecek Breadcrumbs 


    1. Silahkan kunjungi  Structured Data Testing Tool 
    2. Copy-Paste Url Artikel Anda 
    3. Klik RUN TEST

    Structured Data Testing Tool

    Setelah itu akan tampil halaman stuktur data diblog Anda dan perhatikan apakah contoh menu breadcrumb Anda sudah terdektek, seperti gambar dibawah ini:

    Mengecek Breadcrumbs

    Jika kalian suka dengan artikel saya silahkan berbagi dengan teman Anda. Terima Kasih telah membaca sampai  selesai.


    EmoticonEmoticon