Home » » Membuat Related Posts dengan Gambar Responsive

Membuat Related Posts dengan Gambar Responsive

Related Posts dengan Gambar
Cara Membuat Related Posts Widget for Blogger with Image Thumbnail. Tips Menampilkan Posting Terkait Berupa Gambar Thumbnail Responsive.

RELATED Posts, Related Articles, atau Posting Terkait merupakan salah satu widget yang wajib ada di blog. Umumnya ada di bawah tiap postingan.

Fungsi Related Posts adalah sebagai menu sekaligus internal links untuk meningkatkan pageviews dan mengurangi bounce-rate.

Untuk blog biasa, CB sarankan menggunakan related posts tanpa thumbnail gambar agar tidak memperlambat loading.

Namun, untuk blog toko online, blog foto, blog video, atau blog dengan posting yang didukung gambar yang keren, CB sarankan menggunakan Related Post plus Gambar Thumbnail agar lebih menarik sekaligus menjadi etalase di bawah postingan. (DEMO)

Cara Pasang

Tahapan Memasang atau membuat posting Terkait dengan Gambar Thumbnail di Bawah Postingan:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<!--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: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:4px solid #f2f2f2;width:100px;height:100px;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:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


Ket: yang merah itu ukuran gambarnya. Bisa diubah.

3. Copas kode berikut ini di atas kode <div class='post-footer'>
Jika kode tersebut ada ada dua, simpan di atas kode kedua!

<!-- 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> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

Ket: 
- Yang merah bisa diubah. 5 jadi 7 misalnya. 
- Related Posts bisa diganti menjadi Related Photos, Videos, atau "Produk Lainnya".

4. Save Template!

Tips membuat Related Posts dengan Gambar Thumbnail Responsive ini sudah diujicoba dan sukses! Lihat DEMO.

Untuk tutorial membuat related posts lainnya bisa dicek di Label Tags Related Posts. Good Luck! (http://contohblognih.blogspot.com).*

Thanks for reading & sharing Membuat Related Posts dengan Gambar Responsive

Previous
« Prev Post

6 comments:

Comment Page:
  1. Tks, berat buat admin CB ini dan juga secara tdk langsung kpd maskolis...atas berbagai macam tips trik dan apalah namanya yang intinya bagaimana mendesain dan mempercantik blog

    ReplyDelete
  2. Bos CB Pagi. Terima kasih atas tutorialnya. Tapi kenapa tidak bisa berubah max resultnya padahal saya telah mengganti angka 5 menjadi 8?

    ReplyDelete
    Replies
    1. artinya artikel terkaitnya yang se-label memang cuma ada lima, kan itu disusun berdasarkan label

      Delete
    2. Mas CB Blogger, kenapa iya related postnya tidak muncul diblog kami?

      Delete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox