Cara Membuat Related Posts Blogger Blogspot 2014

Related Posts Blogger blogspot

Cara memasang widget/gadget Related Posts, Artikel Tulisan Terkait, You Might Want to Read This, Mungkin Anda perlu Membaca Ini dll baik dengan gambar thumbnail atau tidak di setiap akhir artikel blog di Blogger Blogspot. Tulisan ini diupdate pada 18 Agustus 2013. Penting: Direkomendasikan memakai Related Post dengan Gambar.

DAFTAR ISI
  1. Tujuan Related Posts Artikel Terkait
  2. Cara Buat Related Post Tanpa Gambar
  3. Cara Buat Related Post dengan Gambar Thumbnail

Related Posts atau Artikel Terkait adalah plugin atau widget yang akan menampilkan tulisan-tulisan yang berhubungan dengan tulisan yang sedang dibaca.

TUJUAN ADA RELATED POSTS ARTIKEL TERKAIT DI BLOGGER BLOGSPOT

1. Agar pengunjung betah berlama-lama di blog kita sehingga meningkatkan pageviews atau halaman yang dilihat oleh setiap pengunjung.
2. Agar artikel lama dapat diindex lagi oleh Google sehingga menambah SEO (search engine optimization).

Perhatian: Ada dua tutorial di bawah. Pertama, Related Post biasa (tanpa gambar). Kedua, Related Post dengan Gambar Thumbnail (gambar kecil). Pilih salah satu sesuai selera Anda.

Alkhoirot.net sendiri memakai cara pertama yaitu Related Posts yang biasa (tanpa gambar).


CARA MEMBUAT RELATED POSTS ARTIKEL TERKAIT DI BLOGGER BLOGSPOT

Cara bikin Related Posts biasa atau tanpa gambar adalah sebagai berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Layout / Tata Letak
3. Klik Tambahkan Gadget -> klik gadget "HTML/JavaScript Tambahkan"
4. Letakkan kode berikut:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>
5. Klik Simpan.
6. Klik Simpan Setelan.

Selesai. Coba lihat salah satu halaman artikel Anda. Akan muncul Related Post di bagian paling bawah.


CARA MEMBUAT RELATED POSTS DENGAN GAMBAR THUMBNAIL DI BLOGGER BLOGSPOT

Maksud Related Post dengan Gambar adalah Related Post yang mengandung gambar di atas setiap artikel. Contohnya, lihat gambar berikut:
Cara Membuat Related Posts Blogger Blogspot 2014

Ikuti panduan singkat berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Template -> Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut di atasnya kode nomor 3:
<!--Related Posts with thumbnails Scripts and Styles Start-->
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Cari kode </head>
5. Letakkan kode berikut tepat di atasnya kode nomor 4:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type="text/javascript" src="http://yourjavascript.com/233021883/www.mybloggerblog.com.js"></script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Cari kode berikut <p class='post-footer-line post-footer-line-1'>
7. Taruh kode berikut di bawahnya atau setelah kode nomor 6:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='www.mybloggerblog.com'></a>
</b:if></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8. Klik Simpan Template. Selesai.

===========================
RUJUKAN DAN FURTHER READING

1. bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

Untuk langganan artikel Alkhoirot Net via Email gratis, klik di sini!

31 comments:

  1. cara membuat related post dengan gambar

    ReplyDelete
  2. cara membuat related post bergambar di blogspot

    ReplyDelete
  3. membuat related artikel blogspot gambar

    ReplyDelete
  4. membuat related artikel dengan gambar

    ReplyDelete
  5. related pos dengan gambar

    ReplyDelete
  6. salam ziarah,macam mana nak buat entry bergerak macam kt atas...

    ReplyDelete
  7. @MOBODICK: pakai template blogger yg memakai slider. lihat di premiumbloggertemplates.com

    ReplyDelete
  8. thanks atas infonya, salam kenal
    http://caramembuatyangakumau.blogspot.com

    ReplyDelete
  9. kalo buat di taruh di widget ada gak??

    ReplyDelete
  10. Kalo langsung html widgetnya ada ga gan? btw, nice share :)

    ReplyDelete
  11. wah kok gk ada code yang <div clas="post-footer-line-1 bos apa bisa pakai code yang lain ya gan ............? makasih sebelumnya atas infonya

    ReplyDelete
  12. Assalamu'alaikum.....
    www.eset9.blogspot.com/

    ReplyDelete
  13. makasih gan, tutor blognya bagus-bagus. klo sempet mampir sini

    ReplyDelete
  14. info yang menarik untuk personalisasi tampilan blog kita

    ReplyDelete
  15. kebanyakan semua blog ngasih tips buat bikin related post atau tulisan terkait nya sama. baik yang tulisan inggris atau yang bahasa indonesia. sekarang saya nemu kesulitan, karena pas dicari kode di skrip html template yang saya pake di http://deraldes.blogspot.com, kode gak ada. gimana dong?

    ReplyDelete
  16. @Delayung : udah si expand belum mas skrip htmlnya?karena banyak blogger yang saya tahu sering melewatkan expand html untuk edit templatenya. Salam.

    ReplyDelete
  17. Kode script no.6 itu diletakan dibawah kode no.5 yang 1, 2, apa dua duanya?

    ReplyDelete
  18. Oke makasih tutorialnya , mas

    ReplyDelete
  19. Makasih banyak untuk infonya yang sangat membantu.

    ReplyDelete
  20. Makasih mas tutorialnya..

    ini baru pas scriptnya..

    ReplyDelete
  21. mkasih mas..atas infonya...

    ReplyDelete
  22. Makasih ya mas...
    Ternyata masanya mudah banget.... Sy udah lama otak atik ternya cuma begitu... hihi

    ReplyDelete
  23. mas ,, mau nanya ,, bagaimana mengatur related post nya jadi vertikal ??? dan jgn lupa kunbal nya di anprat.blogspot.com

    ReplyDelete

Kirim konsultasi Agama ke: alkhoirot@gmail.com Cara Konsultasi lihat di sini!