Tutorial Cara Membuat Related Post Di Blogger

Saya akan berbagi Tutorial Cara Membuat Related Post Di Blogger, saya yakin masih banyak blogger yang belum mengetahui bagaimana cara membuat related post di Blogger atau bagaimana cara membuat artikel terkait di Blogger. Related post atau artikel terkait yang ada dibawah setiap postingan itu fungsinya bukan hanya sekedar mempercantik blog saja, namun fungsi utama related post atau artikel terkait itu ialah untuk meningkatkan pageview dari pengunjung blog anda. Dengan adanya related post atau artikel terkait dibawah setiap postingan akan mempermudah pengunjung blog anda untuk mencari konten yang berkaitan dengan yang dia baca saat itu.


Kalau di Wordpress cara membuat related post sangat mudah, anda hanya perlu memasang plugin saja sudah beres. Namun untuk memasang related post di Blogger anda harus memasang kode script di tempate blog agar related post muncul dibawah postingan. Seperti pada blog ini anda juga akan melihat related post, namun yang akan saya bagikan ialah related post dengan thumbnail atau bergambar.

Berikut adalah  Tutorial Cara Membuat Related Post Di Blogger :

• Pertama masuk ke Blogger terus pilih Template lalu klik Edit HTML dan teken Ctrl + F di keyboard kemudian cari kode </head> lalu centang Expand Widget Templates, setelah itu anda pastekan kode dibawah ini diatasnya.

<!--Postingan Terkait Dengan Gambar Kode Mulai--><br /> <!-- remove --><b:if cond='data:blog.pageType == "item"'><br /> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-left: 5px; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style><br /> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzS9tVI7FO8bg9LugCvDg2iOgQEVLFnYAFtmmj7fdoPhpADVZxuz5pt2o-vBaBPAuupqQOBCkq5Bx9F41DFNlPoaZ54lIn3xhvlrBYkLv06bB25s7cKvO5bM_zevTudN5xYDvVzkN4vGNl/s1600/images.jpg"; var maxresults=10; var splittercolor="#d4eaf2"; var relatedpoststitle="Postingan Terkait"; </script><br /> <script src='https://sites.google.com/site/seociyussite/file/post_terkait_dengan_gambar.js' type='text/javascript'/> <!-- remove --></b:if> <!--Postingan Terkait Dengan Gambar Kode Selesai-->

• Kalo sudah jangan disave dulu, sekarang anda cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>. Setelah itu paste kode di bawah ini tepat dibawahnya. Anda tinggal pilih kode related post dengan thumbnail yang statis atau yang bergerak ( marque ).

>> Kode Related Post Dengan Thumbnail Statis

<!--Postingan Terkait Dengan Gambar Kode Mulai--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script><br /> </div> <div style='clear:both'/> <!-- remove --></b:if> <br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /> </b:if></b:if><br /> <!--Postingan Terkait Dengan Gambar Kode Selesai-->


>>Kode Related Post Dengan Thumbnail Bergerak / Marque

<!--Postingan Terkait Dengan Gambar Kode Mulai--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id='related-posts'> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast != "true"'/><br /> <b:if cond='data:blog.pageType == "item"'><br /> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=11"' type='text/javascript'/> </b:if></b:loop> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'>var currentposturl="<data:post.url/>"; removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script><br /> <script type='text/javascript'>tweetmeme_url = '<data:post.url/>'; </script></marquee><br /> </div> <div style='clear:both'/> </b:if><br /> <!--Postingan Terkait Dengan Gambar Kode Selesai-->

• Abis dipastein sekarang diedit, Buat mengatur posisi judulnya anda edit padding-left: semakin besar semakin ke kanan dan buat ganti judulnya edit Postingan Terkait. Terus untuk merubah warna hover edit saja background-color: ganti dengan warna yang lain sesuai selera anda.
• Kalo buat var maxresult sama max-result ganti saja sesuka hati mau berapa jumlah related post yang ditampilkan. Beres ngedit sekarang tinggal Save template dan buka blog anda pasti sudah ada related post dengan thumbnailnya sekarang.