Cara Membuat Artikel Terkait (Related Post) yang Bergambar di Blogger / Blogspot

Cara Membuat Artikel Terkait yang Bergambar di Blogger - Artikel Terkait atau biasanya disebut dengan Related Post adalah salah cara untuk meningkatkan Pageviews dan memperbaiki tingginya Bounce Rate Blog kita. Untuk dapat lebih menarik perhatian pengunjung Blog kita, kita dapat menampilkan gambar pada Artikel Terkait (Related Post). Tidak perlu tindakan tambahan untuk menampilkan gambar tersebut karena cara dibawah ini akan dengan otomatis mendeteksi Gambar yang ada di Blog Blogger kita dan menampilkannya di Related Post (Artikel Terkait). Jika ada Artikel anda tidak ada gambar, sebaiknya tambahkan gambar terlebih dahulu, karena selain dapat meningkatkan penampilan, gambar di dalam posting/artikel juga dapat meningkatkan SEO blog kita.

Singkat cerita, berikut ini adalah cara untuk menampilkan Widget Related Post atau Artikel Terkait pada blog yang berplatform Blogger/Blogspot.

Cara Membuat Artikel Terkait (Related Post) Bergambar/Thumbnail di Blogger/Blogspot

1. Masuk ke Dashboard Blogger/Blogspot

2. Klik [Template]

3. Klik [Edit HTML]

4. Gunakanlah [CTRL]+[F] untuk mencari kode </head>

5. Kemudian masukan kode HTML berikut ini diatas </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

4. Gunakan lagi [CTRL]+[F] untuk mencari kode <div class='post-footer'>
5. Kemudian masukan kode HTML berikut ini diatas <div class='post-footer'>

<!-- Related Posts with Thumbnails Code 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> <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BkFffBCDKJhohbXKew_mcuNe4JBRhu1CFaNFjq5lopqObTfONUKH4hse8lOZawrGacX7W2J20ERtCoT7Czsz89drw0o-GTnaq9som6v9tyDh4LhbT9lxlJ59qX9cJ-tovQ3SBN1ehGYi/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

6. Klik [Save template]

Catatan : 

• Perlu diperhatian bahwa terdapat 2 <div class='post-footer'> dalam HTML Textbox. Peletakan yang benar adalah di kode <div class='post-footer'> yang kedua.

Penyesuaian selera :

Anda juga dapat melakukan beberapa modifikasi sesuai dengan keinginan anda seperti :

• Menggantikan ukuran (Lebar*Tinggi) Thumbnail gambar pada value yang berwarna merah diatas (100px)
• Menggantikan warna dan ukuran Font pada value yang berwarna biru diatas.
• Mengubah jumlah artikel terkait yang ditampilkan, anda dapat menggantikan value pada maxresults=5
• Anda juga dapat menggantikan kata "Related Posts" yang berwarna biru diatas dengan kata "Artikel Terkait" atau kata-kata lainnya sesuai dengan selera anda.

Demikian cara untuk membuat atau menampilkan Artikel Terkait (Related Post) yang bergambar pada Blogger/Blogspot.

Selamat Mencoba dan Semoga bermanfaat....