Widget Related Post Thumbnail Responsive
Sudah beberapa hari ini MDF-Blog tidak update, dan pada kesempatan kali ini saya akan share cara memasang Widget Related Post Thumbnail Responsive. Related post yang berfungsi menampilkan artikel yang berkaitan atau yang masuk dalam kategori dari artikel yang kita baca. Mungkin banyak widget related post diluar sana yang bagus-bagus, tapi yang ini berbeda, bedanya hanya dibuat responsive saja. Kode widget saya dapatkan dari template MyExtraNews buatan MKR-Site.
Berikut cara pemasangan Widget Related Post Thumbnail Responsive.1. Masuk ke Akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML » centang
2. Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style type='text/css'>3. Kemudian cari kode <data:post.body/>, jika kode tersebut ada dua maka cari yang paling bawah atau kode yang kedua. Jika sudah menemukan kode tersebut kemudian Letakkan kode berikut ini dibawah kode <data:post.body/> tersebut
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8xo0bkuRCE8H8MzfaE2kBS2lD9mt4idpexH6awmnBbkylB-2jcqVw-1dZ4D63_E0DIPAvXzmKrImHwJ6ayG2RlToR_wMRfpmkiUT4Z0a0wCzsR_kS958sZmEeDRa9tUfZFviINm932Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZnzKJZHWnkRcmzXEQfCesk9q5WU2c0cRMftRV5uumOGEPjpnPTorEQRk9oZe5H4bWfjjlDyc5PoNQ13RWUWHulO_-Pif3sZmdMvPkPG732O1TN7PPWOgzcJBJoKm0px9G33cK_fCI_o/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:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";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:"Bitter",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:"";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>
<b:if cond='data:blog.pageType == "item"'>4. Simpan Template
<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",
containerSelector: "#relatedpostsx",
maxPosts: 4,
loadingClass: "loadingxx",
rlt_thumb: 300
});
});
//]]>
</script>
</div>
</div>
</b:if>
Silahkan anda sesuaikan sendiri
// Pengaturan
related_title: "Related Posts", //Judul widget
maxPosts: 4, //Jumalah artikel yang tampil maksimal sampai 10
Semoga Bermanfaat.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.