Cara Memasang Widget Featured Post Slider Image Otomatis Berdasarkan Kategori

Cara Memasang Widget Featured Post Slider Image Otomatis Berdasarkan Kategori

PENAMPAKAN Widget Featured Post Slider Image Otomatis Berdasarkan Kategori (Per Label) untuk blogger ini sebagaimana gambar di samping ini.

Widget Featured Post Slider ini bisa menampilkan posting kategori tertentu, kategori khusus (misalnya Headline atau Featured), bisa juga posting terbaru otomatis muncul di widget ini.

Cara Memasang Widget Featured Post Slider Image Otomatis Berdasarkan Kategori

1. Template > Edit HTML
2. Copas kode CSS Featured Post Image Slider Otomatis berikut ini di atas kode ]]></b:skin>

#featuredContent{float: left;width: 100%;display: inline;margin: 10px 5px 25px 5px;}
#featured-slider{position:relative;overflow:hidden;width:423px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:423px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-802KRQjEo3vTqg_juN8HXgl0lSQZfiSsr7XiZsR8oHA3gNYDS8kBSBAx-6t6hBvT4-v3JV-GRBZ0SXj1uXI0jukDWcWA1CzYO69CcE5vfBQnKjnPJq7W5GybPNGhQw-7pdSUxC7Bl80k/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1em;padding:0 5px}
#featured-slider .sliderPostInfo h2 {color:#FF6;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .sliderPostInfo h2 a:link,#featured-slider .sliderPostInfo h2 a:visited{color:#FF6;}
#featured-slider .sliderPostInfo h2 a:hover{color:#fff}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#294969;margin-bottom:0;padding:0 0 5px;float: inherit; width: 98.5%;}
#paginate-featured-slider ul{width:100%;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display: block;width: 73px;float: left;margin-left: -30px;margin-right: 39px;margin-bottom: 3px;margin-top:0px;}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}
@media only screen and (max-width:500px){
#paginate-featured-slider {display: none;}
}

3. Copas kode berikut ini di atas kode </head>

<script>//<![CDATA[
var featuredcontentslider={ajaxloadingmsg:'<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',bustajaxcache:true,enablepersist:true,settingcaches:{},jumpTo:function(fcsid,pagenumber){this.turnpage(this.settingcaches[fcsid],pagenumber)},ajaxconnect:function(setting){var page_request=false
if(window.ActiveXObject){try{page_request=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){try{page_request=new ActiveXObject("Microsoft.XMLHTTP")}
catch(e){}}}
else if(window.XMLHttpRequest)
page_request=new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){featuredcontentslider.ajaxpopulate(page_request,setting)}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)?"":(pageurl.indexOf("?")!=-1)?"&"+new Date().getTime():"?"+new Date().getTime()
page_request.open('GET',pageurl+bustcache,true)
page_request.send(null)},ajaxpopulate:function(page_request,setting){if(page_request.readyState==4&&(page_request.status==200||window.location.href.indexOf("http")==-1)){document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)}},buildcontentdivs:function(setting){var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for(var i=0;i<alldivs.length;i++){if(this.css(alldivs[i],"contentdiv","check")){setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none"}}},buildpaginate:function(setting){this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if(typeof toc=="string"&&toc!="markup"||typeof toc=="object"){for(var i=1;i<=setting.contentdivs.length;i++){phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"?toc.replace(/#increment/,i):toc[i-1])+'</a> '}
phtml=(nextprev[0]!=''?'<a href="#prev" class="prev">'+nextprev[0]+'</a> ':'')+phtml+(nextprev[1]!=''?'<a href="#next" class="next">'+nextprev[1]+'</a>':'')
pdiv.innerHTML=phtml}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0
for(var i=0;i<pdivlinks.length;i++){if(this.css(pdivlinks[i],"toc","check")){if(toclinkscount>setting.contentdivs.length-1){pdivlinks[i].style.display="none"
continue}
pdivlinks[i].setAttribute("rel",++toclinkscount)
pdivlinks[i][setting.revealtype]=function(){featuredcontentslider.turnpage(setting,this.getAttribute("rel"))
return false}
setting.toclinks.push(pdivlinks[i])}
else if(this.css(pdivlinks[i],"prev","check")||this.css(pdivlinks[i],"next","check")){pdivlinks[i].onclick=function(){featuredcontentslider.turnpage(setting,this.className)
return false}}}
this.turnpage(setting,setting.currentpage,true)
if(setting.autorotate[0]){pdiv[setting.revealtype]=function(){featuredcontentslider.cleartimer(setting,window["fcsautorun"+setting.id])}
sliderdiv["onclick"]=function(){featuredcontentslider.cleartimer(setting,window["fcsautorun"+setting.id])}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50)
this.autorotate(setting)}},urlparamselect:function(fcsid){var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)","i"))
return(result==null)?null:parseInt(RegExp.$1)},turnpage:function(setting,thepage,autocall){var currentpage=setting.currentpage
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))?currentpage-1:(/next/i.test(thepage))?currentpage+1:parseInt(thepage)
turntopage=(turntopage<1)?totalpages:(turntopage>totalpages)?1:turntopage
if(turntopage==setting.currentpage&&typeof autocall=="undefined")
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting,window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if(setting.enablefade[0]==true){setting.curopacity=0
this.fadeup(setting)}
if(setting.enablefade[0]==false){setting.contentdivs[setting.prevpage-1].style.display="none"
setting.onChange(setting.prevpage,setting.currentpage)}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if(setting.prevpage<=setting.toclinks.length)
this.css(setting.toclinks[setting.prevpage-1],"selected","remove")
if(turntopage<=setting.toclinks.length)
this.css(setting.toclinks[turntopage-1],"selected","add")
setting.prevpage=turntopage
if(this.enablepersist)
this.setCookie("fcspersist"+setting.id,turntopage)},setopacity:function(setting,value){var targetobject=setting.contentdivs[setting.currentpage-1]
if(targetobject.filters&&targetobject.filters[0]){if(typeof targetobject.filters[0].opacity=="number")
targetobject.filters[0].opacity=value*100
else
targetobject.style.filter="alpha(opacity="+value*100+")"}
else if(typeof targetobject.style.MozOpacity!="undefined")
targetobject.style.MozOpacity=value
else if(typeof targetobject.style.opacity!="undefined")
targetobject.style.opacity=value
setting.curopacity=value},fadeup:function(setting){if(setting.curopacity<1){this.setopacity(setting,setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)},50)}
else{if(setting.cacheprevpage!=setting.currentpage)
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
setting.onChange(setting.cacheprevpage,setting.currentpage)}},cleartimer:function(setting,timervar){if(typeof timervar!="undefined"){clearTimeout(timervar)
clearInterval(timervar)
if(setting.cacheprevpage!=setting.currentpage){setting.contentdivs[setting.cacheprevpage-1].style.display="none"}}},css:function(el,targetclass,action){var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)","ig")
if(action=="check")
return needle.test(el.className)
else if(action=="remove")
el.className=el.className.replace(needle,"")
else if(action=="add")
el.className+=" "+targetclass},autorotate:function(setting){window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting,"next")},setting.autorotate[1])},getCookie:function(Name){var re=new RegExp(Name+"=[^;]+","i");if(document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return null},setCookie:function(name,value){document.cookie=name+"="+value},init:function(setting){var persistedpage=this.getCookie("fcspersist"+setting.id)||1
var urlselectedpage=this.urlparamselect(setting.id)
this.settingcaches[setting.id]=setting
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage||((this.enablepersist)?persistedpage:1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype||"click")
setting.curopacity=0
setting.onChange=setting.onChange||function(){}
if(setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if(setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)}}//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJrattxcpuLc2fS_K8BmKQ5rUAaUfQMWpSsXVNnISKdX3nnS5-IRRfL-juZ2d1V168RVhEKHtDNpqZPizixZKqmxSWbLl2Wmmwpw312IQQZwz0IKO2farc7cI_IqFNOczB8QxSSnVtIw/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryTitle = 25;
numposts3 = 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 showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; 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 = "";

postdate = entry.published.$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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="423" height="240" class="align:none" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);

j++;
}
}
function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; 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 = "";

postdate = entry.published.$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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>

4. Copas kode berikut ini di bawah kode <div id='main-wrapper'> atau yang mirip dengannya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>//<![CDATA[
document.write("<script src=\"/feeds/posts/default/-/Headline?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");//]]>
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>//<![CDATA[
document.write("<script src=\"/feeds/posts/default/-/Headline?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");//]]>
</script>
</ul>
<div class='clear'/>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
</div>
</b:if>

5. Save Template!

Catatan:
- Kode Featured Post Slider Imaga di atas otomatis menampilkan posting dengan label Headline. Tambahkan label Headline pada minimal 5 posting yang akan ditampilkan di sana
- Anda bisa mengubah label Headline dengan label lain yang sudah ada
- Jika ingin menampilkan posting terbaru di sana, maka ubah kode berikut ini:

default/-/Headline?

Ubah menjadi default?
Yakni mnnghapu bagian /-/Headline.

Cara Memasang Widget Featured Post Slider Image Otomatis Berdasarkan Kategori. (CB Blogger).*

Sumber

Cara Memasang Widget Featured Post Slider Image Otomatis Berdasarkan Kategori

CB Blogger | November 1, 2016