Konsep Artikel Terkait Dengan Gambar Berbeda

Mungkin Artikel Terkait yang satu ini sangat berbeda dari sekian banyak artikel terkait yang pernah Anda jumpai. Tampilan lebih unik dan tentu menarik, menggunakan dua js gabungan yang disatukan, tentu saja artikel terkait ini sedikit memberatkan loading. Jika menurut Anda berat silakan abaikan saja, karena saya sendiri hanya membagikan bagi yang perlu saja, dan jika menurut Anda berguna maka tinggal terapkan saja dengan dua langkah mudah ini.

Live Demo

Untuk CSS simpan diatas

]]></b:skin>

/* -- ARTIKEL TERKAIT -- */
#related-posts{clear:both;margin-top:20px;margin-bottom:20px;width:100%}
#related-posts h2{font-family:Arial;font-size:24px;font-weight:700;text-transform:uppercase;text-align:center;margin:20px 0;border-bottom:6px solid #1A5286;line-height:.1em;word-wrap: break-word;color:#fff;}
#related-posts ul li a,#related-posts li a .title h4{font-family: 'Arial', sans-serif;font-size:18px;font-weight:400;color:#fff;line-height:1.3em;transition:all .3s ease-in-out;}
#related-posts ul{margin-bottom:0;padding:10px 0;transition:all .3s ease-in-out;}
#related-posts ul li{list-style:none;overflow:hidden;float:left;height:170px;margin:5px;width:48.30%;position:relative;transition:all .3s ease-in-out;}
#related-posts li .thumbR{width:100%;height:170px;overflow:hidden;transition:all .3s ease-in-out;}
#related-posts img:hover{opacity:.7}
#related-posts img{height:170px;width:100%;background:#333}
#related-posts li{background:#333;transition:all .3s ease-in-out;}
#related-posts li .title{position:absolute;bottom:0;left;10px;background:rgba(0,0,0,0.5);width:95.55%;padding:6px 10px 6px 3px;transition:all .3s ease-in-out;}
#related-posts ul li:hover .title{background:#0D6E8B;bottom:0;left;10px;}
#artikel-terkait-leonyli {margin-top:-10px;line-height:1.4em;}
#artikel-terkait-leonyli a {font-family:"Arial",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#444;}
#artikel-terkait-leonyli a:hover,a:active{color:#0C2A6F;text-decoration:underline;}
#artikel-terkait-leonyli ul {width:101%;margin-bottom:20px;padding:0px;list-style:none;}
#artikel-terkait-leonyli ul li{float:left;height:100%;margin:0 5px;width:23.10%;}
#artikel-terkait-leonyli img{width:100%;height:70px;transition:all 400ms ease-in-out}
#artikel-terkait-leonyli img:hover{opacity:0.7;transition:all 400ms ease-in-out}
#artikel-terkait-leonyli ul li:nth-child(4n+4){margin-right:0;}

Untuk kode pemanggil biasanya letak js ini tepat pada bawah kode ini

<b:includable id='post' var='post'/>

atau

<div class='post-footer'>

<div id='related-posts'>
<script src='http://yourjavascript.com/13233511471/related-post-2.js' type='text/javascript'/>
<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;amp;callback=related_results_labels_thumbs&amp;amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=2;
var relatedpoststitle=&quot;<span style='background:#1A5286;padding:5px 20px;border-bottom:2px solid #1A5286'>Viewed Articles</span>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
<div style='clear: both;'/>
</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='artikel-terkait-leonyli'>
<script src='https://googledrive.com/host/0Bx1BDhFqeIKHSHFqcXo4SEpMM1k/' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>

Masih bingung? Tinggalkan komentar Anda dibawah ini.

Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini

Share thisPlus this