CARA MEMBUAT BREADCRUMBS SEO FRIENDLY DENGAN FONT AWESOME

Tuesday, October 07, 2014 Unknown 0 Comments

Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome- Cara membuat breadcrumbs ini sama saja dengan breadcrumbs seperti biasanya, hanya saja disini saya tambahkan element font awesome yang letaknya disebelah kiri breadcrumbs, dan kode yang telah saya bagikan dibawah ini telah Valid HTML5, Tak perlu berlama-lama, langsung saja ini dia cara membuat breadcrumbs seo friendly dengan font awesome :

Sebelum membuat breadcrumbs nya silahkan sobat masukan javascript berikut, javascript berikut adalah script untuk font awesome, jika sebelumnya sobat telah menggunakannya sobat tidak perlu lagi menambahkannya, letakkan javascript berikut di atas kode </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 kode <b:includable id='main' var='top'> kemudian 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'><aexpr:href='data:blog.homepageUrl' itemprop='url'><spanitemprop='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'/>