Memasang Responsive Recent Post Slider
Sebelum nya Tutorial ini dari Arlina Design ane copy abis gk tau mau posting apa hehehe....
oke..
Langsung saja dengan cara penerapannya.
1. Silahkan login ke blog anda > Template > Edit HTML
Kemudian salin dan pastekan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/css?family=Oswald);
#slides * {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#slides ul,#slides li {
list-style:none;
position:relative;
margin:0;
padding:0;
}
#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%;
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;
padding:10px 10px 10px 90px;
}
#slides li:nth-child(1) .label_text {
font-size:30px;
display:block;
bottom:10px;
left:10px;
font-family:Oswald;
box-shadow:5px 3px 0 rgba(0,0,0,0.2);
padding:0;
}
#slides li:nth-child(1) span.dd {
display:block;
font-size:30px;
background:#ff6553;
margin:0;
padding:12px 15px;
}
#slides li:nth-child(1) span.dm {
display:block;
font-size:14px;
background:#333;
color:#fff;
text-transform:uppercase;
margin:0;
padding:5px 21px;
}
#slides a {
display:block;
width:100%;
height:100%;
overflow:hidden;
}
#slides img {
display:block;
width:100%;
height:auto;
border: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 .6s linear;
padding:0;
}
#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 .3s linear;
}
#slides .overlayx {
width:100%;
height:100%;
position:absolute;
z-index:2;
background-position:50% 40%;
background-repeat:repeat-x;
}
#slides h4 {
position:absolute;
bottom:40px;
font-size:13px;
font-family:Oswald;
left:10px;
color:#f9f9f9;
z-index:3;
line-height:20px;
font-weight:400;
background:rgba(41,41,41,0.7);
text-align:left;
text-transform:uppercase;
margin:0 10px 0 0;
padding:5px 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);
font-family:Oswald;
text-transform:uppercase;
padding:3px 6px;
}
#slides .overlayx,#slides li {
transition:all .4s ease-in-out;
}
#slides li:hover .overlayx {
opacity:0.1;
}
#slides li:nth-child(1) span.dy,#slides li:nth-child(1) span.autname,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname,#slides li:nth-child(1) .overlayx {
display:none;
}
@media only screen and max-width800px{
#slides li:nth-child(1) h4 {
font-size:18px;
line-height:24px;
}
}
@media only screen and max-width600px{
#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-width480px{
#slides li:nth-child(1) h4 {
font-size:13px;
line-height:16px;
}
}Pada CSS di atas menggunakan font Oswald, silahkan ganti dan sesuaikan dengan tema blog anda.
2. Salin dan pastekan kode di bawah ini tepat di atas </body>
<script type="text/javascript" src="https://cdn.rawgit.com/Arlina-Design/frame/18274fc5/slider-posts.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>Ganti tulisan URL-BLOG-ANDA dengan url blog anda.
3. Salin dan pastekan kode di bawah ini dimana saja bebas. Bisa sebelum content-wrapper atau di bawah menu-wrapper
<div id="featuredpost"></div> 4. Terakhir simpan template dan lihat hasilnya.
Jika anda ingin memunculkan recent post slider ini hanya di halaman utama saja, silahkan bungkus kode HTML-nya dengan tag kondisional khusus halaman utama. Contoh :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if> Keterangan :
- MaxPost : Jumlah semua postingan yang akan tampil dalam list
- ImageSize : Ukuran maksimal dari gambar (Semakin besar ukurannya maka akan semakin jelas kerapatan pixel gambar yang akan tampil, namun akan semakin banyak waktu yang dibutuhkan dalam proses memuat halaman)
- Interval : Waktu yang dibutuhkan ketika post berpindah (Contoh : 10000 yang berarti 10 detik)
- Autoplay : (True) Post akan berpindah secara otomatis, (False) Post tidak akan berpindah secara otomatis.
Penginapan Netral
If you spend time trying to be good at everything, you will never be great at anything
