Sunday, 2 September 2012

Membuat Artikel TerkaitHampir semua blog sudah memasang widget artikel terkait dan juga hampir semuanya telah membahas tentang cara membuat artikel terkait. Kali ini, ane juga akan membahas cara membuat artikel terkait yang cukup unik yaitu artikel terkait dengan thumbnail seperti yang ada di blog ini.


Nah, langsung aja yuk kita bahas cara memasangnya. Disini kita perlu memainkan sedikit keahlian dalam memodifikasi HTML (macam ahli IT aja ya). Langkah-langkahnya :



  1. Login ke blog sobat.
  2. Masuk ke "Template" -> "Edit HTML"
  3. Centang "Expand Widget Template"
  4. Cari kode <data:post.body/> agar lebih mudah dan cepat, gunakan CTRL + F
  5. Copy dan pastekan kode berikut tepat di bawahnya.

  6. <!-- 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://tamaneja.blogspot.com/2012/09/membuat-artikel-terkait-dengan.html'><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-->

  7. Kalau sudah cari lagi kode </head>
  8. Copy dan pastekan kode berikut tepat di atasnya 


  9. <!--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/AVvXsEgL5P5Q37yMooOTMCkB0Z7LRbK1gbAsBteMi4eZZQspXEATs6aGXMJS1iDdHP2AVwSc9JJ7-kIWoOVm2voCJ_t_2KvoAlqXn0A-VGH1ALP2V_I9YRM9SvK9BtFr3C2ycDh7GX2QpvXVtv0/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-->


CATATAN : Kode di atas inilah yang mempengaruhi tampilan artikel terkai blog sobat, sobat bisa ganti sesuai keinginan.

Artikel Lainnya : Judul pada widget
var maxresults=6 : jumlah artikel yang ditampilkan

Demikian deh. Heheheh :D




Untuk mendapat informasi lainnya dari kami

Jangan Lupa Klik Like Yo!!!

Gabung Yuk!!

Ikuti Lewat Email Ya

Dapatkan update informasi dari kami melalui email

Masukkan Email anda:

Delivered by FeedBurner


Statistik

Site Info
Display Pagerank
Buku Tamu

Banner iic blog