 |
| Recent Post with Responsive Slider Effect |
Cara Memasang Artikel Terbaru – Recent Post Slider Responsive
Cara memang recent post dengan gaya slider di semua halaman blog mungkin layak sobat coba. Dengan desain tampilan elegan, namun tetap responsive dibuka dengan media apaun.
Sama halnya cara memang recent post atau artikel terbaru di blog yang baru saja saya tuliskan, cara ini sedikit berbeda. Tidak lagi hanya menambahkan gadget baru, namun hanya sedikit waktu untuk membuka template melalui mode html. Tentu saya yakin sobat pasti bisa.
Cara Memasang Artikel Terbaru – Recent Post Slider Responsive di Blog dengan CSS
/* CSS Responsive Slider 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;font-family:'Oswald';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:'Oswald';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:'Oswald';
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:'Oswald';
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;}}
4. Copas kode di bawah ini tepat di atas kode
<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:”URL-BLOG-ANDA”,
MaxPost:8,
idcontaint:”#featuredpost”,
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
5. Ganti kode yang berwarna merah dengan alamat url blog sobat
6. Copa kode di bawah ini dan letakkan di atas kode elemen content-wrapper atau di bawah menu-wrapper
<div id=”featuredpost”></div>
7. Save template
Mudah kan? Sama halnya dengan recent post atau artikel terbaru lainnya, tips kali ini hanaya saja lebih atraktif dengan keberadaan gambar thumbnail slider di semua halaman blog.
Demikian tips kali ini. Semoga dengan adanya recent post atau artikel terbaru desain slider responsive, bisa membuat pengguna atau usser semakin betah berada di blog sobat.
Salam.
Source:
http://www.arlinadzgn.com/2014/10/memasang-responsive-recent-post-slider.html
