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>4. Disini ada dua pilihan apakah anda ingin memasangnya pada sidebar atau diatas halaman posting.
#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>
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>
# 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.
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.