Cara membuat Responsive Recent Slider Widget keren di Blogger

Cara membuat recent slider widget keren di blogger


Nah kali ini saya akan share bagaimana cara membuat recent widget blogger dengan fitur Slider style, Responsive, Elegant Style.
Note: meskipun ini hanya copy an dari web lain namun ini sudah saya optimalkan dan dijamin tidak akan rusak tampilannya.
 Berikut Tata Cara Nya:

1. Buka dashboard blogger --> klik tab layout --> Cari dan tambahkan widget html/javascript --> Kemudian paste kan kode berikut ini:


<script>
//<![CDATA[
$(document).ready(function () {
Recentpostbsd({
blogURL:"https://web-manajemen.blogspot.com",
MaxPost:8,
container:"#recentpostbsd",
ImageSize:500,
Time:9000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div-recent id="recent recent-wrapper">
<div-recent id="recentpostbsd"></div-recent>
  </div-recent>
<script async custom-element="div-recent" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script async custom-element="div-recent" src="https://cdn.rawgit.com/dimaslanjaka/bloggersstand/master/responsiveslider.js"></script>
<style amp-custom>
#recent {
  font-family: lato, oswald;
  background:#222;
  margin:0;
  padding:0;
}
#recent-wrapper {
font-family:Lato, sans-serif;
box-shadow:0 20px 20px -10px #111;
margin:7%;
}
/* CSS Responsive Slider Recent Post */
#recentpostbsd {margin:15px auto;}
#bsdslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#bsdslide ul,#bsdslide li{padding:0;margin:0;list-style:none;position:relative}
#bsdslide ul{height:320px}
#bsdslide li{width:50%;height:100%;position:absolute;display:none}
#bsdslide li:nth-child(1), #bsdslide li:nth-child(2), #bsdslide li:nth-child(3), #bsdslide li:nth-child(4), #bsdslide li:nth-child(5){display:block}
#bsdslide li:nth-child(1){left:0;top:0}
#bsdslide li:nth-child(2){left:50%;width:25%;height:50%}
#bsdslide li:nth-child(3){left:75%;width:25%;height:50%}
#bsdslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#bsdslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#bsdslide 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:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#bsdslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Roboto&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#bsdslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#8ED557;margin:0;}
#bsdslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#bsdslide li:nth-child(1) span.dy, #bsdslide li:nth-child(1) span.autname{display:none;}
#bsdslide a{display:block;width:100%;height:100%;overflow:hidden}
#bsdslide 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;}
#bsdslide 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;}
#bsdslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://4.bp.blogspot.com/-KFJSSIzWJJ0/Vtkt6FVQjuI/AAAAAAAAFfo/nxUUAjMB0dk/s1600/fade%2Bbloggersstand.png);background-position:50% 40%;background-repeat:repeat-x;}
#bsdslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Roboto&#39;;
left:10px;padding:5px 10px;color:#fefefe;z-index:3;line-height:20px;font-weight:normal;
background:rgba(40,40,40,0.6);text-align:left;text-transform:uppercase;margin-right:10px;}
#bsdslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(142,213,87,0.8);padding:3px 6px;font-family:&#39;Roboto&#39;;
text-transform:uppercase;}
#bsdslide li:nth-child(2) .autname,#bsdslide li:nth-child(3) .autname,#bsdslide li:nth-child(4) .autname,#bsdslide li:nth-child(5) .autname{display:none;}
#bsdslide .overlayx,#bsdslide li{transition:all .4s ease-in-out}
#bsdslide li:nth-child(1) .overlayx{display:none;}
#bsdslide li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#bsdslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #bsdslide ul{height:600px}
  #bsdslide li:nth-child(1){width:100%;height:50%}
  #bsdslide li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #bsdslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #bsdslide li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #bsdslide li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#bsdslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>

NOTE: ubah web-manajemen.blogspot.com dengan domain website anda
Save widget, dan Selesai.

Ini dia DEMO nya:

Semoga artikel ini dapat berguna bagi anda. Selamat mencoba...

0 Response to "Cara membuat Responsive Recent Slider Widget keren di Blogger"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel