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 .
Cara Memasang Featured Post Slider di Halaman Depan Blog
1. Klik Tema > Edit HTML2. 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:"- "}
</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).*
