Cara Memasang Featured Post Slider di Halaman Depan Blog

Baca Juga

Cara Memasang Featured Post Slider di Halaman Depan Blog

Featured Post Slider adalah widget yang menampilkan posting terbaru di hompage berupa slide gambar dan judul seperti gambar di bawah ini:

Fungsinya sama dengan widget Featured Post bawaan blogger, yaitu menampilkan posting unggulan. Namun, wigdet berikut ini memunculkan posting terbaru atau posting label tertentu. Lihat DEMO.

Cara Memasang Featured Post Slider di Halaman Depan Blog

1. Klik Tema > Edit HTML
2. Copas kode CSS Featured Post Slider berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.s3slider{margin:0 auto 10px;background:#333 none no-repeat 50% 50%;position:relative;overflow:hidden;}
ul.s3slider-content {padding: 0;}
.s3slider.loading{text-indent:-9999px;}
.s3slider-content,.s3slider-content li{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;list-style:none;overflow:hidden;}
.s3slider-content li{position:static;display:none;}
.s3slider-content img{display:block;width:100%;height:100%;max-width:none;max-height:none;border:none;outline:none;padding:0;margin:0;}
.s3slider-caption{position:absolute;right:0;bottom:0;left:0;height:auto;font:normal normal 13px/normal Helmet,Freesans,Sans-Serif;color:white;background-color:black;opacity:.8;filter:alpha(opacity=80);padding:17px 20px 20px;display:none;}
.s3slider-title,.s3slider-meta{display:block;}
.s3slider-title a{font-size:110%;font-weight:bold;color:white;text-decoration:none;}
.s3slider-title a:focus,.s3slider-title a:hover{text-decoration:underline;}
.s3slider-meta-comment:before{content:&quot;- &quot;}
</style>
    </b:if>

3. Cari kode:

<b:section class='main' id='main' name='Main' showaddelement='no'>

4. Copas kode HTML & JavaScript Featured Post Slider berikut ini di atas kode tersebut:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/>
<div id="s3slider-container">
<div class="s3slider loading" style="width:100%;height:300px;">    Memuat...  </div>
</div>
<script>
var s3slider_config = {
url: 'https://blogromeltea.blogspot.com',
numPost: 5,
labelName: null,
monthArray: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],
noImage:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', 
newTabLink: false,
containerId:'s3slider-container',
slider:{width:520,height:300,
timeOut: 9000}};
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.s3Slider = function(vars) {
var element = this,
timeOut = (vars.timeOut != undefined) ? vars.timeOut : 5000,
current = null,
timeOutFn = null,
faderStat = true,
mOver = false,
items = $(element).find('li'),
itemsSpan = items.find('.s3slider-caption');
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if (items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
// console.log("Poof..");
}
}, makeSlider = function() {
current = (current != null) ? current : items[(items.length - 1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if (faderStat == true) {
if (!mOver) {
$(items[currNo]).fadeIn((timeOut / 6), function() {
if ($(itemsSpan[currNo]).is(':visible')) {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if (!mOver) {
if ($(itemsSpan[currNo]).is(':hidden')) {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
$(items[currNo]).fadeOut((timeOut / 6), function() {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
$(items[currNo]).fadeOut((timeOut / 6), function() {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false);
}
});
});
}
}
}
}; makeSlider();
};
})(jQuery);
(function($, w, d) {
var sc = s3slider_config,
container = d.getElementById(sc.containerId),
head = d.getElementsByTagName('head')[0],
s = d.createElement('script'),
skeleton = '<div class="s3slider" id="s3slider" style="width:' + sc.slider.width + 'px;height:' + sc.slider.height + 'px;"><ul class="s3slider-content">',
title, image, link, date, comment;
w.blogger_s3Slider = function(json) {
var entry = json.feed.entry;
for (var i = 0, ien = entry.length; i < ien; ++i) {
title = entry[i].title.$t;
date = entry[i].published.$t.split('-');
var dd = date[2].substring(0, 2),
dm = date[1],
dy = date[0];
image = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s" + sc.slider.width) : sc.noImage;
for (var j = 0, jen = entry[i].link.length; j < jen; ++j) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
break;
}
}
for (var k = 0, ken = entry[i].link.length; k < ken; ++k) {
if (entry[i].link[k].rel == "replies" && entry[i].link[k].type == "text/html") {
comment = entry[i].link[k].title;
break;
}
}
skeleton += '<li><img src="' + image + '" style="display:block;width:' + sc.slider.width + 'px;min-height:' + sc.slider.height + 'px;height:auto;"><span class="s3slider-caption"><span class="s3slider-title"><a href="' + link + '"' + (sc.newTabLink ? ' target="_blank"' : "") + '>' + title + '</a></span><span class="s3slider-meta"><span class="s3slider-meta-date">' + dd + ' ' + sc.monthArray[parseInt(dm, 10) - 1] + ' ' + dy + '</span><span class="s3slider-meta-comment">' + comment + '</span></span></span></li>';
}
skeleton += '</ul></div>';
container.innerHTML = skeleton;
$('#' + sc.containerId).children().s3Slider({
timeOut: sc.slider.timeOut
});
};
s.src = sc.url.replace(/\/$/, "") + '/feeds/posts/summary' + (sc.labelName !== null ? '/-/' + sc.labelName : "") + '?alt=json-in-script&orderby=published&max-results=' + sc.numPost + '&callback=blogger_s3Slider';
head.appendChild(s);
})(jQuery, window, document);
//]]>
</script>
  </b:if>

5. Ubah alamat blognya (https://blogromeltea.blogspot.com) dengan url blog Anda.
6. Sesuaikan lebar dan tinggi gambar slider di kode kode warna merah.

Catatan: Jika akan menampilkan posting dari lebal/kategori tertentu, maka ubah kode null di kode labelName: null menjadi nama label plus tanda petik satu. Misalnya, label Headline, maka ubah menjadi: labelName: 'Headline'

7. Save! Simpan template.

Selesai. Itu dia Cara Memasang Featured Post Slider di Halaman Depan Blog. Wasalam. (https://blogromeltea.blogspot.com).*