Blog Pribadi tempat Berbagi Ilmu dan Pengalaman

Cara Memasang Seo Breadcumbs

Breadcrumbs  biasanya terletak pada bagian atas di setiap artikel atau halaman. Gunanya untuk membantu pengindeksan pada mesin pencari, dengan mengetahui struktur posisi artikel pada website/blog anda. Ini gambar breadcrumbs di halaman website:


Dan juga akan terpampang pada halaman mesin pencari:

Bagaimana cara memasangnya pada platform blogger?
  1. Log In, masuk pada halaman Template.
  2. Edit HTML, Kemudian cari kode ]]></b:skin> atau </style>, kemudian masukkan kode CSS berikut:

    .breadcrumbs {margin:10px;padding:10px;text-transform:uppercase;font:normal 14px font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;border-bottom:3px dotted #333;}

  3. Klik save, kemudian cari kode <b:includable id='main' var='top'> dan ganti Kode HTML dengan 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;'>
    <!-- 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'/>



  4. Klik save template, selesai.
Jika anda ingin mengubah style breadcrumbs, silahkan anda sedikit otak-atik kode CSS. Sesuaikan tampilan breadcrumb dengan halaman artikel anda. Trim's.

No comments:

Post a Comment