Membuat Artikel Terkait Thumbnail Untuk Blogspot

Membuat Artikel Terkait Thumbnail Untuk Blogspot - Cara membuat artikel terkait thumbnail di blogspot ini sudah banyak blogger yang menulis di blog mereka, namun Belajar Ilmu Komputer juga menulis artikel ini karena ada beberapa pengunjung yang mengharapkan agar artikel tentang cara membuat artikel terkait atau bahasa Inggrisnya Realated Post ini diposting juga di blog Belajar Komputer dan Internet terbaik ini.

Bagi anda yang mau mempraktekkan menempatkan artikel terkait bagian bawah postingan anda, silahkan ikuti tutorialnya berikut ini. Baca satu persatu agar anda tidak salah dalam praktek cara membuat artikel terkait untuk blogger atau blogspot ini.

1. Login ke dashboard blogger anda
2. Klik menu Template
3. Klik Edit HTML dan centang pada tulisan Expand Widgets Template
4. Cari kode </head>
5. Copy dan paste kode berikut ini sebelum kode </head>

<!-- Artikel Terkait thumbnails Blogger Blogspot Awal --> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <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: 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; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNobtZV9mlCagCcj7g8YbUz2sKnpngCH4_sGRDmOoOYj1S8Otjc9HeqRbS2_GEiXhkb69p8Iv9x3vuXRBOruKVfPuB4caDTVOtu_SQHWIFcdHd9Ep9VjhS9P_taHGFApDLhwcck8Hu3esc/s1600/no_image.jpg&quot;; var maxresults=5; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> <!-- remove --></b:if> <!-- Artikel Terkait thumbnails Blogger Blogspot Akhir -->

6. Perhatikan kode "var maxresult=5" itu menyatakan bahwa ada 5 artikel terkait yang akan ditampilkan, silahkan mengubah jumlah artikel terkait yang tampil sesuaikan dengan template blog anda. Hapus kode <b:if cond='data:blog.pageType == &quot;item&quot;'> bila ingin artikel terkait akan muncul juga di home page blog anda.

Setelah copy dan paste kode di atas, sekarang lanjutkan dengan mencari kode
<div class="post-footer">. Setelah menemukan, silahkan copy dan paste kode berikut di atas kode <div class="post-footer">

<!-- Artikel Terkait bagian 2 Thumbnails awal --> <!-- remove --><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=5&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='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArCL1Fw-IX0BgoIwRepfEdpJ8g269kquF0NReiduJ3ihq8UqwHmvzmk82_ywjb7NyA5WKJo5emxcnIBsXZLSQhFd6MQVAGJp-tO4-W3AQP_Ee9teGhpmWSqCRuEhroFttp_ochGy5YVOw/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Artikel Terkait bagian 2 Thumbnails akhir-->

7. Ubah angka Max-results=5, anda bisa mengubahnya menjadi 4 atau 6 atau sesuai dengan thems blog anda. Hapus juga kode bila ingin artikel terkait akan muncul juga di home page blog anda.

8. Langkah terakhir adalah simpan perubahan template anda dan lihat hasilnya.