Bagaimana Menambahkan RELATED POSTS pada Blogger dengan cara Mudah

Monica Rampo       Blogging    6 comments   

Related Posts

Bagaimana menambahkan RELATED POSTS pada Blogger dengan cara Mudah?

Berdasarkan pengalaman saya, cara mudah yang akan saya berikan langkahnya di bawah ini sangat mudah dimengerti jika kita mengikuti langkah-langkahnya dengan cermat.

Dan apakah related post itu sendiri? Related Post terdapat pada bagian bawah setiap postingan kita, dimana merupakan posting artikel dengan label/tag/kategori yang sama.

Related post bertujuan supaya pengunjung paling tidak mengetahui ada artikel terkait dengan artikel yang dibaca. Sehingga pengunjung akan betah untuk sedikit lebih lama berada di blog kita.

Pada blogger pengaturan related posts ini tidak secara otomatis sehingga kita harus menambah sendiri formatnya. Nah bagaimana menambahkannya pada blogger, ini bisa kita lakukan dengan cara mudah sesuai dengan langkah sebagai berikut :

1. Tampilkan blogger dashboard, klik Template dan pilih Edit HTML

   

   Edit HTML

2. Klik di bagian mana saja di dalam template dan tekan CTRL + F (seperti biasa kalau kita mau mencari kata) baca : Control F
3. Akan muncul search box di bagian kanan atas dan ketikkan atau copy paste kode ini : </head>, kemudian tekan Enter, lalu akan muncul tampilan seperti di bawah ini dimana kode </head> akan di highlight
   

   

   Memasukkan kode </head>

4. Copy paste kode di bawah ini persis sekali di atasnya  </head> 
5. <!--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://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
   <!-- remove --></b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->
6.  Note:
   - Untuk merubah lebar  dan tinggi thumbnails, modifkiasi nilai 100px yang berwarna merah
   - Untuk merubah warna dan ukuran judul related posts, ganti nilai yang berwarna biru  color:#222,   font-size:14px
   - Hapus  line berwarna violet jika menginginkan related posts muncul juga di homepage
7. Dengan cara yang sama dengan mencari kode </head> di atas maka kemudian cari kode berikut ini <div class='post-footer'> , dimana kode ini akan muncul dua kali, kita harus memilih dan berhenti di kode yang kedua, lalu copy dan paste kode no. 8 di bawah ini persis di atas kode <div class='post-footer'>

   

   Kode  <div class='post-footer'>

8. <!-- 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGPIHYqp-2v_8ohtstClJnqwcYDCrpr3TNwtuWc5SqbM-HAb5Bk8rh8k3Du0urONws8cwwKwiP3EyAo3EMPpXBJIKAwmgcOPWciD45CknU647DUP6ykawBASM9HaKBaiLdIDHSxznw_9C/s1600/best+blogger+tips.png'/></a>
   </b:if></b:if><!-- Related Posts with Thumbnails Code End-->
9.  Note:
   - Rubah nilai  5 dari max-results=5 dengan jumlah posts yang mau kita tampilkan
   - Jika kita menginginkan related posts muncul juga di homepage maka hapus lines berwarna violet
10. Save template

Hmmm... setelah membaca langkah-langkah di atas, bagaimana? mudah kan cara menambahkan RELATED POSTS pada blogger.

Mudah-mudahan bermanfaat ya...