Cara Membuat Slider Otomatis Di Blog

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 di blog berfungsi untuk menampilkan gambar beserta judul dan deskripsi dari setiap postingan secara otomatis. Kita juga bisa memilih untuk hanya memunculkan postingan terbaru atau hanya postingan tertentu berdasarkan label pada slider otomatis blog. Membuat slider otomatis di blog juga bisa membuat blog lebih kelihatan elegan dan profesional. Bagi yg ingin membuat slider otomatis di blog, simak langkah berikut.

Demo

CSS Membuat Slider Otomatis

• 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 Membuat Slider Otomatis

• 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/AVvXsEhwU8AkTXaLqK-SBReUtcTFxDrsbX4FDiV4bWzqGBT7fsIq-BZDLrnet8RSeAhyh793iWQgzfnEeBCg3zMcaXDX7tVwt2lJd0DNogTR7C8PJqrqzQjwI8JsJokoZ2ywI_T7x5kzDC93_fI/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 Membuat 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 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 di blog atau membuat slideshow postingan di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.