Widget Random Post Thumbnail Responsive

Pada kesempatan sebelumnya saya membahas tentang "Membuat Widget Related Post Thumbnail Responsive" atau posting yang ditampilkan secara acak, dan untuk kesempatan kali ini saya akan share tentang Widget Random Post Thumbnail Responsive, kode/scriptnya saya dapat dari template MyTimeLine buatan MKR-site. Random Post ini bersifat responsive yang mana daripada ketika ukuran browser discroll perbesar maka random post ini akan mengikuti ukuran responsive yang telah disetting sebelumnya. Widget ini cocok digunakan apalagi bagi website/blog yang responsive, saya sendiri lebih suka memasangnya diatas halaman posting karena widget ini yang ukuranya besar karena kalau dipasang dibagian sidebar sedikit ancur karena sidebar ukuran lebarnya kurang.

Untuk Pemasangannya ikuti langkah-langkah berikut ini:

1. Masuk ke Akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>

<style>
#randompostxx{margin:0 auto;}
#slides { overflow:hidden }
#slides ul,#slides li { padding:0; margin:0; list-style:none; position:relative }
#slides ul { height:250px }
#slides li { display:none; background-color:white; padding:2px; border:1px solid #CECECE; position:absolute }
#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4) { display:block }
#slides li:nth-child(1) { width:49.8%; height:100% }
#slides li:nth-child(2) { left:50.3%; width:24.8%; height:49.5% }
#slides li:nth-child(3) { left:75.5%; width:24.5%; height:49.5% }
#slides li:nth-child(4) { left:50.3%; top:51%; height:49%; width:49.8% }
#slides img { width:100%; height:100% }
#slides h4 { position:absolute; bottom:32px; width:100%; padding:0 10px; margin:0 -5px; font-size:18px; 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 }
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4 { font-size:14px }
#slides .label_text { position:absolute; z-index:3; bottom:10px; width:100%; padding:0 10px; margin:0 -5px; font-size:11px; color:white; -moz-text-shadow:0 1px 2px black; -webkit-text-shadow:0 1px 2px black; text-shadow:0 1px 2px black }
.randomnya .overlayx { position:absolute; top:0; left:0; border:4px solid #fefefe; width:100%; height:100%; z-index:2; background-color:rgba(0,0,0,0.9); background:rgba(0,0,0,0.9); color:rgba(0,0,0,0.9); -moz-box-shadow:0 0 3px #e0e0e0; -webkit-box-shadow:0 0 3px #e0e0e0; box-shadow:0 0 3px #e0e0e0; border:1px solid #ccc }
.randomnya .overlayx,#slides li { -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; transition:all .4s ease-in-out }
#slides li:nth-child(1) .overlayx { background-position:0 0 }
#slides .label_text span { margin-right:2px }
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname { display:none }
#slides .cmnum { position:absolute; background-color:#860000; padding:2px 3px; display:block; top:-5px; right:10px }
#slides .cmnum::after { content:" " ; width:0; height:0; border-width:1px 4px; border-style:solid; border-color:#860000 #860000 transparent transparent; position:absolute; top:100%; right:0 }
ul.randomnya li:hover .overlayx { background-color:rgba(158,44,44,0.6); background:rgba(158,44,44,0.6); color:rgba(158,44,44,0.6) }
#buttons { display:none }
#buttons{position:absolute;bottom:0;right:0}
#buttons a{display:inline-block;text-indent:-9999px;background-color:white;width:25px;height:17px;margin:0 0 0 7px;border:1px solid #CECECE;position:relative}
#prev::before,#next::before{content:"";width:0;height:0;border-width:5px 9px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-5px;margin-left:-15px;left:50%}
#next::before{border-color:transparent transparent transparent #535353;margin-right:-15px;right:50%;margin-left:auto;left:auto}
@media only screen and (min-width:768px) and (max-width:989px) {
#slides ul{height:200px}
#slides h4{font-size:15px}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
}
@media only screen and (max-width:767px) {
#slides ul{height:200px}
#slides h4{font-size:15px}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
}
@media only screen and (max-width:490px) {
#slides ul{height:450px}
#slides li:nth-child(1){width:100%;height:49.5%}
#slides li:nth-child(2){left:0;top:50%;width:49.5%;height:24.5%}
#slides li:nth-child(3){left:50.5%;top:50%;width:49.5%;height:24.5%}
#slides li:nth-child(4){left:0;top:75%;height:24.5%;width:100%}
}
</style>

4. Disini ada dua pilihan apakah anda ingin memasangnya pada sidebar atau diatas halaman posting.
Copy kode berikut ini di blog/website anda!

<div id='randompostxx'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
RandomPost({blogURL:"http://mdf-blog.blogspot.com",
MaxPost:6,
RandompostActive:true,
idcontaint:"#randompostxx",
ImageSize:200,
tagName:false
});
});
//]]>
</script>
<script src='https://boyz.googlecode.com/svn/JS/randomposts-responsive.js' type='text/javascript'/>
</div>

# Jika anda memasangnya diatas halaman posting letakkan kode tersebut dibawah atau diatas kode <div id='main-wrapper'> pada blog anda "Ingat! setiap template memiliki ID element posting yang berbeda-beda, jadi cari kode yang menunjukan ID element posting blog anda"
# Untuk pemasangan pada sidebar caranya tentu kalian sudah tau, Tata Letak » Tambah Gadget » HTML/JavaScript, masukkan kode tersebut kedalamanya lalu simpan.Silahkan anda sesuaikan sendiri, ganti http://mdf-blog.blogspot.com dengan alamat website/blog anda.
Semoga Bermanfaat.

Judul: Widget Random Post Thumbnail Responsive; Ditulis oleh Unknown; Rating Blog: 5 dari 5