Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome

Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome - Cara menciptakan breadcrumbs ini sama saja dengan breadcrumbs menyerupai biasanya, hanya saja disini aku tambahkan element font awesome yang letaknya disebelah kiri breadcrumbs, dan instruksi yang telah aku bagikan dibawah ini telah Valid HTML5, Tak perlu berlama-lama, eksklusif saja ini beliau cara menciptakan breadcrumbs seo friendly dengan font awesome :

Sebelum menciptakan breadcrumbs nya silahkan teman masukan javascript berikut, javascript berikut ialah script untuk font awesome, kalau sebelumnya teman telah menggunakannya teman tidak perlu lagi menambahkannya, letakkan javascript berikut di atas instruksi </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Cara Pembuatan Breadcrumbs SEO Friendly dengan Font Awesome :

1. Masukkan CSS berikut diatas ]]></b:skin> atau di <style>

 .breadcrumbs{   background:#ff6c60;   padding:15px 20px 15px 65px;   margin-bottom:19px;   font-size:14px;   color:#fff;   border-radius:4px;   position:relative;  }  .breadcrumbs a{   color:#fddbd8;   text-decoration:none;  }  .breadcrumbs a:hover{   color:#fff;   text-decoration:none;  }  .breadcrumbs:before {   content: "\f041";   font-family:fontAwesome;   font-size:22px;   font-style: normal;   background-color:#e56155;   color:#fff;   border-radius:4px 0 0 4px;   top:0;   left:0;   padding:13px 20px;   position:absolute;  }

2. Cari instruksi <b:includable id='main' var='top'> lalu 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;'>  <!-- breadcrumb for the post page -->  <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'>Home</span></a></span>  <b:loop values='data:post.labels' var='label'>    &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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;'>  <!-- breadcrumb for the label archive page and 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'/>

 Selesai, ada kesalahan atau bagaimana ?, komentar dikolom yang telah disediakan.

Peringatan : apabila sebelumnya teman telah memakai breadcrumbs didalam template sobat, sebaiknya tidak perlu diganti html nya, cukup teman ganti css nya saja, dan hapus css breadcrumbs teman sebelumnya dengan css breadcrumbs yang telah aku bagikan diatas tadi.

Tweet

Subscribe to receive free email updates: