Saturday, April 19, 2014

Breadcrumbs SEO Friendly dan Valid HTML5

Breadcrumbs SEO Friendly dan Valid HTML5

Memasang Navigasi Breadcrumbs merupakan salah satu cara untuk optimasi SEO, dengan memasangnya akan memudahkan pengunjung dan Mesin Pencari dalam menjelajahi blog Anda. Navigasi Breadcrumbs sangat penting untuk sebuah blog, oleh karena itu Breadcrumbs ini harus SEO agar data dapat tampil pada mesin pencari.
Breadcrumbs adalah sebuah peta dimana dan di kategori apa artikel yang kita buat di publikasikan. Adanya navigasi breadcrumbs pada blog akan memudahkan pengunjung untuk menjelajahi blog Anda, dengan begitu pengunjung dapat mengetahui dimana dan pada kategori apa artikel tersebut dipublikasikan.

Pada breadcrumbs ini sudah Saya tambahkan title tag pada labelnya sehingga lebih SEO. Untuk pemasangan navigasi breadcrumbs silakan disimak baik - baik :D

Langkah Pertama

Silakan Anda simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>.

.breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah Kedua

Silakan Anda cari kode dibawah ini pada template Anda.

<b:includable id='main' var='top'>
Kemudian Anda ganti dengan 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' title='Beranda'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<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' title='Beranda'><span itemprop='title'>Beranda</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' expr:title='data:label.name' 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' title='Beranda'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Arsip untuk <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' title='Beranda'>Beranda</a></span> &#187; <span>Semua posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Penelusuran <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'/>
Bagi Anda yang ingin membatasi jumlah artikel pada label breadcrumbs silakan baca artikel berjudul Membatasi Jumlah Artikel Pada Label Blog.

Membatasi Jumlah Artikel Pada Label Blog

Membatasi Jumlah Artikel Pada Label Blog
Jumlah label yang ditampilkan oleh blogger kadang tak menentu seperti yang kita inginkan. Oleh karena itu perlu untuk membatasi jumlah artikel yang ingin ditampilkan pada label.

Cara Pertama

Saya beri contoh pada url label berikut.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger
Diatas adalah contoh url label, untuk membatasi jumlah artikel yang diinginkan ketika label di klik tambahkan kode ?max-results=5 dibelakang url nya. Sehingga menjadi.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger?max-results=5
Silakan ganti angka lima menjadi jumlah artikel yang ingin Anda tampilkan.

Cara Kedua

Bagaimana caranya membatasi jumlah artikel pada label bawaan dari blogger. Ok, langsung saja silakan Anda cari kode dibawah ini pada template Anda.

expr:title='data:label.name'
Untuk membatasinya silakan Anda tambahkan kode ?max-results=5 di belakangnya. Sehingga menjadi seperti dibawah ini.

expr:href='data:label.url + &quot;?max-results=6&quot;'
Untuk mengatur jumlahnya silakan Anda ganti angka 5 dengan jumlah yang Anda inginkan.

Anda juga bisa menambahkan title tag pada label diatas dengan cara menambahkan kode title='Judul' atau baca artikel Saya berjdul Menambahkan Title Tag Pada Label. Namun, dengan cara diatas navigasi halaman menjadi tidak berfungsi pada pencarian label sehingga perlu di modifikasi kembali atau baca artikel Saya berjudul Menampilkan Navigasi Halaman Pada Pencarian Label.

Friday, April 18, 2014

Menambahkan Title Tag Pada Label

Menambahkan Title Tag Pada Label
Label adalah jenis atau kategori dari suatu artikel. Oleh karena itu untuk memaksimalkan SEO untuk label tersebut Anda bisa menambahkan tag title, sama halnya seperti tag alt pada gambar. Ok, langsung saja cara menambahkan title tag pada label.

Langkah Pertama

Silakan Anda cari kode dibawah ini pada template Anda.
expr:href='data:label.url'
Kode diatas adalah kode untuk mengambil label pada artikel di blog.

Langkah Kedua

Selanjutnya Anda tambahkan kode dibawah ini pada kode diatas.

expr:title='data:label.name'
Secara lengkap url lengkapnya akan tampak seperti kode dibawah ini.

<a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
Semoga artikel ini dapat Anda pahami dan bisa diperlajari lagi ;)

Wednesday, April 16, 2014

Googleont Responsive Blogger Template

Googleont Responsive Blogger Template
Googleont Responsive Blogger Template


Satu lagi template responsive buatan +Giovani Aluha, template yang satu ini di lengkapi fitur SEO Friendly. Tampilan responsive pada template ini begitu sempurna dan satu lagi template ini fast loading.

Fitur Template

  1. Responsive
  2. Valid HTML5 ( Home Page and Post Page )
  3. Valid CSS3
  4. Emoticon In Comment
  5. Auto Readmore
  6. Breadcrumbs
  7. SEO Ready
  8. Menu
  9. Custom Pager In Post Page
  10. Social Icon Share
  11. Related Articles
  12. Breaking News
  13. Syntax Highlighter
  14. Recent Post by Tag
  15. Cool Threaded Comment
  16. and more.