How To Create a Related post on BLog

Sebelumnya ane mau ucapin Gong Xi Fa Cay nie buat sahabat blogger.
Pada postingan kali ini, ane akan membagikan bagaimana cara membat related post pada blog dengan menggunakan gambar postingan kita.
tanpa basa-basi dan babibu lage, langsung saja ke topik utamanya.

Cara Membuat Related Post dengan Image Gambar Posting adalah sebagai berikut:

1. Edit HTML Template Blogger

Silahkan login ke blogger.com

Klik Rancangan/Design, klik  Edit HTML,  kemudian checkmark alias contreng Expand Widget Templates

Membuat CSS Related Post lebih dahulu, salin kode berikut ini

    <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: 1.6em;font-weight: bold;color: black;

    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

    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 src=’http://jiox.googlecode.com/files/sambung.js’ type=’text/javascript’/>

    </b:if>

kemudian pasang/letakkan di atas kode </head>

3. Tekan F3, kemudian search atau cari kode ini

    <div class=’post-footer-line post-footer-line-1′>

kalau tidak ada, alternatifnya cari kode ini

    <p class=’post-footer-line post-footer-line-1′>

kemudian salin dan letakkan kode dibawah ini, setelah kode di atas

    <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=6&quot;’ type=’text/javascript’/></b:if></b:loop><a href=’http://alkatro.com/’ style=’display:none;’>simple tips</a>

    <script type=’text/javascript’>

    var currentposturl=&quot;<data:post.url/>&quot;;

    var jumlahpost=7;var judulnya=”Artikel Terkait”;

    removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();

    </script>

    </div><div style=’clear:both’/>

    </b:if>

Keterangan:

text yang bercetak miring dan di bold : var jumlahpost=7

menandakan jumlah judul posting yang akan muncul, angka 7 silahkan sesuaikan dengan selera sahabat

Text  Artikel Terkait, adalah kalimat judul yang akan muncul di atas daftar artikel posting terkait pada blog sahabat,silahkan ganti dengan kalimat yang lebih romantis dan mendayu dayu :halah:

Kalau Sudah silahkan “Save Template”.

tanks for viiting my blog