Cara Membuat Slider Otomatis Di Blog

Pada kali kita akan membahas cara membuat slider otomatis blog atau membuat slideshow postingan di blog. Membuat slider otomatis blog berfungsi untuk menampilkan gambar beserta judul dan deskripsi dari setiap postingan. Kita juga bisa memilih untuk hanya memunculkan postingan terbaru atau hanya postingan tertentu berdasarkan label pada slider otomatis blog. Membuat slider otomatis blog juga bisa membuat blog lebih kelihatan elegan dan profesional. Bagi yg ingin membuat slider otomatis blog, simak langkah berikut.

Demo

CSS Slider Otomatis Blog

• Login ke blogger.
• Klik menu template.
• Edit html.
• Pastekan css slider otomatis blog berikut diatas ]]></b:skin>.

.tapike_slider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .slider { position: absolute; top: 0; left: 0; } .slider img { float: left; width: 20%; height: 350px; } .tapike_page { background: none; position: absolute; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .tapike_page a { margin: 3px; background: #333; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .tapike_page a.active { background: #FF5848; border: 1px solid #FF5848; } .tapike_page a:hover { background: #FF5848; border: 1px solid #FF5848; } .tapike_slider_title { display: none; position: absolute; bottom: 0; z-index: 101; background: rgba(0, 0, 0, 0.6); padding: 5px 15px; } .tapike_slider_title a { color: #FF5848; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .tapike_slider_title p { color: #fff; font: 12px Arial; }

Javascript Slider Otomatis Blog

• Login akun blogger.
• Kliktemplate.
• Klik edit html.
• Pastekan script slider otomatis blog berikut diatas kode </head>.

<script type='text/javascript'>$(document).ready(function() { $(".tapike_page").show(); $(".tapike_page a:first").addClass("active"); var imageWidth = $(".tapike_slider").width(); var imageSum = $(".slider img").size(); var imageReelWidth = imageWidth * imageSum; $(".slider").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var sliderPosition = triggerID * imageWidth; $(".tapike_page a").removeClass('active'); $active.addClass('active'); $(".tapike_slider_title").stop(true,true).slideUp('slow'); $(".tapike_slider_title").eq( $('.tapike_page a.active').attr("rel") - 1 ).slideDown("slow"); $(".slider").animate({left: -sliderPosition}, 400 ); }; rotateSwitch = function(){ $(".tapike_slider_title").eq( $('.tapike_page a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.tapike_page a.active').next(); if ( $active.length === 0) { $active = $('.tapike_page a:first'); } rotate(); }, 4000); }; rotateSwitch(); $(".slider a, .tapike_slider_title a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".tapike_page a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); </script><script type='text/javascript'>//<![CDATA[ imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4GCBeOmuH2l_Yce3F-7B3ddZybj4Z2LtG-DbgjqeiT3U8MWQW8dO2t_0MALnCRrGbSxAeEMuIspmGwgrh3y78j3BB-Bt0nXTcaDVL68ZqkhEjbSkNMWRpZW-WGX0Mjd1jl2PRAHjnrmc/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5; function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s = s.join("");s = s.substring(0,chop-1);return s;} function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }} for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="tapike_slider_title"><a href="'+posturl+'">'+posttitle+'</a><p> '+removeHtmlTag(postcontent,summaryPost1)+'... </p> </div> '; document.write(trtd); j++;}} function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; 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!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}} //]]></script>

HTML Slider Otomatis Blog

• Login ke akun blogger.
• Klik tata letak.
• Klik tambahkan element/add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan html slider otomatis blog berikut.

<div class='tapike_slider'> <div class='slider'> <script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>"); </script> </div> <div class='descriptionslider'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> <div class='tapike_page'> <a href='#' rel='1'></a><a href='#' rel='2'></a><a href='#' rel='3'></a><a href='#' rel='4'></a><a href='#' rel='5'></a> </div> </div>

Pengaturan

Slider otomatis blog diatas hanya memunculkan postingan terbaru (recent post). Untuk membuat slider otomatis blog memunculkan label tertentu, ubah script pada kode html diatas seperti ini /feeds/posts/default/-/NAMA_LABEL?max-results. Script slider otomatis blog diatas menggunakan Jquery. Jika di blog belum ada jquery, letakkan kode jquery diatas head.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>

Demikianlah tutorial membuat slider otomatis blog atau membuat slideshow postingan di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.