Friday, September 26, 2014

Cara Membuat Related Post Bergambar (Thumbnails)

sohib sanam
Cara Membuat Related Post Bergambar (Thumbnails) - Setelah belajar membuat blog pasti ada banyak sekali hal yang bisa sobat lakukan untuk mempercantik blog salah satu nya adalah membuat related post atau artikle terkait  bergambar, relatedpost ini ada bermacam-macam dengan menggunakan style yang berbeda-beda salah satunya adalah related post yang bergambar sehingga tampilan related post ini akan mendukung blog sobat menjadi lebih cantik. bagi sobat yang mungkin ingin membandingkan tutorial cara membuat artikel terkait ini tanpa gambar bisa lihat panduannya disini artikel terkait tersebut tampak simpel karena hanya berupa text saja tidak. berupa gambar berikut adalah cara membuanya

Cara Membuat Artikel Terkait Dengan Gambar di bawah postingan


  1. Silahkan masuk ke bloggger lalu pilih TEMPLATE dan EDIT TEMPLATE 
    Cara Membuat Related Post bergambar (thumbnail)
  2. Cari kode </head> dan copy kode di warna biru bawah ini lalu letakkan di atas kode </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 kode yang berwarna merah dengan disesuaikan dengan blog sobat seperti panjang , dan tingginya.
  4. Lalu cari kode <div class='post-footer-line post-footer-line-1'> setelah itu copy dan pastekan kode 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 , semoga suka

1 comments: