CARA MEMBUAT "ARTIKEL LAINNYA" DI BLOG

Hallo semua, selamat datang di blog ini. Kali ini saya akan membahas mengenai membuat Widget "ARTIKEL LAINNYA" atau juga sering disebut "ARTIKEL  TERKAIT". Mungkin sudah banyak blog lain yang membahas mengenai cara membuat widget ini.  Mungkin ada yang menyarankan membuat widget ini menggunakan bantuan LinkWithin. Pada dasarnya menggunakan LinkWithin bisa saja, akan tetapi kekurangannya ialah pengunjung diarahkan untuk redirect terlebih dahulu sebelum diarahkan ke artikel kita yang lainnya. Memang ini menyebalkan dan terkesan ga praktis.. Ya gak bro?

Eh.. Tapi tenang ternyata caranya ga cuma itu loh! Masih ada cara lainnya, yakni cara manual dengan mengubah kode html web blog kita. Hmm.. Gimana Caranya ya? Ok langsung aja yuk kita ke KTP, eh.. TKP!!

1. Cara pertama yang harus Login ke Blog kita dulu
2. Buka Template > Edit HTML (Jangan lupa centang kolom Expand Template Widget)
3. Cari kode <data:post.body/>, gunakan Ctrl+F untuk mempermudah pencarian.
4. Copy kode berikut dibawah <data:post.body/>
   
   
   
   Kode:

    <!-- Related Posts with Thumbnails Code Start-->
   <!-- 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=6&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://ikubarunovryan.blogspot.com/'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
   </b:if></b:if>
   <!-- Related Posts with Thumbnails Code End-->

5. Apabila sudah meng-copy kode tersebut, cari lagi kode </head&gt;, lalu copy kode tersebut diatas </head>.
   
   
   
   Kode:
   

   <!--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:center;
   text-transform:none;
   height:100%;
   min-height:100%;
   padding-top:5px;
   padding-left:5px;
   }
   
   #related-posts h4{
   font-weight: bold;
   color: black;
   font:normal 14px Arial;text-transform:none;
   margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
   }
   margin-bottom: 0.75em;
   margin-top: 0em;
   padding-top: 0em;
   }
   #related-posts a{
   color:black;
   }
   #related-posts a:hover{
   color:black;
   }
   
   #related-posts a:hover {
   background-color:#d4eaf2;
   }
   </style>
   <script type='text/javascript'>
   var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRE3ztmP86Amn_2X0QV120cpk-elNaRdX2u5jbW2ArGzHLaR8w3e0GFwLt_z0372wvWBLcAdOVXmpuwp_L0iTpRw-_rJQh14iuTi_06jyxRyd9VpS4q8_6MS3D7DPIu2QsvZWdQeV3HA4/s400/noimage.png&quot;;
   var maxresults=6;
   var splittercolor=&quot;#d4eaf2&quot;;
   var relatedpoststitle=&quot;Artikel Lainnya&quot;;
   </script>
   <script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
   <!-- remove --></b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->

6. Kemudian Simpan Template, dan ARTIKEL LAINNYA (Related Artcle) sudah terpasang di blog Anda.

Referensi:
http://www.blogdhika.com

Share this: