Cara Menambahkan Recent Post Slider Di Blog

Cara Menambahkan Recent Post - Mungkin dari sebagian kawan-kawan blogger sudah tidak asing lagi ya dengan istilah apa itu recent post ? yaps betul sekali. recent post adalah artikel terbaru. Untuk settingan template pada umumnya letak dari recent post biasanya berada di sidebar/samping. Tetapi, letaknya bisa diubah dimana kita ingin meletakannya. Pada tutorial kali ini YogiKeling SITE akan memberikan script agar tampilan recent post blog kalian lebih keren dan kece. Untuk contohnya seperti gambar diatas ya :)

Untuk scriptnya YogiKeling SITE siap berbagi didapat dari salah satu blogger alamatnya lupa maaf. Bentuk scriptnya simple, kita tidak perlu menginput artikel apa yang ingin ditampilkan karena ini sudah otomatis tampil artikel kita. Mungkin kita hanya mengganti url dengan url blog kita. Untuk lebih jelasnya bagaiman simak langkah-langkahnya dibawah ini.

Cara Menambahkan Widget Recent Post Keren

1. Login kedalam dashboard blogger kalian. blogger.com

2. Masuk ke menu Tata Letak - Tambahkan Gadget

3. Pilih HTML/Javascript

4. Copy script recent post 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:'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;}}

</style>

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"https://yogikeling.blogspot.co.id/",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:true,

tagName:false

});

});

//]]>

</script>

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

4. Pastekan didalam kolom gadget yang sudah ditambahkan tadi.

5. Jangan lupa ganti URL yang warna merah itu dengan URL blog kalian ya

6. Jika sudah SIMPAN dan lihat hasilnya. Kalu berhasil pasti keren deh hasilnya :)

Mungkin cukup sekian tutorial mengenai cara menambahkan recent post slider otomatis responsive keren diblog. Semoga tutorial kali ini bermanfaat dan dapat mempercanti blog kalian. Jangan lupa baca artikel yang lainnya. Apabila kalian gagal dalam mempraktekan tutorial diatas tinggalkan keluh/kesah kalian di kolom komentar. See you next artikel.

Salam Blogger Lampung

Cara Menambahkan Recent Post Slider Di Blog

5 Responses to "Cara Menambahkan Recent Post Slider Di Blog"