Cara Memasang Featured Post Image Slider untuk Blogger

Baca Juga

Cara Memasang Featured Post Image Slider untuk Blogger

Membuat Featured Post Image Slider untuk Blogger. Posting unggulan ditampilkan di halaman depan dengan desain khusus yang menarik dan keren. Berikut ini SS-nya:

KODE JAVASCRIPT
Simpan di bawah ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+ b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+ b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+ b;return-c/2*((--t)*(t-2)- 1)+ b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+ b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+ 1)+ b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+ b;return c/2*((t-=2)*t*t+ 2)+ b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+ b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t- 1)+ b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+ b;return-c/2*((t-=2)*t*t*t- 2)+ b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+ b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+ 1)+ b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+ b;return c/2*((t-=2)*t*t*t*t+ 2)+ b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+ c+ b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+ b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)- 1)+ b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d- 1))+ b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+ 1)+ b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t- 1))+ b;return c/2*(-Math.pow(2,-10*--t)+ 2)+ b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)- 1)+ b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+ b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1- t*t)- 1)+ b;return c/2*(Math.sqrt(1-(t-=2)*t)+ 1)+ b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+ b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+ c+ b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+ b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+ c+ b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t- s)+ b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+ s)+ 1)+ b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t- s))+ b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+ s)+ 2)+ b;},easeInBounce:function(x,t,b,c,d){return c- jQuery.easing.easeOutBounce(x,d-t,0,c,d)+ b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+ b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+ b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+ b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+ b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+ b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+ c*.5+ b;}});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener )
for ( var i=types.length; i; )
this.addEventListener( types[--i], handler, false );
else
this.onmousewheel = handler;
},
teardown: function() {
if ( this.removeEventListener )
for ( var i=types.length; i; )
this.removeEventListener( types[--i], handler, false );
else
this.onmousewheel = null;
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});

function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the arguments
args.unshift(event, delta);
return $.event.handle.apply(this, args);
}
})(jQuery);
/**
* @version $Id: $Revision
* @package jquery
* @subpackage lofslidernews
* @copyright Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
* @website http://landofcoder.com
* @license This plugin is dual-licensed under the GNU General Public License and the MIT License
*/
// JavaScript Document
(function($) {
$.fn.lofJSidernews = function( settings ) {
return this.each(function() {
// get instance of the lofSiderNew.
new $.lofSidernews( this, settings );
});
}
$.lofSidernews = function( obj, settings ){
this.settings = {
direction : '',
mainItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click',
wapperSelector: '.slider-main-wapper',
interval : 4000,
auto : true, // whether to automatic play the slideshow
maxItemDisplay : 4,
startItem : 0,
navPosition : 'vertical',
navigatorHeight : 75,
navigatorWidth : 100,
duration : 600,
navItemsSelector : '.slider-navigator li',
navOuterSelector : '.slider-navigator-outer' ,
isPreloaded : true,
easing : 'easeOutBounce'
}
$.extend( this.settings, settings ||{} );
this.nextNo = null;
this.previousNo = null;
this.maxWidth = this.settings.mainWidth || 600;
this.wrapper = $( obj ).find( this.settings.wapperSelector );
this.slides = this.wrapper.find( this.settings.mainItemSelector );
if( !this.wrapper.length || !this.slides.length ) return ;
// set width of wapper
if( this.settings.maxItemDisplay > this.slides.length ){
this.settings.maxItemDisplay = this.slides.length;
}
this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
this.navigatorOuter.width( this.settings.navigatorWidth );
}
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
this.directionMode = this.__getDirectionMode();

if( this.settings.direction == 'opacity') {
this.wrapper.addClass( 'slider-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else {
this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
}

if( this.settings.isPreloaded ) {
this.preLoadImage( this.onComplete );
} else {
this.onComplete();
}
}
$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;
$.lofSidernews.fn.extend({
startUp:function( obj, wrapper ) {
seft = this;
this.navigatorItems.each( function(index, item ){
$(item).click( function(){
seft.jumping( index, true );
seft.setNavActive( index, item );
} );
$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );
})
this.registerWheelHandler( this.navigatorOuter, this );
this.setNavActive(this.currentNo );
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
this.registerButtonsControl( 'click', this.settings.buttons, this );
}
if( this.settings.auto )
this.play( this.settings.interval,'next', true );
return this;
},
onComplete:function(){
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
},
preLoadImage:function( callback ){
var self = this;
var images = this.wrapper.find( 'img' );
var count = 0;
images.each( function(index,image){
if( !image.complete ){
image.onload =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
image.onerror =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
}else {
count++;
if( count >= images.length ){
self.onComplete();
}
}
} );
},
navivationAnimate:function( currentIndex ) {
if (currentIndex <= this.settings.startItem
|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0;
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
}
}
this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
{duration:500, easing:'easeInOutQuad'} );
},
setNavActive:function( index, item ){
if( (this.navigatorItems) ){
this.navigatorItems.removeClass( 'active' );
$(this.navigatorItems.get(index)).addClass( 'active' );
this.navivationAnimate( this.currentNo );
}
},
__getPositionMode:function( position ){
if( position == 'horizontal' ){
return ['left', this.settings.navigatorWidth];
}
return ['top', this.settings.navigatorHeight];
},
__getDirectionMode:function(){
switch( this.settings.direction ){
case 'opacity': this.maxSize=0; return ['opacity','opacity'];
default: this.maxSize=this.maxWidth; return ['left','width'];
}
},
registerWheelHandler:function( element, obj ){
element.bind('mousewheel', function(event, delta ) {
var dir = delta > 0 ? 'Up' : 'Down',
vel = Math.abs(delta);
if( delta > 0 ){
obj.previous( true );
} else {
obj.next( true );
}
return false;
});
},
registerButtonsControl:function( eventHandler, objects, self ){
for( var action in objects ){
switch (action.toString() ){
case 'next':
objects[action].click( function() { self.next( true) } );
break;
case 'previous':
objects[action].click( function() { self.previous( true) } );
break;
}
}
return this;
},
onProcessing:function( manual, start, end ){
this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);
return this;
},
finishFx:function( manual ){
if( manual ) this.stop();
if( manual && this.settings.auto ){
this.play( this.settings.interval,'next', true );
}
this.setNavActive( this.currentNo );
},
getObjectDirection:function( start, end ){
return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");
},
fxStart:function( index, obj, currentObj ){
if( this.settings.direction == 'opacity' ) {
$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
}else {
this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
}
return this;
},
jumping:function( no, manual ){
this.stop();
if( this.currentNo == no ) return;
var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
this.onProcessing( null, manual, 0, this.maxSize )
.fxStart( no, obj, this )
.finishFx( manual );
this.currentNo = no;
},
next:function( manual , item){
this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);
this.onProcessing( item, manual, 0, this.maxSize )
.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
.finishFx( manual );
},
previous:function( manual, item ){
this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
this.onProcessing( item, manual )
.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
.finishFx( manual );
},
play:function( delay, direction, wait ){
this.stop();
if(!wait){ this[direction](false); }
var self = this;
this.isRun = setTimeout(function() { self[direction](true); }, delay);
},
stop:function(){
if (this.isRun == null) return;
clearTimeout(this.isRun);
this.isRun = null;
}
})
})(jQuery)
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();
imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/s1600/no+image.jpg";
showRandomImg=true;
aBold=true;
summaryPost=150;
summaryPost1=20;
summaryTitle=15;
numposts=6;
numposts1=6;
numposts2=3;
numposts3=6;
numposts4=5;
numposts5=12;
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 showrecentposts2(json){
j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
if(numposts1<=json.feed.entry.length){maxpost=numposts4}else{maxpost=json.feed.entry.length}for(var i=0;
i<maxpost;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]="";
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!="")){if(i==0){img[i]='<img width="295" height="180" class="alignone" src="'+d+'"/>'}else{img[i]='<img class="alignright" height="70" src="'+d+'" width="70"/>'}}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;
if(i==0){var trtd='<div class="mastoras_wide left"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div><span class="featuredPostMeta"><a href="'+posturl+'"></a></span></div></div><div class="mastoras_narrow right">';
document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<div class="mastoras_narrow"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost1)+'...<div class="clear"></div></div>';
document.write(trtd)}j++}document.write('</div>')}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; 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 style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></h3></li>';
document.write(trtd);

j++;
}
}

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; 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><div><img class="alignnone" src="'+img[i]+'"/></div></li>';
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 < numposts; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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 = m+ ' ' + day + ' ' + y ;
var trtd = '<a href="'+posturl+'"><span>&#187; </span>'+posttitle+'</a>';
document.write(trtd);

j++;
}
}
function showrecentposts7(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 title=" '+posttitle+' " href="'+posturl+'"><img width="90" height="70" title=" '+posttitle+' " class=" " src="'+img[i]+'"/></a></li>';
document.write(trtd);

j++;
}
}
//]]>
</script>

KODE HTML
Simpan di bawah kode  <div id='main-wrapper'> atau  <div class='main-outer'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.url == data:blog.homepageUrl'><div class='lof-main-wapper' id='slider'><div class='slider-main-outer'><ul class='slider-main-wapper'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script></ul></div><div class='slider-navigator-outer'><ul class='slider-navigator'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);</script></ul></div></div><script type='text/javascript'>jQuery(document).ready(function($){
$(&#39;#slider&#39;).lofJSidernews({ interval:6000, duration:800, mainWidth:600, navigatorWidth:100, maxItemDisplay:4, easing:&#39;easeOutBounce&#39;, auto:true, isPreloaded: true });});
</script></b:if></b:if>

KODE CSS
Simpan di atas kode ]></b:skin>

#slider{border: 15px solid #1F1C1B;background: #808080;float:left;padding:0;margin:0 0 15px 0;position:relative;overflow:hidden;width:600px;height:300px;}.slider-main-outer{position:relative;height:100%;width:600px;z-index:3;overflow:hidden}ul.slider-main-wapper li h3{z-index:10;position:absolute;top:-20px;left:0;height:100%;width:180px;background:#1F1C1B;opacity:0.7;filter:alpha(opacity = 70);padding:10px;}ul.slider-main-wapper li h3 p{color:#fff;font:12px Arial;line-height:16px;padding-top:10px;display:block;margin:0}ul.slider-main-wapper li h3 a{color:#fff;font:17px Arial;font-weight:700;line-height:20px;margin:0}ul.slider-main-wapper li .imgauto{width:600px;height:300px;overflow:hidden;margin:0;padding:0}ul.slider-main-wapper{height:300px;width:600px;position:absolute;overflow:hidden;margin:0;padding:0}ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:600px;float:left;margin:0;padding:0}.slider-opacity li{position:absolute;top:0;left:0;float:inherit}ul.slider-main-wapper li img{list-style:none;width:600px;height:auto;padding:0}ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}.slider-navigator-outer{position:absolute;right:0;top:0;z-index:10;height:auto;width:100px;overflow:hidden;color:#333}.slider-navigator li div{background:#423836;height:100%;position:relative;margin:0;padding-right:5px;}.slider-navigator li:hover div{background:#336CA6;opacity:0.7;filter:alpha(opacity = 70);}.slider-navigator li img{border:#666 solid 1px;border-top:1px solid #000;border-left:1px solid #000;height:63px;width:88px;float:left;margin:5px 5px 0;padding:0}.slider-navigator li.active img{border:#000 solid 1px}

Sumber

Featuted Post ala CB Blogger
Featured Post Image Slider untuk Blogger yang digunakan CB Blogger.

CSS & JAVASCRIPT
Simpan di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.layout-content{position:relative;overflow:hidden;padding:0;margin:0 auto}
.bungkus-related{padding:0;margin:0;position:relative}
ul.bungkus-related li.content:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:150px;background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACXCAYAAADUKjHXAAAABHNCSVQICAgIfAhkiAAAAC1JREFUKJFjYIACRibyCSbyuGgsYiXwixErSzuCeXAopiJBejiTHquUJCTSCAApNwIpR17mugAAAABJRU5ErkJggg==) repeat-x;opacity:.5;background-size:100% 100%;overflow:hidden}
ul.bungkus-related .random-grup{float:right;width:48%;height:100%;background:#222;padding:12px;box-sizing:border-box;position:relative;overflow-y:hidden;max-height:381px}
.random-thub {width: 320px;height: 200px;}
ul.bungkus-related .content .tulisan{position:relative;left:0;bottom:0;width:100%;padding:15px;z-index:2;box-sizing:border-box;font-size:17px;color:#fff;line-height:1.3em}
ul.bungkus-related .content .tulisan a{color:white;font-weight:700;opacity:0.9}
ul.bungkus-related .content .tulisan a:hover {color:#ff6}
ul.bungkus-related .content .tulisan .random-desk{font-size:12px;display:none;}
ul.bungkus-related .content .post-tag{position:absolute;top:15px;left:15px;background-color:#299680;color:#fff;font-weight:400;z-index:2;height:22px;line-height:22px;padding:0 8px;font-size:12px}
ul.bungkus-related .content .post-tag a{color:white}
ul.bungkus-related .content .post-tag a:nth-child(n+2),ul.bungkus-related .random-grup .content .post-tag{display:none}
ul.bungkus-related .random-grup .content{display:block;width:100%;float:right;margin:0 0 5px;padding:0 0 5px;border-bottom:1px solid #333;height:auto;position:relative}
ul.bungkus-related .random-grup li.content:after{content:none}
ul.bungkus-related .random-grup .content .gambar img{width:100%;height:100%;display:table-cell;vertical-align:middle;overflow:hidden}
ul.bungkus-related .content .gambar img{width:100%;height:auto;max-height:200px}
ul.bungkus-related .content{float:left;width:50%;box-sizing:border-box;overflow:hidden;position:relative;height:100%;margin:0;}
#random-post-container{width:100%;position:relative;background:#222;padding:0;max-height:280px;height:100%;border-radius:3px;overflow:hidden;margin:0 auto;margin:10px 0;}
ul.bungkus-related .random-grup{float:right;width:48%;height:auto;background:#222;padding:5px 0;box-sizing:border-box;position:relative;overflow-y:hidden;}
ul.bungkus-related .random-grup .content .gambar{width:25%;height:50px;position:absolute;overflow:hidden;left:5px;top:5px;bottom:5px;margin:auto;}
ul.bungkus-related .random-grup .content .tulisan{display:table-cell;padding-right:5px;position:relative;float:right;margin:0;padding-top:5px;font-size:13px;width:75%;}
ul.bungkus-related .random-grup .content .random-desk{font-size:10px;display:none;}
@media screen and (max-width:500px){#random-post-container{overflow:auto}ul.bungkus-related .content{width:100%;float:none}
ul.bungkus-related .content .gambar img{height:100%}ul.bungkus-related .random-grup{width:100%;float:none;overflow:hidden!important}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Feed configuration
var homePage = 'https://www.contohblog.com/', //ganti dengan alamat blog Anda
 maxResults = 5, //Ganti angka 5 lima untuk mengatur jumlah artikel yang akan ditampilkan
 summaryLength = 45, //
 noImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAAADajyQQAAAAA3NCSVQICAjb4U/gAAAAbUlEQVRoge3PAQ0AIRDAsOeNn3VUEDLSKtjWzHwv+m8HnGKsxliNsRpjNcZqjNUYqzFWY6zGWI2xGmM1xmqM1RirMVZjrMZYjbEaYzXGaozVGKsxVmOsxliNsRpjNcZqjNUYqzFWY6zGWI2xmg0/igINB8FclAAAAABJRU5ErkJggg==',
 containerId = 'random-post-container';
function getRandomInt(t, e) {
 return Math.floor(Math.random() * (e - t + 1)) + t
}
function shuffleArray(t) {
 var e, a, s = t.length;
 if (0 === s) return ! 1;
 for (; --s;) e = Math.floor(Math.random() * (s + 1)),
 a = t[s],
 t[s] = t[e],
 t[e] = a;
 return t
}
function createRandomPostsStartIndex(t) {
 var e = getRandomInt(1, t.feed.openSearch$totalResults.$t - maxResults);
 window.console && window.console.log && console.log("Get the post feed start from " + e + " until " + (e + maxResults)),
 add_script(homePage + "/feeds/posts/summary/-/Featured?alt=json-in-script&orderby=updated&start-index=" + e + "&max-results=" + maxResults + "&callback=randomPosts")
}
function randomPosts(t) {
 for (var e, a, s, n = document.getElementById(containerId), r = shuffleArray(t.feed.entry), l = "<ul class='bungkus-related'>", o = 0, i = r.length; i > o; o++) {
  a = "summary" in r[o] ? r[o].summary.$t.replace(/<.*?>/g, "").substring(0, summaryLength) + "&hellip;": "",
  s = "media$thumbnail" in r[o] ? r[o].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s600") : noImageUrl;
  for (var d = 0, m = r[o].link.length; m > d; d++) e = "alternate" == r[o].link[d].rel ? r[o].link[d].href: "#";
  l += "<li class='content'>",
  l += '<div class="gambar" ><img class="random-thub" src="' + s + '" title="' + r[o].title.$t + '" alt="' + r[o].title.$t + '" width="72" height="72"></div>',
  l += '<div class="tulisan"><a title="' + r[o].title.$t + '" class="random-title" href="' + e + '">' + r[o].title.$t + "</a><br>",
  l += '<span class="random-desk">' + a + "</span></div>",
  window.onload = function () {
   for (var t = $("#random-post-container ul li"), e = 1; e < t.length; e += 4) h = e + 1,
   t.slice(e, e + 4).wrapAll("<div id='grup" + h + "' class='random-grup'></div>")
  },
  l += "<small class='post-tag'>";
  for (var c = r[o].category, u = [], h = 0, g = c.length; g > h; ++h) u.push('<a title="' + c[h].term + '" href="' + homePage + "/search/label/" + encodeURIComponent(c[h].term) + '?max-results=5" rel="tag">' + c[h].term + "</a>");
  l += u.join(" "),
  l += "</small>",
  l += '<span class="clear"></span></li>'
 }
 n.innerHTML = l + "</ul>"
}
function add_script(t) {
 var e = document.createElement("script");
 e.src = t,
 document.getElementsByTagName("head")[0].appendChild(e)
}
add_script(homePage + "/feeds/posts/summary/-/Featured?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex");
//]]>
</script>
</b:if>

HTML:
Simpan di bawah kode  <div id='main-wrapper'> atau  <div class='main-outer'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='layout-content'>
<div id='random-post-container'>Memuat</div>
</div>
</b:if>

Save! Simpan Template.

Demikian Featured Post Image Slider untuk Blogger. Good Luck and Happy Blogging! (www.contohblog.com).*