Template dengan Breadcrumbs yang SEO Friendly akan meningkatkan page rank di Google, maka dari itu jangan di anggap remehkan Breadcrumbs ini. Kali ini saya akan membagikan breadcrumbs yang di pakai oleh blog Arlina design.Baca juga : Cara Efektif Mempercepat Loading Blog Agar Lebih Ringan
Dengan Anda memasang breadcrumbs yang SEO Friendly maka, artikel / postingan Anda akan cepat terindex oleh Search Engine. Breadcrumbs pula berguna untuk menginformasikan kepada pengunjung mengenai kategori dari artikel / postingan yang ada di dalam blog tersebut.
Membuat Breadcrumbs SEO Friendly
Langkah pertama :
Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy kode CSS dibawah ini di atas kode
]]></b:skin> atau </style>/* Breadcrumbs */
.breadcrumbs {background:#fafafa;font-size:100%;height:45px;overflow:hidden;padding:0;border-bottom:0;position:relative;}
.breadcrumbs:after{display:inline-block;content:"\f09b";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#768187;top:0;right:0;padding:12px 20px;position:absolute}
.breadcrumbs > span {padding:0;}
.breadcrumbs a{color:#768187;font-size:13px;font-weight:normal;line-height:45px;}
.breadcrumbs span a {color:#768187;padding:10px 0;}
.breadcrumbs span:first-child a{color:#768187;margin-left:20px;}
.breadcrumbs > span:last-child {visibility:hidden;width:0;height:0;color:#768187;border-right:none;font-size:13px;font-weight:300;line-height:30px;}
.breadcrumbs span a:hover {color:#151515;}
.breadcrumbs a:hover {color:#151515;}Langkah kedua :
Carilah kode HTML seperti dibawah ini,
<b:includable id='main' var='top'>...</b:includable>Lalu Anda Copy dan Paste kode HTML dibawah ini tepat di bawah kode di atas
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> <data:title/></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 + "?&amp;max-results=6"' itemprop='url'><span itemprop='title'><i class='fa fa-caret-right fa-fw'/> <data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> </b:if> </b:loop> <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span>Uncategories</span> <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span> Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span> <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>Silakan Anda Save Template. Selanjutnya Anda kunjungi situs Google Struktur Data Testing Tools, untuk menguji apakah Breadcrumbs Anda sudah terpasang dengan baik atau tidak.
0 Comments