Slider Blogspot adalah fitur atau widget yang menampilkan beberapa postingan atau gambar secara berurutan dan bergantian (seperti tayangan slide) di halaman blog Anda, biasanya untuk menampilkan konten unggulan atau terbaru. Tujuannya adalah untuk menarik perhatian pembaca, menjaga mereka tetap terlibat, dan memungkinkan mereka menemukan lebih banyak postingan menarik tanpa membuat halaman blog terlihat terlalu padat.
Cara Kerja Slider di Blogspot
Tayangan Otomatis:
Slider biasanya akan menampilkan gambar atau postingan secara otomatis dengan transisi yang halus.
Navigasi Pengguna:
Pengguna juga dapat berinteraksi dengan slider, seperti mengklik tombol panah untuk berpindah ke slide berikutnya atau sebelumnya.
Konten yang Disesuaikan:
Anda dapat membuat slider yang menampilkan postingan terbaru, postingan populer, atau gambar tertentu yang ingin Anda sorot di blog.
Manfaat Menggunakan Slider Blogspot
Menarik Perhatian:
Slider menampilkan visual yang menarik dan dinamis, yang efektif untuk menangkap perhatian pengunjung sejak mereka masuk ke halaman blog.
Meningkatkan Keterlibatan:
Dengan menampilkan konten yang relevan, slider mendorong pembaca untuk menjelajahi lebih banyak postingan, sehingga mereka menghabiskan lebih banyak waktu di situs Anda.
Menghemat Ruang:
Slider memungkinkan Anda menampilkan banyak konten tanpa membuat halaman terlihat penuh, sehingga tetap bersih dan mudah dinavigasi.
Mempromosikan Konten:
Ini adalah cara yang baik untuk mempromosikan postingan lama atau produk terlaris kepada audiens baru dan mengarahkan trafik ke konten yang Anda anggap penting.
Bagaimana Cara Menambahkannya
Meskipun Blogger tidak memiliki fitur slider bawaan seperti beberapa platform lain, Anda bisa menambahkan slider dengan menggunakan kode HTML, CSS, dan JavaScript atau dengan menggunakan widget atau template yang sudah menyediakan fitur slider tersebut.
Widget ini mungkin kurang cocok bagi sobat yang sangat "menjunjung tinggi" dengan kecepatan, alasannya karena memang akan membebani loading blog.
Berikut Penerapannya Kodenya
Pertama Buka Menu Theme (Tema) pada dashboard blogger, selanjutnya pilih menu sesuaikan Edit HTML
Cari Kode ]]></b:skin> pada editor HTML dengan cara menekan tombol ctrl+F
Taruh Kode CSS berikut dibawah kode ]]></b:skin> pada template blogger Anda :
Pertama Buka Menu Theme (Tema) pada dashboard blogger, selanjutnya pilih menu sesuaikan Edit HTML
Cari Kode ]]></b:skin> pada editor HTML dengan cara menekan tombol ctrl+F
Taruh Kode CSS berikut dibawah kode ]]></b:skin> pada template blogger Anda :
/* 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;}}
<script type='text/javascript'>
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".easyslider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".easytitledes").stop(true,true).slideUp('slow');
$(".easytitledes").eq(
$('.paging a.active').attr("rel") - 1 ).slideDown("slow");
$(".image_reel").animate({left: -image_reelPosition}, 400 );
};
rotateSwitch = function(){
$(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first'); } rotate(); }, 4000); };
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
clearInterval(play); }, function() { rotateSwitch();
});
$(".paging a").click(function() { $active = $(this);
clearInterval(play); rotate(); rotateSwitch(); return false;
});
});
</script>
<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'>Welcome to my site</a><p>Hi, Readers</p></div>
<div class='easytitledes'><a href='...post-link2.html'>Terima Kasih</a><p>sudah menerapkan budaya membaca</p></div>
<div class='easytitledes'><a href='...post-link3.html'>Siap</a><p>Mantap, Lanjutkan </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>
<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tags?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='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>
EmoticonEmoticon