Cara Membuat Slider Website 100% Responsive Di Blogspot

nirwanapedia - Halo Sobat Pedia, Pada Kesempatan Kali Ini Nirwanapedia Akan Membahas Bagaimana Cara Membuat Slider Website Responsive Di Blogspot. Bagi Seorang Blogger Keberadaan Slider (Slide Show) Pada Sebuah Website Merupakan Hal Yang Cukup Penting.

Slider Website Sendiri Berfungsi Untuk Menampilkan Sebuah Cuplikan Gambar Pada Postingan Blog Kita. Ada Berbagai Macam Tampilan Slider Yang Dapat Kita Gunakan Pada Sebuah Blog Maupun Website. Namun Tidak Semua Template Slide Show Tersebut Responsive.

Lantas Bagaimana Cara Membuat Slider Website Responsive Di Blogspot? Sobat Pedia Tidak Perlu Khawatir Karena Nirwana Pedia Akan Membagikan Template Slider (Slilde Show) Responsive Yang Bisa Sobat Pedia Gunakan Pada Website Maupun Blog Kalian.

Apa Itu Slider (Slide Show) Pada Website?

Slider Adalah Sebuah Fitur Yang Sering Digunakan Pada Sebuah Website Maupun Blog. Fitur Slider Tersebut Biasanya Menampilkan Beberapa Gambar Yang Dapat Berganti Secara Acak, Ataupun Pada Saat Sobat Pedia Mengklik Tombol Tertentu.

Gambar Yang Ada Pada Slider Tersebut Akan Melakukan Transisi Dengan Sendirinya. Seperti Yang Kita Ketahui, Sebagian Besar Blogger Lebih Sering Menyebutnya Dengan Istilah (Slide Show).

Contoh Image Slider In HTML

Image Slider Pada Umumnya Bersifat Otomatis Menampilkan Gambar Yang Ingin Kita Tunjukkan Kepada Pengunjung Blog Kita.

Gambar Tersebut Berfungsi Untuk Memberi Tahu Pengunjung Blog Kita Bahwa Postingan Tersebut Kita Rekomendasikan. Bisa Juga Digunakan Untuk Menampilkan Artikel Yang Paling Sering Di Baca, Dan Masih Banyak Lagi Kegunaan Slider Pada Sebuah Website Maupun Blog.

Berikut Ini Adalah Beberapa Contoh Penggunaan Image Slider Pada Sebuah Website

Source Image : https://smartslider3.com/blog/news-slider/

Cara Membuat Image Slider Website Responsive Di Blogspot

Setelah Sobat Pedia Mengetahui Apa Itu Slider, Selanjutnya Kalian Bisa Langsung Mencoba Cara Membuat Slider Website Responsive Di Blogspot Menggunakan Html.

Untuk Penggunaan Code Html Image Slider Pada Blog Sendiri, Sobat Pedia Tidak Perlu Menggunakan Code Tambahan. Karena Source Code Yang Akan Nirwanapedia Bagikan Kali Ini Sudah Support Semua Jenis Template Blog Yang Sobat Pedia Gunakan.

Untuk Langkah - Langkah Cara Membuat Slider Di Blogspot Adalah :

1. Silahkan Login Ke Dalam Akun Blogger Sobat Pedia
2. Selanjutnya Silahkan Pilih Layout (Tata Letak)
3. Pada Menu Tata Letak Silahkan Tambahkan Widget Baru
4. Pilih Widget HTML/Javascript
5. Selanjutnya Sobat Pedia Paste Kan Script Code Html Di Bawah Ini

<style>
    #featuredpost {margin:15px auto;margin-top:0px;}
    #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;border:1px solid #fff}
       #slides ul{height:300px}
    #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:17px;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:25px;left:0;}
    #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
    padding:0;font-family:&#39;Oswald&#39;;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-position:50% 40%;background-repeat:repeat-x;}
    #slides h4{position:absolute;bottom:5px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
    left:5px;padding:5px 5px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
    background:rgba(0,0,0,0.3);text-align:left;text-transform:uppercase;margin-right:0px;}
    #slides .label_text{font-size:12px;color:#fff;bottom:5px;z-index:3;left:5px;
    position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
    text-transform:uppercase;}
    #slides li:nth-child(2) .autname,#slides li:nth-child(3)  .autname{display:none;}.label_text{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:425px;margin-top:5px;}
      #slides li:nth-child(1){width:100%;height:65%}
      #slides li:nth-child(2){top:65%;height:35%;left:0;width:50%}
      #slides li:nth-child(3){left:50%;top:65%;width:50%;height:35%}
      #slides li:nth-child(4){display:none;}
      #slides li:nth-child(5){display:none;}
      }
    @media only screen and (max-width:480px){
    #slides li:nth-child(1) h4 {font-size:15px;line-height:20px;}}
    </style>
    <script>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
</script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"https://nirwanapedia.com/",
    MaxPost:20,
    idcontaint:"#featuredpost",
    ImageSize:300,
    interval:10000,
    autoplay:true,
    tagName:false
    });
    });
    //]]>
    </script>
    <div id="featuredpost"></div>

Silahkan Ganti "https://nirwanapedia.com" Sesuai Dengan Alamat URL Website Atau Blog Sobat Pedia. Sampai Disini Image Slider In Html Sudah Bisa Digunakan. Silahkan Klik Save Dan Lihat Hasilnya Pada Tampilan Blog Kalian. Kurang Lebih Tampilannya Nanti Akan Seperti Ini.

Oke, Jadi Aku Rasa Cukup Sampai Disini Dulu Tutorial Cara Membuat Slider Website Responsive Di Blogspot Kali Ini. Semoga Dapat Bermanfaat, Jika Ada Yang Kurang Paham Bisa Ditanyakan Di Kolom Komentar. Sampai Ketemu Di Artikel Selanjutnya.

Demo

Go to Link

Baca juga :