Cara Membuat Related Posts Valid HTML5

Posted by Mahesa Putra on Sunday, June 24, 2012
Cara Membuat Related Posts Valid HTML5 atau membuat artikel terkait di blogspot or Blogger Related Posts Widget HTML5 Valid - Setelah update terakhir mengenai tutorial HTML5 pada posting sebelumnya di halaman Cara Menerapkan Tag <header> HTML5 di Blogspot yang kemudian di selingi artikel kontes seo 2012 seperti Channelbola.com Agen Bola Resmi Piala Eropa 2012, dan Cyberbola.com Say No To Racism Piala Eropa 2012 sehingga lanjutan tutorial html5 harus saya tunda dulu sementara, maklum anekan termasuk blogger matre yang pengen ikutan kontes seo juga hehe.....

Yups! sekarang saya kembali lagi membahas tentang HTML5 Blogspot yang sebenarnya sangat mudah jika kita sudah mengetahui dasarnya, dan pada panduan html5 kali ini saya akan menyajikan tutorial cara membuat related posts valid html5 berikut ini.

Blogger Related Posts Widget For HTML5 Blogspot

Perlu diketahui bahwa cara membuat related posts html5 valid ini adalah versi blogger related posts widget, dan jika di terapkan pada platform lain seperti wordpress, dan lain-lain saya tidak menjamin if it works.

Berikut ini adalah cara membuat related posts atau artikel terkait blogspot valid html5:
  • Login ke blogger.com
  • Pilih menu Template, kemudian klik Edit HTML > proceed > centang Expand Template Widget
  • Letakkan script dibawah ini secara sekaligus tepat diatas kode </head> :
    <!-- Start HTML5 related posts widget by http://mahesaputra-id.blogspot.com --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js.js' type='text/javascript'></script> <!-- End HTML5 related posts widget by http://mahesaputra-id.blogspot.com -->
  • Kemudian cari kode <data:post.body/>, dan selanjutnya tempatkan script berikut ini dibawah kode  <data:post.body/> atau dibagian bawah post-footer-line-1, post-footer-line-2 atau terserah Anda deh soalnya script ini bisa juga kok dipasang di sidebar, ini dia scriptnya:
    <!-- Start HTML5 related posts widget by http://mahesaputra-id.blogspot.com --><div class='related-posts-widget' data-options='{ blog_url:&#39;http://namabloganda.blogspot.com/&#39; }'>loading..</div><!-- End HTML5 related posts widget by http://mahesaputra-id.blogspot.com -->

    Ket: Ganti  http://namabloganda.blogspot.com/ dengan url blog anda
  • Selanjutnya Save Template dan lihat hasilnya
Demikianlah artikel tutorial html5 mengenai cara membuat related posts blogspot valid html5 diatas, jika ada permasalahn janga ragu untuk bertanya dan sebagai referensi sumber javascript related posts widget diatas adalah dari moretechtips yang kemudian saya edit lagi. Selamat mencoba dan satu pesan dari penulis, jika Anda melakukan copy artikel dari blog ini termasuk artikel ini, mohon untuk mencantumkan link blog ini sebagai sumber penulisan Anda karena itu menunjukan bahwa Anda adalah orang yang pandai menghargai orang lain. Terimakasih.

{ 9 comments... read them below if any or add comment }

Info Toko Surya62 said...

Bagus Gan...konten yang bagus... share kembali ya

Tips Kesehatan - KENZOO said...

klo buat sitemap/daftar isi biar bisa valid gmn gan..
apa kode pemanggil scriptnya yang eror ya... ga valid :(

Mahesa Putra said...

@Tips Kesehatan - KENZOO: scriptnya di encode dulu, dan pemanggilan scriptnya jangan pake kode type txt/javascript tpi cukup dgn kode script src dan di tutup dgn kode script lgi

Blog Business said...

Not work for my template, any suggest?

Mahesa Putra said...

@Blog Business: Thanks for the information. I have updated the script, please try again and i am sure that it works now.

Anonymous said...

not work

lintasline.me said...

thanks sob tutorialnya, isin coba pasang di blog saya :)

Shizenku said...

setelah ane coba kok ada gambarnya gan. biar gak ada gambarnya gimana gan ?

Ayo Kita Bikin Ramea said...

nice gan balit hml5