Cara Membuat Related Article Hanya Gambar di Blog

Ditulis oleh: -

Related Article merupakan sebuah element / alat yang berguna untuk mempermudah pengunjung dalam menavgiasi ke artikel yang mirip atau dengan label yang sama. Related article ini banyak bentuknya, ada yang hanya list text, hanya gambar, gambar dengan text, dll. Kali ini saya akan membagikan cara membuat related article yang berupa hanya gambar. Related article ini pertama kali saya dapatkan dari blog-blog nya maskolis.

Tutorial

1. Letakkan Kode berikut tepat di bawah <data:post.body/>, bisa ke-2 atau ke-3. Biasanya kode yang ke-3
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<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=7&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>                
</div>
</div>
2. Letakkan CSS berikut tepat di atas ]]</b:skin>
/* RELATED */
#related{margin: 5px 0;
padding: 10px;
overflow: hidden;
background: #f8f8f8;
border: 1px solid #e2e2e2;}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:100%;float:none}
#related .related-posts p{font:bold 14px Arial;margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 1px;padding:2px 1px}
html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{overflow:hidden;border:2px solid #aaa;display:block;height:72px;position:relative;width:72px;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000;font:11px Arial}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
#related .subscribe{width:43%;float:left;color:#333;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://3.bp.blogspot.com/-kci2j8VxzNY/UPw8jUo8hzI/AAAAAAAABNw/xV9j7En07ew/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle}
3. Kemudian Simpan Template

20komentar:

  1. Replies
    1. curang nih admin nya :D
      ngeborong PERTAMAXX

      Delete
    2. hehehe,,mas bintang ada-ada aja,ckckkcc pertamax diblog sendiri,heheh jelas ane kalah cepet dapet pertamaxnya..

      Delete
  2. Langsung saya terapin diblog saya.
    makasih sob.

    ReplyDelete
  3. wahh sob, klo hanya gambar gimana pengunjung tau judulnya ? heheh

    ReplyDelete
  4. wahhh, jadi pengunjung harus arahkan ke gambar dulu dunk gan, klo mau tau judul...

    ReplyDelete
  5. simpen dulu nih..mungkin berguna nantinya

    ReplyDelete
  6. gan koq Di Blogg saya Kagak ada ]] nya hehe Mohon bantuannya :)

    ReplyDelete
  7. bagus juga sih bikin tampilan related article lebih simple dan menarik, sip deh kapan-kapan saya coba :)

    ReplyDelete
  8. Tampilannya jadi lebih simpel ya gan

    ReplyDelete
  9. met sore sob. trmksih banyak sob tutornya sangat membantu. salam kenal sob kalu ada waktu silakan main di tempat kami sob.

    ReplyDelete
  10. demox sprti yg sobat pake itu ya...? makasih *smile

    ReplyDelete
  11. Wah mastah berbagi ilmu nih :) oh iya mastah request gambar + cuplikanya dong :D

    ReplyDelete
  12. Thanks bro udah share,,,,saya udah punya sebelumnya.....

    ReplyDelete
  13. keren nih related postnya,, thanks for share

    ReplyDelete
  14. makasih ya saya hanya melihat saja soalnya saya tidak mau ganti2 related post .. kalau pake gambar kayak nya bikit loading tambah lambat mas..

    ReplyDelete
  15. Kalau template blog saya sih udah tersedia jadinya enak enggak perlu dimodifikasi lagi.

    Makasih ya.

    ReplyDelete
  16. Keren sih, tapi ane males sob gonta-ganti related post. Tapi makasih udah berbagi.
    Jangan lupa kunjungan baliknya sob

    ReplyDelete