Sunday, July 27, 2014

Update terbaru, membuat artikel terkait bergambar

Banyak di internet dijumpai cara membuat artikel terkait dengan gambar, namun yang ini berbeda dari yang biasa kita cari di search engine google.

Hasilnya seperti gambar diatas. atau demo klik disini.


Langsung saja pada langkah-langkah pembuatannya.
  1. Login pada blogger.com
  2. Pada menu sebelah kiri, klik template.
  3. Copy kode dibawah ini dan letakkan dibawah </head>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts{float:center;margin-top:10px; text-transform:none;padding:0px;display:inline-block;}
    #related-posts a:hover{-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;;
        filter: alpha(opacity=80);
        -moz-opacity:0.8;
        -khtml-opacity: 0.8;
      opacity:0.8;}
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
    var maxresults=9;
    var splittercolor=&quot;#c5f7d8&quot;;
    var relatedpoststitle=&quot;&quot;;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    </b:if>
  4. Cari kode <data:post.body/>, gunakan CTRL +F untuk mempermudah pencarian.
  5. Setelah menemukan kode <data:post.body/>, copy kode dibawah ini dan letakkan dibawah kode <data:post.body/>.
    <div id='related-posts'>
    <h4>Artikel Terkait</h4>
    <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>
  6. Simpan template.
  7. Lihat hasilnya. Kalau masih belum berhasil, silahkan berikan komenter pada kolom dibawah.