Membuat Slider di Blogspot Dengan Script (Otomatis atau Manual)
Berikut akan saya bagikan tentang cara membuat slider di blogspot dengan script untuk yang otomatis ataupun yang manual, tentunya dengan cara yang paling gamang, yaitu dengan copas saja.
Otomatis disini maksutnya otomatis mengikuti recent post sedangkan yang manual, kita upload foto di cloud drive, atau didalam salah satu halaman blogger, kemudian copas image link-nya.
Biasanya image slider ini dipakai sebagai etalase blog, juga sebagai alat untuk memancing pengunjung untuk dapat menjelajah blog dan memperkenalkan postingan kita didalamnya.
OK, tanpa basa-basi silakan ikuti petunjuk dibawah ini!
Slider di Blogspot Otomatis
Ada 2 cara yang akan saya bagikan, yang pertama full image, dan yang ke-2 dengan ukuran kecil sehingga bisa dipasang di sidebar.
1. Image Slider Otomatis di Blogspot
Pemasangan CSS
Silakan menuju menu Tema > Edit HTML kemudian pasang CSS ini di antara kode <b:skin> sampai ]]></b:skin>. Terserah mau ditaruh dimana, kalau saya biasanya biar rapi saya urutkan berdasarkan urutan widget.
/* Start Slider */.cycle-slideshow{width:100%;height:400px;display:block;text-align:center;z-index:0;overflow:hidden;margin:0;position:relative;}.cycle-slideshow ul{width:100%;height:100%;height:100vh;padding:0;}.cycle-slideshow li{width:100%;height:100%;margin:0;padding:0;}.cycle-prev,.cycle-next{position:absolute;top:0;width:11%;opacity:.92;filter:alpha(opacity=92);z-index:800;height:100%;cursor:pointer;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;opacity:0;}.cycle-slideshow:hover .cycle-prev,.cycle-slideshow:hover .cycle-next{opacity:1;}.cycle-prev{left:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;border:1px venture #fff;height:30px;width:30px;font-size:16px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;}.cycle-next{right:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;border:1px venture #fff;height:30px;width:30px;font-size:16px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s}.slide-inside{display:table;vertical-align:middle;height:100%;padding:0;width:100%;background:transparent;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-inside:hover{background:rgba(255,255,255,.1)}.slide-title,.slide-title a:hover{display:table-cell;vertical-align:middle}.slide-image{background-position:center;background-size:cover;height:100%;width:100%}.slide-cat{display:inline-block;margin:0 3px 13px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:2px;padding-bottom:2px}.slide-h2{color:#fff;font-size:24px;line-height:1.4em;font-weight:400;text-transform:uppercase;letter-spacing:3px;margin-bottom:16px;display:block;z-index:9}.slide-excerpt{color:#fff;font-size:12px;font-weight:300;letter-spacing:1px;padding:0 0 20px;display:none}.slide-divider{border-top:2px solid;display:block;max-width:50px;margin:0 auto;color:#fff}.slide-more{display:none;color:#fff;padding:10px 15px;margin:25px machine 10px;font-size:10px;text-transform:uppercase;letter-spacing:2px;border:2px venture #fff;display:inline-block;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-more:hover{background:#fff;color:#000}#crosscol-overflow{margin:0 auto;}.mobile .cycle-slideshow{height:250px}.mobile .slide-resume,.mobile .slide-more{display:none;}
Pemasangan Javascript
Langkah selanjutnya tambahkan javascript berikut diatas kode </head>. Seperti biasa, saya urutkan sesuai urutan kode js masing-masing widget. Catatan: kode ini bisa ditaruh diatas </head> atau di atas </body>. Tapi terkadang ada yang bilang agar halaman cepat terload, kita taruh diatas </body> namun keputusan terserah anda.
<!-- include Slider --><script> //<![CDATA[ var showpostthumbnails=!0;var showpostsummary=!0;var random_posts=!1;var numchars=100;var numposts=4;function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i} if(random_posts==!0){indexPosts.sort(function(){return 0.5-Math.random()})} if(numposts>numPosts){numposts=numPosts} for(i=0;i<numposts;++i){var entry=json.feed.entry[indexPosts[i]];var posttitle=entry.title.$t; if(typeof cate=='undefined'){var cate="uncategorised"}else{var cate=json.feed.entry[i].category[0].term} for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}} if("content" inward entry){var postcontent=entry.content.$t} s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl=d}else var thumburl='//placehold.it/1000x300';document.write('<li><div class="cycle-slideshow"><a href="'+posturl+'"><div class="slide-image" style="background-image:url('+thumburl+');"/><div class="slide-inside"><div class="slide-title">');document.write('<div class="slide-container">');document.write('<div class="slide-cat">'+cate+'</div>');document.write('<div class="slide-h2">'+posttitle+'</div>');var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==!0){if(postcontent.length<numchars){document.write('<div class="slide-excerpt">'+postcontent+'... </div>')}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontentl=postcontent.substring(0,quoteEnd);document.write('<div class="slide-excerpt">'+postcontent+'... </div>')} document.write('<div class="slide-divider"></div>');document.write('<div class="slide-more">Read More</div></div></div></div>')} document.write('</a></div></li>')} document.write('</ul>');document.write("<div class='cycle-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></div><div class='cycle-next'><i class='fa fa-angle-right' aria-hidden='true'></i></div>")} //]]> </script>
Pemasangan JQuery
DISCLAIMER : Perhatikan sebelumnya, jika anda sudah memiliki JQuery diblog, kode dibawah tidak diperlukan. Silakan mencari kode JQuery terlebih dahulu agar tidak bentrok.
Silakan pasang di atas kode </head> seperti halnya pemasangan javascript.
<!-- include jQuery --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'/> <!-- include Cycle2 --> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js' type='text/javascript'/>
Simpan Tema.
Pemasangan HTML
Untuk pemasangan HTML ini cukup mudah, setelah kita menyimpan 3 langkah diatas, kita tinggal copy kode dibawah lalu pergi ke menu Tata Letak, tambahkan widget HTML/Javascript, kemudian paste disana lalu simpan.
<div class='cycle-slideshow' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-random='true' data-cycle-slides='li' data-cycle-speed='1600' data-cycle-timeout='0'><script>document.write("<script src=\"/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=showgalleryposts\"><\/script>");</script></div><!-- .cycle-slideshow -->
2. Image Slider Otomatis di Sidebar
Untuk widget yang ini bisa dipasang di sidebar, karena ukurannya lebih kecil. Pemasangannya pun juga cukup mudah.
Buka menu Tata Letak, kemudian tambahkan widget HTML/Javascript. Copas kode dibawah!
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCfwZ0rLkN96GUSq1zH1Ft24XTW64naimAKZkeR_kmJ_2gYp-E2HCy-w1Ml_PFNSNxhAj_t0WII-dQ25XdtzKit5-2WKpNLhj6rLVG3nIltSpiB55Y99y4lQXo4VajXTjZEABh8TYr7xQ/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Open Sans', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'open sans', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://seoclive.com/", // Ubah halaman
featuredNum:9, //jumlah post
listbyLabel:false, //Belum mendukung menggunakan label
feathumbSize:350, //ukuran thumb
interval:3000, //kecepatan slider
autoplay:true, // fitur auto play
featuredID:"#featuredbwidget"
});
business office featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwEZsAp3rcWTHD6-3atzFZF35tz69V0qVbuxIJUqmi92fom25dBMaqmMjbfcG4ou5ngH_jEAO13pMlylkSmD0ZB4NcXP9UTQC1Qp_AcKdj8On2HRiTTN70tn-cdF9Ur6e8v0Wok6atr8/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');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" inward s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
Silakan ubah pada kod warna merah. Catatan: Widget ini belum mendukung penggunaan label.
3. Image Slider Manual di Blogspot
Pada widget ini cara pemasangan gambar dilakukan secara manual. Keistimewaan dari widget yang satu ini adalah menampilkan lebih dari 35 style transisi setiap perpindahan gambar.
Cara pemasangannya sama seperti pada widget nomor 2 diatas, cara pemasangannya juga cukup mudah.
Buka menu Tata Letak, kemudian tambahkan widget HTML/Javascript. Copas kode dibawah!
<!-- Camera_Slideshow Styles --> <link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'> <!-- Camera Slideshow Scripts --> <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script> <script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> <script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script> <script type='text/javascript'> jQuery(function() { jQuery('#camera_wrap_1').camera({ time: 2500, // milliseconds betwixt the terminate of the sliding lawsuit in addition to the start of the nex one transPeriod: 1200, // length of the sliding lawsuit inward milliseconds thumbnails: false, // thumnails & tooltip is controlled past times it pagination: true, // exclusively when "pagination" is laid to "false" thumbnails volition live visible fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects hover: false, // Pause on hover height: '50%' // slideshow tiptop (50% is default) }); }); </script> <style type="text/css"> .fluid_container { margin: 0 auto; /* aling centered */ width: 100%; max-width: 900px; overflow: hidden; } /* Blogger CSS Conflict Fix */ .camera_pag_ul { border: none !important; background: none !important; } .camera_pag_ul li { float: inherit !important; padding: inherit !important; } .camera_pag_ul { margin: 0 !important; border: 0 !important; } </style> <div class="fluid_container"> <!-- camera_slideshow camera_wrap--> <div class="camera_wrap" id="camera_wrap_1"> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg"> <div class="camera_caption fadeFromBottom"> Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em> </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg"> <div class="camera_caption fadeFromBottom"> It uses a calorie-free version of jQuery mobile, <em>navigate the slides past times swiping alongside your fingers</em> </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg"> <div class="camera_caption fadeFromBottom"> <em>It's completely free</em> (even though a donation is appreciated) </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg"> <div class="camera_caption fadeFromBottom"> Camera slideshow provides many options <em>to customize your project</em> every bit to a greater extent than every bit possible </div> </div> <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg"> <div class="camera_caption fadeFromBottom"> It supports captions, HTML elements in addition to videos. </div> </div> </div> <!-- #camera_wrap_1 --> </div> <!-- .fluid_container -->
Untuk kode kuning bisa dihapus jika sudah ada di template blog anda. Sedangkan kode merah silakan ubah sesuaikan dengan kebutuhan.
Demikian tutorial membuat image slider di blogspot dengan script (otomatis atau manual) dengan mudah, semoga membantu. Terima kasih berkunjung ke blog Agung Jaka Nugraha.