logo blog

Membuat Slide Recent Post Responsive

Membuat Slide Recent Post Responsive

Slide Recent Post

Cara Membuat Slide Recent Post Responsive

Mas Tamvan Kali ini akan berbagi cara memasang Slide Recent Post yang Responsive, walau scriptnya hasil nyolong dari ba Arlina, tapi tak apa kan kalo cuma sekedar berbagi.

Kalian harus Login dulu ke Bloggernya, kalo blm login ga bakalan bisa masang scriptnya.
Kalo Udah Login, masuk ke. Template -> Edit HTML.
Cari biar cepat gunakan [CTRL+F] search kode ]]></b:skin> atau </style>
Masukan CSS berikut di atasnya.
/* 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;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;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;
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;
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;}}

Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari </body> dan masukan Javascript di bawah ini tepat di atasnya!!
<script type="text/javascript" src="https://rawgit.com/mastamvan/backup/master/SlideRecentPost.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://mastamvan.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Ganti https://mastamvan.blogspot.com dengan URL blog KALIAN!!

Tahap Terakhir, Masukan HTML Berikut Dimana Saja, Terserah Sobat Tamvan.
<div id="featuredpost"></div>

Kalo pada demo itu saya letakan di atas kode <body>. Kalo kalian Terserah di mana saja, sesuka hati.
Nah sampai di situh sudah Tamvan Blognya :3 Tinggal di SAVE.
Bagi kalian yang ingin memasang Slide Recent Post Responsive hanya tampil di homepage saja, silahkan ganti kode HTML di atas dengan HTML berikut!!
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>

Ok Cukup sekian tutorial dari mas tamvan tentang Membuat Slide Recent Post Responsive ini, semoga bermanfaat, jangan lupa share dan komennya ya :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Slide Recent Post Responsive. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Previous
This Is The Oldest Page
Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Slide Recent Post Responsive. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

8 comments

Isa Hakim

Nice info gan,makasih yaa...ternyata sekarang baru tahu caranya.

Chairul Anwar

Wih keren nih. .
Ane coba dulu gan :D

Unknown

Thank you... nice perfect

Hasanudin Sultoni

Nice and perfect....Thank u.. deni riswana yang nanya di fb blogggerrrr indonrsia

Mas Tamvan

Wokeh gan. Semoga artikelnya bermanfaat n selamat berpuasa :v

Nusantara News

trims gan....salam sukses

wonk waras

jika cuma mau menampilkan di salah satu lebel saja gimana hu?

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon