Cara Membuat Easy Slider di Halaman Utama Blogger

By Aru 2/16/2021

Share Tweet Share Email

Slider atau yang juga sering disebut slideshow 

adalah informasi yang berjalan atau sliding di blog atau website. Slider pada dasarnya untuk menampilkan informasi utama yang tertuang dalam sebuah konten blog. Karena untuk kenyamanan pengunjung, tampilan slider juga menjadi penting diperhatikan. Jika menampilkan slider dengan asal-alasan bukan tidak mungkin akan merusak estetika sebuah website. Olehnya, dibutuhkan tema slider yang sesuai dengan template yang digunakan.

/* CSS Easy Slider */
.easyslider{width:100%;height:250px;background:#e3e3e3;margin:0;}
.easyslider-wrapper{width:auto;float:left;position:relative;padding:0;margin:0}
.easyslider{overflow:hidden;position:relative;width:100%;height:250px;background:#fff;margin:5px 0 5px 0;border-bottom:5px solid #eee;}
.image_reel {position:absolute;top:0;left:0;}
.image_reel img{float:left;width:20%;height:250px;}
.paging{background:none;position:absolute;bottom:15px;right:20px;padding:4px 0 2px;z-index:100;display:none;}
.paging a {margin:3px;background:#fff;width:10px;height:10px;display:inline-block;border:none;outline:none;}
.paging a.active{background:#15E3FF;border:1px solid #15E3FF;}
.paging a:hover{ }
.easytitledes{width:70%;display:none;position:absolute;bottom:20px;left:20px;z-index:101;background:#000A3F;background:rgba(2, 0, 51, 0.6);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));background-position:top left;background-repeat:no-repeat;background-size:100% auto;padding:10px 15px;}
.easytitledes a{color:#15E3FF;font-size:18px;text-transform:Capitalize;font-weight:600;}
.easytitledes a:hover{color:#179bff;}
.easytitledes p{color:#fff;font-size:14px;}
@media screen and (max-width:480px){
.easyslider-wrapper{display:none;}}

Kode JQuery nya simpan diatas kode /head

<script type='text/javascript'>
$(document).ready(function() {
    $(&quot;.paging&quot;).show(); 
    $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

var imageWidth = $(&quot;.easyslider&quot;).width(); 
var imageSum = $(&quot;.image_reel img&quot;).size(); 
var imageReelWidth = imageWidth * imageSum;

    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

rotate = function(){ var triggerID = $active.attr(&quot;rel&quot;) - 1; 

var image_reelPosition = triggerID * imageWidth;

    $(&quot;.paging a&quot;).removeClass(&#39;active&#39;);
        $active.addClass(&#39;active&#39;);

    $(&quot;.easytitledes&quot;).stop(true,true).slideUp(&#39;slow&#39;);
    $(&quot;.easytitledes&quot;).eq( 
    $(&#39;.paging a.active&#39;).attr(&quot;rel&quot;) - 1 ).slideDown(&quot;slow&quot;); 
    $(&quot;.image_reel&quot;).animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(&quot;.easytitledes&quot;).eq( $(&#39;.paging a.active&#39;).attr(&quot;rel&quot;) - 1 ).slideDown(&quot;slow&quot;);

play = setInterval(function(){
    $active = $(&#39;.paging a.active&#39;).next();

if ( $active.length === 0) {
    $active = $(&#39;.paging a:first&#39;); } rotate(); }, 4000); };

rotateSwitch(); $(&quot;.image_reel a, .easytitledes a&quot;).hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(&quot;.paging a&quot;).click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
</script>

Markup HTMLnya untuk slider posting gambar manual
Terapkan Kode HTMLnya

<b:if cond='data:view.isHomepage'>
<div class='easyslider'>
   <div class='image_reel'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8btHOZAPuPUxP52RTQelSJlVBmBPQqxOZakMzormJzLCnrlUxnCZ8YI5sf3dfGZx8Jwvhy45a9q1ziw35497xBktUu2yO6OWJPjXZR6LhnTt7s_c0y0SQLFsudDL7TZrO1JR1QVzwUIw/s16000/Slider+2+PPDB.png'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqe1jI7bUTS-DuJD23Qs4h6oMxc_VGrJGuOxKccrebF4uHaa6qlCVBwdXvwocbalNGUvYkunpEMlDG6ENl9iuOU1bR3wTg7RkXBQQjeQ90sl4WIRVB_iAI0IJOqFUxMY9bhqeMAJ6Oo0/s16000/Slider+1+PPDB.png'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqI6ifKmcQqw5wJHRtAQV0bziyIT0r_4R1vGB8vgcLGery4vNmEQ_hOd5XUUHm4cf3Yh0ycz0jH_bzSdhRdVnU_mNTy-OBikMPf8nxVeAhZs3umySKA6uigvxXW0d0uzO75k8pkiDQ5-U/s16000/Slider+1+Website.png'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxnumXW5RwYAVdSdjgY_UxbtYeeKLrvQLP5wmW1_DF_e_7cFL4tqOIoF1yhYOo9w6wSTVip03LTb3SfDw9hPfCBSrVhwwyJQZB5on5J-gvbUWNUg0b8cLrFibsCeVnc0scopFrxbiTyI/s16000/Slider+2.png'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHC74Dw7Oilppu04F-SNrWydr67q97Bz4tSa6KXm3CRhMvIj62Pm4hQduRit88vlfPVX56ALpE0GUalhudCE46-LAyxdynNG7-F4lS-Eaw0Pm82THyULinc0e3A8yGj5I3eHYW1U15888/s16000/Slider+3.png'/></a>
   </div>
   <div class='descriptionslider'>
<div class='easytitledes'><a href='...post-link1.html'>PPDB Tahun Pelajaran 2021/2022</a><p>Telah dibuka PPDB TK, SD, SMP Islam Terpadu Al Husna</p></div>
<div class='easytitledes'><a href='...post-link2.html'>Daftar Segera</a><p>link bit.ly/ppdbalhusna</p></div>
<div class='easytitledes'><a href='...post-link3.html'>Welcome to SMPIT AL HUSNA</a><p>Selamat Datang di Website sMPIT AL HUSNA, Semoga dengan hadirnya Website ini bisa memberikan layanan informasi seputar sekolah kami ...  </p></div>
<div class='easytitledes'><a href='...post-link4.html'>A Goal Without a Plan is Just a Wish</a><p>Terkadang ada saatnya kita bertemu dengan sebuah titik.Titik hampa dalam sebuah proses perjalanan.Ketika berbagai pertanyaan melayang dalam pikiran.Apa yang sedang aku lakukan? Akan berujung bagaimana? Untuk apa? Untuk siapa? Harus bagaimana? Dsb.</p></div>
<div class='easytitledes'><a href='...post-link5.html'>Mengapa Perlu Menuliskan Resolusi Hidup?</a><p>Menulis sejatinya fitrah manusia. Peradaban manusia sejak dibangun kembali oleh Nabi Nuh a.s hingga sekarang selalu diwarnai oleh tulisan sebagai cirinya. Sehingga hal yang wajar bila Allah swt menurunkan kitab suci-Nya secara tertulis yang dibaca oleh seluruh umat manusia dari sejak ia diturunkan hingga sekarang.</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>   

Terapkan JQuery berikut untuk menambahkan slide berdasarkan label

<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjdwYvUs9cUrzimUHH6c1OERJWZG6_lPbEV7pNYF6EHMQcTSROAKyCBv30cLTh75Or2qALFgwIV0S7ey8q5JY61cL1lkV7h-QZcyqLaPCM6WEgbGey9XtSLRE9MWYNpQUS2mLinZLha5w/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="easytitledes"><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>

ini Markup HTML nya jika berdasarkan Label

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tags?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='descriptionslider'>
<script>         
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>