Cara Membuat Template SEO Friendly Part 4

\ \ 10 comments
tutorial blogger
Postingan ini lanjutan dari tutorial Cara Membuat Template SEO Friendly Part 3. Kali ini saya mau berbagi tutorial untuk memasang Navigasi Breadcrumb. Sudah tau kan apa Navigasi Breadcrumb itu? Jika belum lihat di bagian atas posting ini, trus yang mana. Itu yang di bawah deskripsi blog ini. Mau tahu cara buatnya? Silahkan ikuti petunjuk di bawah ini.
1. Seperti biasa login dulu ke akun Blogger sobat.
2. Masuk tab Rancangan lalu pilih yang Edit HTML.
3. Silahkan backup template sobat terlebih dahulu dengan klik Download Template Lengkap.
4. Centang Expand Template Widget.
5. Kemudian cari kode ini <b:include data='top' name='status-message'/> , biar lebih mudah silahkan gunakan fitur Search pada browser sobat dengan perintah Ctrl + F.
6. Lalu tandai kode tersebut dan ganti dengan kode ini
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
7. Kemudian cari kode berikut <b:includable id='main' var='top'> , tandai kode tersebut lalu ganti dengan kode di bawah ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://www.blackdeviant.web.id/-->
8.  Kemudian cari kode ini ]]></b:skin> , lalu tambahkan kode CSS berikut di atas atau sebelum kode tersebut.
/* Breadcrumbs CSS info @ http://www.blackdeviant.web.id/ */
.breadcrumbs{font-size:95%;line-height:1.4em;border-bottom:3px double #e6e4e3;margin:0 0 15px;padding:5px 5px 5px 0;}
9. Simpan template sobat. Sekarang coba sobat lihat hasilnya, jika berhasil berarti anda sukses mengikuti tutorial dari saya, tapi jika gagal anda belum berhasil. Maka silahkan komentar tentang masalah sobat, nanti akan saya bantu.

Black Deviant | Belajar SEO Blogger | Tutorial Blogger

10 comments:

  1. mantap.. ilmu baru nee..

    nti ane coba ah..

    kebetulan ... baru mau belajar Blogger....~~

    BalasHapus
  2. iya sob..
    kebalikan ma saya
    saya baru mau belajar wordpress nih sob..

    BalasHapus
  3. Breadcrumbs memang sangat seo friendly, karena labelnya bisa terindex. Alangkah baiknya lagi jika judulnya diganti jadi "cara memasang navigasi breadcrumb" agar lebih seo friendly juga di SE, karena url dan judul harus sama. :)

    BalasHapus
  4. udah dicoba gan :D
    dan berhasil dengan sukses, makasih gan :rescel
    http://jari10.blogspot.com

    BalasHapus
  5. Wah saya udah lansung ada tuh. Salam sahabat http://www.site-benefit.infofit.info

    BalasHapus
  6. mumet jg ya kalo ngikutin edit template biar seo friendly

    BalasHapus
  7. gan.. kok ada alamat website ente itu buat apah !!

    BalasHapus
    Balasan
    1. itu cuman info aja, ato juga bisa disebut credit...
      itu juga gak ngaruh kok, gak ada efek buat web yang pasang ntu code,,,
      di remove juga gag apa2 kok, intinya cuman kasih info/credit aja

      Hapus