Friday, November 25, 2016

Cara Pasang Breadcrumb SEO Friendly Untuk Blog

Apa kabarnya gan ? Jumpa lagi dengan admin yang ganteng ini. di Blog kesayangan kita Hobbyku Desain Tempatnya tutorial desain grafis dan tips dan trick Blogging , Pada artikel ini saya akan membahas "Cara Pasang Breadcrumb SEO Friendly Untuk Blog". Semoga artikel yang saya buat ini bermanfaat bagi anda.


Cara membuat Breadcrumb SEO Friendly

Breadcrumb, apa anda tau Breadcrumb ? Ya biasanya Breadcrumb muncul dibawah title artikel pada search engine contoh : " hobbykudesign.blogspot.com > Ngeblog " , Breadcrumb berfungsi mempermudah agar kita atau pengunjung mengerti label artikel tersebut, Tapi kali ini saya akan memberi tahu cara memasang Breadcrumb yang SEO Friendly.

Cara Pasang Breadcrumb SEO Friendly

1. Buka Blogger > Klik Tab Template > Edit HTML. Langkah selanjutnya Cari Kode </style> atau ]]></b:skin> , Kemudian Tempel kode dibawah ini tepat diatas kode tersebut. ( untuk mencarinya anda bisa dengan cara menekan CTRL + F )


/* 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;}

2. Cari kode seperti dibawah ini.


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

3. Langkah selanjutnya Salin dan Tempel kode ini tepat dibawah kode diatas.


<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 itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><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>

4. Save atau Simpan template yang sudah kita modifikasi tersebut.

Dengan demikian Breadcrumb anda akan lebih SEO friendly.

Sekian artikel "Cara Pasang Breadcrumb SEO Friendly Untuk Blog" Ini, Bila artikel yang saya buat ini bermanfaat bagi anda, Tolong share kemanapun agar bermanfaat juga bagi orang lain.