Featured Post Slider yaitu widget yang menampilkan posting terbaru di hompage berupa slide gambar dan judul menyerupai gambar di bawah ini:
Fungsinya sama dengan widget Featured Post bawaan blogger, yaitu menampilkan posting unggulan. Namun, wigdet berikut ini memunculkan posting terbaru.
Cara Memasang Featured Post Slider di Halaman Depan Blog
1. Klik Tema > Edit HTML2. Copas arahan CSS Featured Post Slider berikut ini di atas arahan </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 arahan HTML & JavaScript Featured Post Slider berikut ini di atas arahan 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 arahan kode warna merah.
7. Save! Simpan template.
Selesai. Itu dia Cara Memasang Featured Post Slider di Halaman Depan Blog. Wasalam. (https://blogromeltea.blogspot.com).*
0 comments: