Cara Memasang Breadcrumbs di Blog 99% SEO Friendly - d-ii

Cara Memasang Breadcrumbs di Blog 99% SEO Friendly

Cara Memasang Breadcrumbs di Blog 99% SEO Friendly


Cara memasang Breadcrumbs di blog merupakan salah satu langkah Optimasi SEO juga dimana bisa meningkatkan kinerja situs Blog kita
Dengan adanya Breadcrumbs juga baik dilakukan agar mempunyai Navigasi yang bisa membuat pengunjung situs Blog kita mudah dalam Navigasi didalam Artikel Blog kita
selain itu juga Google mengajurkan untuk memasang Breadcrumbs agar mempunyai struktur Navigasi yang jelas melakukan ini merupakan langkah baik untuk Optimasi Blog kita

Bagaimana cara memasang nya berikut :
1.Login ke akun Blog kemudian Edit Template Html
2.Cari kode ]]></b:skin> kemudian letakan CSS dibawah ini tepat diatas nya kode tersebut

dua CSS untuk memasang Breadcrumbs, pilih salah satu dengan sesuai kesukaan
Yang pertama :


 /*-----------------------
  Breadcrumbs
-----------------------*/

 #breadcrumbs {
     background-color: #f1f1f1;
     font-size: 11px;
     margin: 20px 0 0;
     padding: 9px 12px;
     border-left: 2px solid #00aced;
 }

 #breadcrumbs span {
     color: #00aced;
     margin: 0 10px;
 }

Yang Kedua :


 /*-----------------------
  Breadcrumbs
-----------------------*/
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#0089f9;}
.breadcrumbs a:hover,.post-info a:hover {color:#15098e;}


3.Pilih salah satu saja dari CSS diatas, bisa menggunakan yang pertama atau yang kedua
4.Setelah itu Cari Kode <b:includable id='main' var='top'> , jika sudah ketemu hapus saja dan ganti kan dengan kode dibawah ini

<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;'>
<!-- breadcrumb for the post page -->
<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;'>
<!------------ ini adalah breadcrumb untuk label archive page dan search pages ------------>
<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 posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts 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'/>


5.Jika sudah Save Template kemudian lihat hasil nya, Untuk merubah warna silahkan ganti dengan sesuai kesukaan warna kamu


dengan adanya memasang Breadcrumbs akan sedikit membantu Optimasi Navigasi dan terlihat baik oleh mesin pencari "semoga bermanfaat"

Cara memasang Breadcrumbs di Blog 99% SEO Friendly

Author:

#

Artikel Menarik Banget ? d-ii , Suka...

Scroll to top