Cara Memasang Featured Post Atau Recent Post Slider - Kali ini saya akan berbagi widget Featured Post Atau Recent Posts (Artikel Terbaru) dengan thumbinail atau gambar dan dapat bergeser (Slide) secara otomatis serta memiliki tampilan yang Responsive.
Widget ini berfungsi menampilkan artikel terbaru dengan thumbinail atau gambar dan dapat bergeser secara otomatis, widget ini hanya menampilkan artikel terbaru dan tidak berdasarkan label.
Penasaran ingin juga memasangnya di blog sobat, silahkan lakukan langkah-langkah berikut ini.
Cara Memasang Featured Post Atau Recent Post Slider dengan Gambar di Blogger
Pertama, Silahkan login ke blog sobat lalu buka menu TEMA setelah itu Edit HTML. Kemudian letakkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>
/* CSS Slider Recent Post */
#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.5);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:#f24a4a;margin:0;padding:12px 15px;}
#slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#fff;color:#222;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.5);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:#f24a4a;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;}}Cari kode </body> lalu letakkan kode dibawah ini tepat diatasnya.
<script type="text/javascript" src="https://cdn.rawgit.com/Deny-Listianto/Code/d384963e/Featured-Slide.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-SOBAT",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>Ganti tulisan URL-BLOG-SOBAT dengan url blog sobat.
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.
Selanjutnya, letakkan kode dibawah ini di antara kode HTML Header atau Menu Navigasi dengan Content blog.
<div id="featuredpost"></div>Contoh penempatan kode diatas adalah sebagai berikut :
Terakhir Simpan Tema dan lihat hasilnya.
Jika anda ingin memunculkan featured post slider ini hanya di halaman utama saja, silahkan bungkus kode HTMLnya dengan tag kondisional khusus halaman utama.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
/* Kode HTML Featured Post atau Recent Post Slider Slider */
</b:if>Contoh, penempatan kode diatas untuk kode HTML featured post slider adalah sebagai berikut :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>Demikian tutorial kali ini, semoga bermanfaat dan selamat mencoba.
