Cara Menciptakan Related Post Bergambar (Thumbnails)

Diposting pada

Cara Membuat Related Post Bergambar (Thumbnails) – Setelah belajar menciptakan blog niscaya ada berbagai hal yang dapat teman lakukan untuk mempercantik blog salah satu nya yaitu menciptakan related post atau artikle terkait  bergambar, relatedpost ini ada majemuk dengan memakai style yang berbeda-beda salah satunya yaitu related post yang bergambar sehingga tampilan related post ini akan mendukung blog teman menjadi lebih cantik. bagi teman yang mungkin ingin membandingkan tutorial cara menciptakan artikel terkait ini tanpa gambar dapat lihat panduannya disini artikel terkait tersebut tampak praktis alasannya yaitu hanya berupa text saja tidak. berupa gambar berikut yaitu cara membuanya

Cara Membuat Artikel Terkait Dengan Gambar di bawah postingan

  1. Silahkan masuk ke bloggger kemudian pilih TEMPLATE dan EDIT TEMPLATE 
     niscaya ada berbagai hal yang dapat teman lakukan untuk  Cara Membuat Related Post Bergambar (Thumbnails)

  2. Cari instruksi </head> dan copy instruksi di warna biru bawah ini kemudian letakkan di atas instruksi </head> tadi
    <!–Related Posts with thumbnails Start–>
    <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:2px solid #f2f2f2;width:100px;height:80px;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:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
    #related-posts .related_img:hover{border:2px 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’ />
    </b:if>
    <!–Related Posts with thumbnails End–>
  3. Ganti instruksi yang berwarna merah dengan diadaptasi dengan blog teman ibarat panjang , dan tingginya.

  4. Lalu cari instruksi <div class=’post-footer-line post-footer-line-1′> setelah itu copy dan pastekan instruksi warna biru di bawah ini di bawah kode    <p class=’post-footer-line post-footer-line-1′>

    <!– 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> <!– Related Posts with Thumbnails Code End–>

  5. Simpan Template
Selamat mencoba artikel terkait dengan gambar nya , biar suka