Cara Membuat Widget Related Post Thumbnail Responsive

October 27, 2014

Malam sobat BagasUnix, mohon maaf saya jarang post beberapa hari ini karna lagi sibuk di dunia nyata. Apa itu Related PostRelated post yang berfungsi menampilkan artikel yang berkaitan atau yang masuk dalam kategori dari artikel yang kita baca. Mungkin kode Widget Related Post sudah tersebar banyak di luar sana yang beranekaragam, tapi yang ini berbeda, bedanya ialah hanya pada pembuatan responsive saja. Script widget ini saya dapatkan dari MDF-blog dan MKR-Site. Oke kita langsung saja ini dia caranya :

1.Masuk ke Akun Blogger anda.
2.Pada Dashboard pilih Template » Edit HTML
3.Lalu letakan kode di bawah ini untuk style (css) di sebelum ]]></b:skin>
<style type='text/css'>
#related-postsx {background-color:#FFF;margin-top:10px;-moz-box-shadow: 0px 0px 3px #e0e0e0;-webkit-box-shadow: 0px 0px 3px #e0e0e0;box-shadow: 0px 0px 3px #e0e0e0;border:1px solid #ccc;padding:5px;}
#related-postsx h4{background-color:#666;color:#fff;margin:0;padding:5px 7px;font-size:15px;font-weight:bold;-moz-text-shadow: 0 1px 0 black;-webkit-text-shadow: 0 1px 0 black;text-shadow: 0 1px 0 black;text-align:center;}
#related-postsx ul,#related-postsx li{padding:0;list-style:none;margin-top:3px;overflow:hidden;position:relative}
#related-postsx ul.loadingxx{width:100%;height:50px;background:transparent url(http://4.bp.blogspot.com/-qqwrk3XjD_8/UOMrfs1B5CI/AAAAAAAAHqs/ahtUZYGxN3E/s1600/loading-32-v1.gif) no-repeat 50% 50%}
#related-postsx li{width:49.6%;float:left;height:135px;margin:0 1px 2px;-o-transition:0.6s linear;-ms-transition:0.6s linear;-moz-transition:0.6s linear;-webkit-transition:0.6s linear;transition:all .4s ease-out;}
#related-postsx .overlayb{width:100%;height:250px;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);z-index:1;position:absolute;background-position:0 0;background-repeat:repeat-x;bottom:-50%;-o-transition:0.6s linear;-ms-transition:0.6s linear;-moz-transition:0.6s linear;-webkit-transition:0.6s linear;transition:all .4s ease-out;}
#related-postsx li:hover .overlayb{-ms-filter:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1;transition-duration:0s;}
#related-postsx img{width:100%;position:absolute;bottom:-40%;height:250px;}
#related-postsx strong{position:absolute;bottom:30px;color:white;font-family:&quot;Bitter&quot;,arial,sans-serif;padding:0 10px;z-index:4;width:100%;font-size:150%;font-weight:bold;-moz-text-shadow: 0 1px 2px black;-webkit-text-shadow: 0 1px 2px black;text-shadow: 0 1px 2px black;}
#related-postsx .infonya{position:absolute;bottom:10px;padding:0 10px;width:100%;z-index:3;color:white;-moz-text-shadow: 0 1px 2px black;-webkit-text-shadow: 0 1px 2px black;text-shadow: 0 1px 2px black;}
#related-postsx .dt{margin-right:5px;padding-right:5px;border-right:1px solid #E9E9E9}
#related-postsx .jkmt{position:absolute;right:10px;padding:2px 4px;top:-5px;background-color:#860000;z-index:3}
#related-postsx .jkmt::after{content:&quot;&quot;;width:0;height:0;border-width:2px 4px;border-style:solid;border-color:#860000 #860000 transparent transparent;position:absolute;top:100%;right:0}
@media only screen and (max-width:580px) {
#related-postsx li{width:49%;}
#related-postsx strong {font-size:15px;font-weight:bold;line-height:1.3em;bottom:35px;padding:0 3px}
#related-postsx .infonya{position:absolute;bottom:5px;padding:0 3px;}
#related-postsx strong {-moz-text-shadow: 0 1px 2px black;-webkit-text-shadow: 0 1px 2px black;text-shadow: 0 1px 2px black;}
#related-postsx .infonya {-moz-text-shadow: 0 1px 2px black;-webkit-text-shadow: 0 1px 2px black;text-shadow: 0 1px 2px black;}
}
@media only screen and (max-width:490px) {
#related-postsx strong {font-size:15px;font-weight:bold;line-height:1.3em;bottom:35px;padding:0 3px}
#related-postsx .infonya{position:absolute;bottom:5px;padding:0 3px;}
#related-postsx strong {-moz-text-shadow: 0 1px 2px black;-webkit-text-shadow: 0 1px 2px black;text-shadow: 0 1px 2px black;}
#related-postsx .infonya {-moz-text-shadow: 0 1px 2px black;-webkit-text-shadow: 0 1px 2px black;text-shadow: 0 1px 2px black;}
#related-postsx .dt{border-right:0px solid #E9E9E9}
.auty {display:none}
}
@media only screen and (max-width:479px) {
#related-postsx li{width:100%;height:150px;margin:0 0 3px}
#related-postsx .dt{border-right:1px solid #E9E9E9}
.auty {display:inline}
}
</style> 
4.Kemudian cari kode <data:post.body/> jika kode tersebut ada dua maka carilah yang paling bawah atau kode kedua. Kemudian kalau sudah ketemu copy kode ini di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://boyz.googlecode.com/svn/JS/related-postx-responsive.js' type='text/javascript'/>
<div id='relatedpostsx'>
<div id='artikelterkait'>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Related Posts", //judul widget
containerSelector: "#relatedpostsx",
maxPosts: 4, //jumlah artikel yang tampil (max 10)
loadingClass: "loadingxx",
rlt_thumb: 300
});
});
//]]>
</script>
</div>
</div>
</b:if> 
5.Simpan Template

Silahkan kalian edit-edit sendiri dengan kreasi kalian. ^^

Sumber : MDF-blog

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

2 comments

Previewnya yang mana gan? Ane penasaran deh

Balas

Wah iya gan blum ada priviewnya. Priviewnya nanti nyusul :d

Balas

Mohon berkomentar yang relavan dan tidak menaruh link hidup yah ^_^