Cara Mudah Membuat Slider (Slide Show) Keren di Blog, Cukup Satu Langkah

Santos el Salam

18 April 2020

Pemasangan Slider (Slide Show) di blog sebenarnya merupakan opsional, artinya boleh dipasang dan boleh tidak. Jika masih ada banyak ruang di blog anda, tidak ada salahnya anda memasang fitur ini agar tampilan blog menjadi semakin menarik. Namun hendaknya pertimbangkan juga faktor kecepatan loading blog anda. Jika kecepatan loading masih memadai, silahkan bisa pasang fitur slider ini di blog anda.

Pemasangan slider biasanya digunakan untuk menampilkan beberapa artikel terbaru, artikel-artikel pilihan, atau artikel-artikel tertentu berdasarkan kategori yang dipilih. Dengan desain gambar bergerak, artikel-artikel tersebut pun akan ditampilkan secara bergantian tergantung pengaturan yang diinginkan. 

Memang blog akan terlihat lebih cantik, ramai dan lebih berwarna kalau dipasangi fitur slider ini. Tampilan menarik ini tentunya akan membuat pengunjung semakin tertarik dan penasaran untuk membaca artikel yang sepintas ditampilkan pada slider tersebut. Ada banyak tutorial mengenai cara pemasangan slider (slide show) yang dibagikan para blogger di luar sana.

Masing-masing slider tampaknya memiliki kelebihan dari segi tampilan yang ditawarkan. Ada slider gambar ditampilkan berjejer dan kemudian bergerak maju bergantian. Atau ada juga gambar slider ditampilkan secara bergantian dalam satu kotak gambar seperti slider yang pernah saya bagikan pada artikel terdahulu. Jika berminat, silahkan baca: Cara Membuat Slider (Slide Show) Keren, Ringan, Manual dan Mudah Edit di Blog

Seperti pada tutorial pemasangan slider (slide show) yang pernah saya bagikan sebelumnya, untuk cara pemasangan slider ini memang biasanya cukup rumit bagi yang tidak terbiasa mengutak-atik kode script di dalam template html.

Agar slider berfungsi seperti yang diharapkan, beberapa kode script memang mesti diletakkan di tempat-tempat tertentu dengan terlebih dahulu mencari beberapa kode seperti kode </style>, </head>, atau kode </body>. Tentunya ini akan cukup ribet sehingga sebagian orang malas kalau harus melakukannya. Tidak jarang, mereka pun akhirnya tidak jadi memasang slider di blognya. 

Nah, pada kesempatan kali ini, saya akan membagikan cara mudah untuk memasang slider keren di blog tanpa harus bersusah payah mengedit html atau mencari kode ini itu di html template. Bahkan cukup dalam satu langkah anda sudah bisa memasang gambar bergerak bergantian (slide show) keren di blog hanya lewat menu layout atau tata letak di dashbord blogger anda.

Kode script ini sebetulnya saya dapat dari Blog Orang IT dengan sedikit saya modifikasi. Fitur slider ini bisa anda atur fungsinya menjadi seperti widget recent posts atau menampilkan artikel-artikel tertentu sesuai kategori pilihan anda. Fitur slider ini juga responsive sehingga tampilannya akan menyesuaikan dengan ukuran layar penggunanya. Untuk tampilannya seperti berikut ini:

Bagaimana Cara memasangnya?. Berikut langkah-langkahnya:

1. Buka akun blogger anda. 

2. Pilih menu layout (tataletak). 

3. Lihat di bagian atas element Blog Post, silahkan klik pada tambahkan gadget (add a gadget) . 

4. Kemudian pilih html/javascript dan masukkan kode berikut ini pada kotak tersedia untuk memasang slidernya:

<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://bloganda.blogspot.co.id/",

    MaxPost:20,

    idcontaint:"#featuredpost",

    ImageSize:300,

    interval:10000,

    autoplay:true,

    tagName:false

    });

    });

    //]]>

    </script>

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

Keterangan:

• Silahkan ganti tulisan berwarna merah dengan Url alamat blog anda. 
• Pengaturan di atas berfungsi layaknya widget Recent Posts. Jika ingin menampilkan artikel-artikel berdasarkan label tertentu, anda bisa ganti kode false (ditandai warna hijau) dengan label (kategori) pilihan di blog anda. Contoh: tagName:"Kesehatan"
• 10000 (warna biru) untuk kecepatan pergerakan slider. Anda bisa merubahnya agar lebih cepat atau lebih lambat. Misal ganti menjadi 8000 agar lebih cepat atau 12000 agar lebih lambat, dst. 

5. Jika sudah diatur semuanya, silahkan simpan dan lihat hasilnya. 

Kalau anda menghendaki agar tampilan slider ini hanya muncul di tampilan beranda (home) blog saja, silahkan baca postingan saya berikut ini: Cara Menyembunyikan atau Memunculkan Widget Hanya pada Tampilan Beranda Blog. Demikian. Semoga bermanfaat. 

Labels: Blogging

Thanks for reading Cara Mudah Membuat Slider (Slide Show) Keren di Blog, Cukup Satu Langkah. Please share...!

Facebook

Twitter