Cara Membuat Slider Otomatis Di Blog

Cara Membuat Slider Otomatis Di Blog - Pada kali kita akan membahas cara membuat slider otomatis atau membuat slideshow postingan di blog. S...

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

CSS Slider Otomatis Blog

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.

• Pastekan kode berikut diatas kode ]]></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 ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan kode 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://web.archive.org/web/20160111053457/http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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.
• Kemudian klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.

• Kemudian pastekan kode di bawah ini.

<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 diatas hanya memunculkan postingan terbaru (recent post). Untuk membuatnya memunculkan label tertentu, ubah script pada kode html diatas seperti ini /feeds/posts/default/-/NAMA_LABEL?max-results. Script 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 cara membuat slider otomatis atau membuat slideshow postingan di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.