Cara Menampilkan Related Post Di Bawah Postingan di Blogspot

Salah satu keuntungan dalam menggunakan wordpress self-hosted adalah kemudahan menambahkan plugin sesuai keinginan kita. Dengan jumlah plugin tak terbatas, termasuk salah satunya adalah plugin related post. Sedangkan untuk menampilkan related post di bawah postingan di blogspot itu gak semudah itu. Kita harus memasukkan script pada blog kita. 

Cara Menampilkan Related Post di Bawah Postingan di Blogspot


Seperti yang TBI tuliskan di atas, menggunakan script yang perlu dimasukkan dalam template blog kita, cara menampilkan related post di blogspot adalah sebagai berikut: 




1. Login ke Blogspot, masuk ke dalam dashboard blog kita.
2. Pilih Template dan kemudian pilih Edit HTML.
menampilkan related post di bawah postingan di blogspot
Edit HTML Template untuk menampilkan related post di blogspot

3. Cari </head> di dalam html tersebut. Caranya dengan Ctrl + F dan ketikkan "</head>" 
4. Copy paste kan kode berikut ini tepat di atas </head>

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWI2j-GHYEV8I2D8vbKuJZUrQ-6Fl-8G64pERO_V-QD3KTbCmtjw_Z_LEGiU7DZiwL0bU9Xy1k6VnB0rSE8DiqQYEX1bShJifsvuExIxDsfo35mKx6RFWzJm5dKbwSiB8aIPfXEnTgdc/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

5. Kemudian cari kembali <data:post.body/>
6. Copy dan paste script berikut tepat di bawah kode tersebut
<br/><br/><b:if cond='data:blog.pageType == "item"'>

<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Sudah? TBI anjurkan untuk pratinjau template sebelum menyimpannya ya. Kalau tidak ada error dalam pratinjau, simpan dan cek seperti apa tampilan postingan blog kamu. Muncul? 

Kalau TBI mencobanya di blog yang memang khusus untuk cek settingan :D Dan muncul seperti ini. 

menampilkan related post di bawah postingan di blogspot
Menampilkan related post di bawah postingan di blogspot dengan script


Cara Mudah Menampilkan Related Post di Blogspot


Kekurangan cara di atas adalah kalau salah copy paste template pada saat edit HTML itu, yang ada template blog kalian akan hilang begitu saja. Sayang kan kalau demikian. Blog yang kita buat, apapun tujuan membuat blog itu, jadi rusak. Jadi sangat tidak dianjurkan kalau tidak paham cara edit HTML ataupun takut mengedit. 

Eh tapi jangan sedih, TBI menemukan cara mudah menampilkan related post di blogspot lainnya nih. Caranya hampir mirip dengan menggunakan plugin di wordpressorg. Namanya adalah Linkwithin. 

Cara membuat related post dengan linkwithin ini bisa dilakukan dengan beberapa langkah mudah saja: 

1. Buka website linkwithin
2. Isi data yang diminta seperti email, blog link, platform blog dan berapa jumlah related post yang ingin ditampilkan. 
menampilkan related post di bawah postingan di blogspot
Isi data aja... 

3. Get Widget.
4. Install widget
5. Pilih blog yang ingin dipasangkan widget
menampilkan related post di bawah postingan di blogspot
Pilih Blog yang diinginkan

6. Atur lokasi widget

Pada saat kita klik get widget, sebenarnya akan muncul halaman petunjuk yang lengkap dan mudah diikuti. Setelah install widget dan mengatur penempatannya, related post akan segera muncul deh. 

Kesimpulan Membuat Related Post Di Blogspot


Blogspot memang terkenal dengan kemudahan kustom blog dengan keinginan kita sendiri. Jika kamu termasuk yang mau belajar edit HTML - walau hanya sedikit, cara menampilkan related post di bawah postingan di blogspot yang pertama, cocok untuk kamu. 

Kekurangan cara pertama itu adalah kalau salah edit, bisa mengakibatkan tampilan blog kita berantakan. Dan biasanya blogger yang mengalami ini bisa jadi panik. 

Cara mudah menampilkan related post di blogspot dengan Linkwithin itu jauh lebih mudah untuk diterapkan. Apalagi jika kamu takut edit html. Tapi ada kekurangannya juga, yaitu tidak bisa menampilkan lebih dari 5 related post. Sedangkan dengan script, kekuasaan di tangan kita. 

Kalau kalian, termasuk yang mana? Menampilkan related post di bawah postingan di blogspot kalian dengan cara pertama atau cara kedua? 


26 komentar:

  1. Belum menampilkan mas, ga bisa html soale. Sepertinya bisa dicoba tutorialnya itu. Makasih ya

    ReplyDelete
    Replies
    1. Bisa pakai yang linkwithin mbak. Lebih gampang tanpa edit html. Saya sih sarankan ini untuk yang gak bisa.

      Delete
  2. makasih tutorialnya, mas. saya bukmark dulu u dicoba kalau anak2 sdh aman :)

    ReplyDelete
    Replies
    1. Sama-sama Mbak Inna. Senang bisa membantu. Sudah berhasilkah?

      Delete
  3. Wahh... Ini bermanfaat banget, ane mah gak mau ribet orangnya... Beli template premium mas sugeng langsung beres hehehe..
    www.arditips.com

    ReplyDelete
    Replies
    1. Hahaha... memang itu gampang mas. Tinggal pakai saja. ini lagi suka otak atik aja.

      Delete
  4. catet dulu deh, ilmunya bermanfaat , thanks

    ReplyDelete
  5. wiii thanks infonya, dengan related post pembaca bisa terbantu jika ingin mendalami suatu artikel :)

    ReplyDelete
    Replies
    1. Iya mas. Tentunya demikian. Dan semakin lama pembaca stay di blog akan semakin bagus untuk blog kita juga.

      Delete
  6. Ini nih yang perlu disave saat ganti template :D

    ReplyDelete
  7. Jadi ingat blogspot saya yang mangkrak. Eman tapi nggak ada tenaga buat mengisinya.

    ReplyDelete
  8. Makasih sharingnya, blogspot saya mangkrak nih.

    ReplyDelete
    Replies
    1. Sama-sama mbak...
      Saya pun baru mulai di blogspot ini mbak. Yukkk

      Delete
  9. ilmunya berguna bangeeet buat aku yg buta total soal SEO :D tengkyu ryaaan

    ReplyDelete
  10. anehnya..berkali kali masukin kode ini dan linkwithin ngga bisa. udah masuk ke support linkwithin juga ngga bisa. ngga muncul babar blas. akhire aku pake engageya related post.

    ReplyDelete
  11. Pake linkwithin bisa mas, makasih ya tutorialnya :)

    ReplyDelete
  12. Saya pake linkwithin, dulu juga pernah pake edit html. Gara2 ganti theme masih males edit lagi hehe. Tapi linkwithin kadang suka ga nyambung ya related postnya -.-

    ReplyDelete
    Replies
    1. Iya mbak. Kekurangannya memang kadang related postnya gak nyambung. hahaha

      Delete
  13. Makasi ya mas, udah coba dua-duanya.Alhamdullilah sukses :)

    ReplyDelete

Komentar akan dimoderasi ya... tapi pasti akan dibalas. Makasih loh dah berkomentar di sini. Suaramu adalah inspirasi bagi saya

Powered by Blogger.