Cara Modifikasi Recent Post Menjadi Slide Recent Post Responsive

Slide adalah istilah dimana bisa diartikan sebagai gambar bergerak. Dalam kesempatan kali ini saya mencoba menerapkan istilah slide ini pada recent post yang akan membuat effect bergantain secara periodik pada recent post yang ada pada entri posting blog. Dengan menerapkan effect ini diharapkan akan membuat tampilan blog menjadi lebih cantik dan menarik dan tentunya lebih responsive.

Penempatan kode yang sangat gampang dan tidak rumit, meskipun bagi teman-teman yang masih baru dalam hal ini, sama seperti penulis yang hanya bisa copas artikel punya teman sendiri.

Agar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawa ini dengan seksama. Langkah yang harus dilakukan adalah:

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

/* Skin Design Slide Recent Post */

#featuredpost {margin:15px auto;}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:320px}

#slides li{width:50%;height:100%;position:absolute;display:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50%;width:25%;height:50%}

#slides li:nth-child(3){left:75%;width:25%;height:50%}

#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;

padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}

#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;

padding:0;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}

#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;

background:#ff6553;margin:0;}

#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}

#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}

#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}

#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;

left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}

#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;

position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;

text-transform:uppercase;}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:nth-child(1) .overlayx{display:none;}

#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){

#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){

  #slides ul{height:600px}

  #slides li:nth-child(1){width:100%;height:50%}

  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}

  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}

  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}

  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){

#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Letakkan kode dibawah ini tepat diatas kode </body>.

<script type="text/javascript" src="https://cdn.rawgit.com/ardezign/js/bb2d88a2/sk-slider.js"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"https://sk1ndesign.blogspot.com",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:true,

tagName:false

});

});

//]]>

</script>

Ganti url https://sk1ndesign.blogspot.com diatas dengan url kamu.
Letakkan kode dibawah ini dibagian mana slide recent post tersebut ingin ditampilkan.

<div id="featuredpost"></div>

Kemudian SAVE dan dan silahkan lihat hasilnya.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.