Cara Mudah Membuat Recent Post Berbentuk Sliding di Blog

GUBUK KANG ARIF >> Hai .. hai sobat blogger semua ketemu lagi, kali ini saya akan menshare tentang cara mempercantik blog kalian,
terutama bagi kalian yang masih menggunakan template standar bawaan pabrik eh salah bawaan blogger.

cara yang akan saya share disini adalah membuat tampilan recent post atau post terkini dari blog kalian menjadi tampilan yang lebih kece dan enak dilihat, bagi kalian yang suka mengoprek tampilan blog kalian dengan sesuatu yang unik, saya sarankan untuk menambahkan cara yang saya bahas ini kedalam blog kalian.

Tampilan recent post nya berbentuk slider atau sliding, tapi bukan yang biasa dipasang diside bar lho ya. tampilan ini bisa sobat pasang di bagian atas posting sehingga blog sobat terkesan seperti blog berita dengan tampilan gambar yang dominan, selain itu script tampilan ini juga memiliki banyak kelebihan lain:

BACA JUGA: Cara Mudah Membuat SideBar MultiTab

1. Script HTML yang digunakan kali ini merupakan script yang responsive sehingga jangan khawatir akan memperberat tampilan blog kamu.

2. Script ini tidak perlu memasukkan script HTML tambahan kedalam script template, cukup dimasukkan kedalam widget HTML dan sobat taruh terserah dimanapun letaknya diblog sobat.

So, jika ada sobat yang tertarik dan ingin menerapkan tips ini langsung aja copy pastekan kode HTML dibawah ini

<style>
#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;font-family:&#39;Oswald&#39;;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;font-family:&#39;Oswald&#39;;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;font-family:&#39;Oswald&#39;; 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;font-family:&#39;Oswald&#39;; 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;}} </style> <script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"#####", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script> <div id="featuredpost"></div>

letakkan di widget HTML sobat, ganti tulisan warna biru dengan alamat web sobat, dan tulisan warna merah dengan jumlah post yang ditampilkan sesuai dengan keinginan sobat.

gimana simpel kan sobat, semoga bermanfaat dan keep blogging ... caaooo