Cara Membuat Featured Image Galeri Gambar Carousel di Halaman Depan Blog
Berikut ini Cara Membuat Featured Image berupa Galeri Gambar Carousel di Halaman Depan Blog. Bisa juga ditampilkan di tiap halaman.
Yang CB maksud Featured Image Galeri Gambar Carousel seperti gambar berikut ini yang biasa ada di template magazine style. Ini juga kodenya diambil dari template gaya majalah.
Yang CB maksud Featured Image Galeri Gambar Carousel seperti gambar berikut ini yang biasa ada di template magazine style. Ini juga kodenya diambil dari template gaya majalah.
Cara Membuatnya
1. Tema > Edit HTML
2. Copas kode berikut ini di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js?ver=1.11.2' type='text/javascript'/>
<!-- Mediabar Started-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/* Carousel */
#mediabar { width:100%; position: relative; float: left; margin:0;height:170px;border-top:1px solid #c5c5c5; overflow:hidden;}
#mediabar .container {position: absolute;left: 0px;width: 610px;overflow:hidden;margin-top: 7px;}
#mediabar h2 {background: #f8f8f8;padding: 5px;}
#mediabar ul{width:10000px;position: relative;overflow:hidden;margin-top:5px;}
#mediabar li p{float: left;width: 195px; }
#mediabar ul li { display: inline; float: left; margin: 0; padding: 0 5px 0 0; width: 210px; overflow: hidden;height:170px;}
#mediabar .thumb { margin-bottom: 4px; height:130px;width: 210px;}
#mediabar #previous_button { position: absolute; top: 7px; right: 29px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgik3w131aHctFL5hyphenhyphen4N4l4x9IvHUkRvrhnJM7KsZcSp5pssDRyXn6lBFcm43cO905sld_jS3h6AVAc7XpEJv64pzu2F0Itk_GyUqcdOigkTGHjwcBwQ8iTOs-CPdhC8V7x-gWfCdIFyp0/s1600/arrow_feat.png) no-repeat; background-position: 0 0; }
#mediabar #next_button { position: absolute; top: 7px; right: 0; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgik3w131aHctFL5hyphenhyphen4N4l4x9IvHUkRvrhnJM7KsZcSp5pssDRyXn6lBFcm43cO905sld_jS3h6AVAc7XpEJv64pzu2F0Itk_GyUqcdOigkTGHjwcBwQ8iTOs-CPdhC8V7x-gWfCdIFyp0/s1600/arrow_feat.png) no-repeat; background-position: -27px 0; }
#mediabar #next_button:hover, #previous_button:hover { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
</style>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-QwlK2Rb-nns/TvhNDtJ4RnI/AAAAAAAACak/TgSjOqStaNc/s1600/empty_thumb.gif";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts = 9;
numposts9 = 9;
label6 = "Galeri";
Title6 = "Galeri";
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 showrecentposts2a(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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="195" height="120" class="Thumbnail thumbnail carousel " src="'+img[i]+'"/></a></div><p><a href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) { // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, o || {});
return this.each(function() { // Returns the element collection. Chainable.
var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
var div = $(this), ul = $("ul:first", div), tLi = $(".car", ul), tl = tLi.size(), v = o.visible;
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
var li = $(".car", ul), itemLength = li.size(), curr = o.start;
div.css("visibility", "visible");
li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
ul.css({ padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
//div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "29px"});
div.css({overflow: "hidden", "z-index": "2"});
var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
var divSize = liSize * v; // size of entire div(total length for just the visible items)
li.css({width: li.width()});
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
});
if(o.mouseWheel && div.mousewheel)
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});
if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
function vis() {
return li.slice(curr).slice(0,v);
};
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};
});
};
function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};
})(jQuery);
//]]>
</script>
</b:if>
<!-- Mediabar End--> Ubah nama judul dan label warna merah.
3. Copas kode HTML dan JS Featured Image Galeri Gambar Carousel berikut ini di bawah kode <div id='main-content'> atau <div class='main-wrapper'> atau kode yang semisalnya.
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});
if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
function vis() {
return li.slice(curr).slice(0,v);
};
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};
});
};
function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};
})(jQuery);
//]]>
</script>
</b:if>
<!-- Mediabar End--> Ubah nama judul dan label warna merah.
3. Copas kode HTML dan JS Featured Image Galeri Gambar Carousel berikut ini di bawah kode <div id='main-content'> atau <div class='main-wrapper'> atau kode yang semisalnya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mediabar'>
<h2>Galeri</h2>
<div id='previous_button'/>
<div id='next_button'/>
<div class='container'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label6+"?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts2a\"><\/script>");
</script>
</ul><div class='clear'/>
</div>
<div class='clear'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#mediabar .container").jCarouselLite({
auto:0,
scroll: 1,
speed: 400, visible: 3,
start: 0,
circular: false,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery) </script>
<!-- /.mediabar -->
<div class='clear'/>
</b:if>
Ubah nama judul dan label warna merah.
4. Save! Simpan template. Beres.
Featured Post Carousel ala CB Magazine
Jika ingin menampilkan featured post carousel ala CB Magazine yang ada di bagian paling atas atau di bawah menu, berikut ini kodenya:
CSS & JS
Simpan di atas </head>
HTML
Simpan di bawah akhir kode menu template Anda.
Featured Post Carousel ala CB Magazine
Jika ingin menampilkan featured post carousel ala CB Magazine yang ada di bagian paling atas atau di bawah menu, berikut ini kodenya:
CSS & JS
Simpan di atas </head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#main-home {float: left;margin-bottom: 20px;width: 640px;}
.home-widget {float: left;margin: 0 0 10px 0;width: 100%;}
.es-carousel-wrapper{position:relative;clear:both;width:100%}
.es-carousel{margin:0;overflow:hidden}
.es-carousel ul{display:none;padding:0;margin:0}
.es-carousel ul li{height:100%;float:left;display:block;position:relative}
.es-carousel ul li a{display:block}
.es-carousel ul li a img{display:block;border:0;max-height:100%;max-width:100%;padding:0;margin:0}
.es-nav span{position:absolute;text-indent:-9000px;cursor:pointer;top:0;right:0}
.es-nav span.es-nav-next{right:0;width:23px;height:20px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftH__4kIBAaWzAHJByOrGqlke-poAOsrVoqsVcl40Nhuq4DRNgJmx0hiZJpyln5KKlRPod1a0LKPkLVyRnl3KdUjq1ZmWlu3t8L_Rf4sBeIHKHDvzd6UXTsahprU8K35iHM2m_6Md9LkH/s1600/nextbn.gif) 0 0}
.es-nav span.es-nav-prev{right:25px;width:23px;height:20px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyI4f2eVKr_6H169lTR7c_pA5OAPoV1BkdOBn0Lkha_J09SUgnq3zoJHYKkm0mrhMuz_sv6uVNlgRJsFMKjLmP9Z-rildHBTVUztAZOKc5uDEmdMlPq0DHtZH2I0zaz4f-qJ9Yvy4FkwXD/s1600/prevbn.gif) 0 0}
.carousel{float:left;margin:0;overflow:hidden;width:100%;height:134px}
.carousel ul{display:inline;float:left;width:100%}
.carousel ul li{display:inline;float:left;width:24%;margin-right:2%}
.carousel ul li:last-child{margin-right:0}
.carousel-image{float:left;position:relative;width:100%;height:134px}
.carousel-image img{-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;width:100%;height:134px}
.carousel-image img:hover{opacity:.85}
.carousel-text{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXKxmCpNLU_eWdA1I5GjM4hDJpRkq0iprjMxfS3WBnGBIcSeO5eVOWm3cnM2bv2HvlYqf_vOHq7PtWqtVeqU53yMbJScNyahmflQA0bBFH-IGFDtsPKe2szx07KiBeFlMOALOqevPLS-Q/s1600/uj-opacity-40.png);float:left;padding:2%;position:absolute;bottom:0;width:96%}
.carousel-text a{color:#fff;font:700 12px/16px 'Open Sans Condensed',sans-serif;text-transform:none}
.carousel-text a:visited{color:#fff}
</style>
<script type='text/javascript'>
//<![CDATA[
(function(window,$,undefined){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false;}
function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault();}
if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX- x;var dy=startY- y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft();}
else{config.wipeRight();}}
else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown();}
else{config.wipeUp();}}}}
function onTouchStart(e)
{if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false);}}
if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false);}});return this;};$.elastislide=function(options,element){this.$el=$(element);this._init(options);};$.elastislide.defaults={speed:450,easing:'',imageW:190,margin:0,border:0,minItems:1,current:0,onClick:function(){return false;}};$.elastislide.prototype={_init:function(options){this.options=$.extend(true,{},$.elastislide.defaults,options);this.$slider=this.$el.find('ul');this.$items=this.$slider.children('li');this.itemsCount=this.$items.length;this.$esCarousel=this.$slider.parent();this._validateOptions();this._configure();this._addControls();this._initEvents();this.$slider.show();this._slideToCurrent(false);},_validateOptions:function(){if(this.options.speed<0)
this.options.speed=450;if(this.options.margin<0)
this.options.margin=4;if(this.options.border<0)
this.options.border=1;if(this.options.minItems<1||this.options.minItems>this.itemsCount)
this.options.minItems=1;if(this.options.current>this.itemsCount- 1)
this.options.current=0;},_configure:function(){this.current=this.options.current;this.visibleWidth=this.$esCarousel.width();if(this.visibleWidth<this.options.minItems*(this.options.imageW+ 2*this.options.border)+(this.options.minItems- 1)*this.options.margin){this._setDim((this.visibleWidth-(this.options.minItems- 1)*this.options.margin)/ this.options.minItems );
this._setCurrentValues();this.fitCount=this.options.minItems;}
else{this._setDim();this._setCurrentValues();}
this.$slider.css({width:this.sliderW});},_setDim:function(elW){this.$items.css({marginRight:this.options.margin,width:(elW)?elW:this.options.imageW+ 2*this.options.border}).children('a').css({borderWidth:this.options.border});},_setCurrentValues:function(){this.itemW=this.$items.outerWidth(true);this.sliderW=this.itemW*this.itemsCount;this.visibleWidth=this.$esCarousel.width();this.fitCount=Math.floor(this.visibleWidth/this.itemW);},_addControls:function(){this.$navNext=$('<span class="es-nav-next">Next</span>');this.$navPrev=$('<span class="es-nav-prev">Previous</span>');$('<div class="es-nav"/>').append(this.$navPrev).append(this.$navNext).appendTo(this.$el);},_toggleControls:function(dir,status){if(dir&&status){if(status===1)
(dir==='right')?this.$navNext.show():this.$navPrev.show();else
(dir==='right')?this.$navNext.hide():this.$navPrev.show();}
else if(this.current===this.itemsCount- 1||this.fitCount>=this.itemsCount)
this.$navNext.show();},_initEvents:function(){var instance=this;$(window).bind('resize.elastislide',function(event){instance._setCurrentValues();if(instance.visibleWidth<instance.options.minItems*(instance.options.imageW+ 2*instance.options.border)+(instance.options.minItems- 1)*instance.options.margin){instance._setDim((instance.visibleWidth-(instance.options.minItems- 1)*instance.options.margin)/ instance.options.minItems );
instance._setCurrentValues();instance.fitCount=instance.options.minItems;}
else{instance._setDim();instance._setCurrentValues();}
instance.$slider.css({width:instance.sliderW+ 10});clearTimeout(instance.resetTimeout);instance.resetTimeout=setTimeout(function(){instance._slideToCurrent();},200);});this.$navNext.bind('click.elastislide',function(event){instance._slide('right');});this.$navPrev.bind('click.elastislide',function(event){instance._slide('left');});this.$items.bind('click.elastislide',function(event){instance.options.onClick($(this));});instance.$slider.touchwipe({wipeLeft:function(){instance._slide('right');},wipeRight:function(){instance._slide('left');}});},_slide:function(dir,val,anim,callback){if(this.$slider.is(':animated'))
return false;var ml=parseFloat(this.$slider.css('margin-left'));if(val===undefined){var amount=this.fitCount*this.itemW,val;if(amount<0)return false;if(dir==='right'&&this.sliderW-(Math.abs(ml)+ amount)<this.visibleWidth){amount=this.sliderW-(Math.abs(ml)+ this.visibleWidth)- this.options.margin;this._toggleControls('right',-1);this._toggleControls('left',1);}
else if(dir==='left'&&Math.abs(ml)- amount<0){amount=Math.abs(ml);this._toggleControls('left',-1);this._toggleControls('right',1);}
else{var fml;(dir==='right')?fml=Math.abs(ml)+ this.options.margin+ Math.abs(amount):fml=Math.abs(ml)- this.options.margin- Math.abs(amount);if(fml>0)
this._toggleControls('left',1);else
this._toggleControls('left',-1);if(fml<this.sliderW- this.visibleWidth)
this._toggleControls('right',1);else
this._toggleControls('right',-1);}
(dir==='right')?val='-='+ amount:val='+='+ amount}
else{var fml=Math.abs(val);if(Math.max(this.sliderW,this.visibleWidth)- fml<this.visibleWidth){val=-(Math.max(this.sliderW,this.visibleWidth)- this.visibleWidth);if(val!==0)
val+=this.options.margin;this._toggleControls('right',-1);fml=Math.abs(val);}
if(fml>0)
this._toggleControls('left',1);else
this._toggleControls('left',-1);if(Math.max(this.sliderW,this.visibleWidth)- this.visibleWidth>fml+ this.options.margin)
this._toggleControls('right',1);else
this._toggleControls('right',-1);}
$.fn.applyStyle=(anim===undefined)?$.fn.animate:$.fn.css;var sliderCSS={marginLeft:val};var instance=this;this.$slider.applyStyle(sliderCSS,$.extend(true,[],{duration:this.options.speed,easing:this.options.easing,complete:function(){if(callback)callback.call();}}));},_slideToCurrent:function(anim){var amount=this.current*this.itemW;this._slide('',-amount,anim);},add:function($newelems,callback){this.$items=this.$items.add($newelems);this.itemsCount=this.$items.length;this._setDim();this._setCurrentValues();this.$slider.css({width:this.sliderW});this._slideToCurrent();if(callback)callback.call($newelems);},destroy:function(callback){this._destroy(callback);},_destroy:function(callback){this.$el.unbind('.elastislide').removeData('elastislide');$(window).unbind('.elastislide');if(callback)callback.call();}};var logError=function(message){if(this.console){console.error(message);}};$.fn.elastislide=function(options){if(typeof options==='string'){var args=Array.prototype.slice.call(arguments,1);this.each(function(){var instance=$.data(this,'elastislide');if(!instance){logError("cannot call methods on elastislide prior to initialization; "+"attempted to call method '"+ options+"'");return;}
if(!$.isFunction(instance[options])||options.charAt(0)==="_"){logError("no such method '"+ options+"' for elastislide instance");return;}
instance[options].apply(instance,args);});}
else{this.each(function(){var instance=$.data(this,'elastislide');if(!instance){$.data(this,'elastislide',new $.elastislide(options,this));}});}
return this;};})(window,jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.UjScrollPause=function(o){o=$.extend({bPrev:null,bNext:null,bGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,pauseOnHover:false,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul",div),tLi=$("li",ul),tl=tLi.size(),v=o.visible,paused=0;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}o.pauseOnHover?ul.hover(function(){paused=1},function(){paused=0}):"";var li=$("li",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden","float":o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width(),height:li.height()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.bPrev){$(o.bPrev).click(function(){return go(curr-o.scroll)})}if(o.bNext){$(o.bNext).click(function(){return go(curr+o.scroll)})}if(o.bGo){$.each(o.bGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})})}if(o.mouseWheel&&div.mousewheel){div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)})}if(o.auto){setInterval(function(){go(curr+o.scroll)},o.auto+o.speed)}function vis(){return li.slice(curr).slice(0,v)}function go(to){if(!running&&!paused){if(o.beforeStart){o.beforeStart.call(this,vis())}if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else{if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else{curr=to}}}else{if(to<0||to>itemLength-v){return}else{curr=to}}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd){o.afterEnd.call(this,vis())}running=false});if(!o.circular){$(o.bPrev+","+o.bNext).removeClass("disabled");$((curr-o.scroll<0&&o.bPrev)||(curr+o.scroll>itemLength-v&&o.bNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0}function width(el){return el[0].offsetWidth+css(el,"marginLeft")+css(el,"marginRight")}function height(el){return el[0].offsetHeight+css(el,"marginTop")+css(el,"marginBottom")}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizSqv0DUUw98nNGu2qE2bqVVYtwYKaiMLSQHwzY09D7MF3MXslbSkfcA5CY7N5N0dNNS5GEEDa7_VOxWfqkaY8hloRM6uPh9-ZpRA7AQ9YC1FjYOgIsixePxP7YxYYroU9dEqcUaJKkSw/s1600/noimgs.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 65;
summaryTitle = 30;
summaryPost2 = 150;
summaryPosta = 220;
numposts = 9;
numposts10 = 15;
label2 = "Pemain";
Title2 = "Pemain";
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 showrecentposts4a(z){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
document.write("<ul>");
for(var o=0;
o<numposts10;
o++){var w=z.feed.entry[o];
var g=w.title.$t;
var f;
var p;
if(o==z.feed.entry.length){break
}for(var l=0;
l<w.link.length;
l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;
break
}}for(var l=0;
l<w.link.length;
l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];
break
}}if("content" in w){var r=w.content.$t
}else{if("summary" in w){var r=w.summary.$t
}else{var r=""
}}postdate=w.published.$t;
if(j>imgr.length-1){j=0
}img[o]=imgr[j];
s=r;
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[o]=d
}var q=[1,2,3,4,5,6,7,8,9,10,11,12];
var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var u=postdate.split("-")[2].substring(0,2);
var h=postdate.split("-")[1];
var t=postdate.split("-")[0];
for(var e=0;
e<q.length;
e++){if(parseInt(h)==q[e]){h=x[e];
break
}}var n=u+" "+h+" "+t;
var v='<li><div class="carousel-image"><a href="'+p+'"><img width="191" height="100" class="" src="'+img[o]+'"/></a><div class="carousel-text"><a href="'+p+'">'+g+"</a></div></div></li>";
document.write(v);
}};
//]]>
</script>
</b:if>
HTML
Simpan di bawah akhir kode menu template Anda.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='main-home'>
<div class='clear'/>
<div class='home-widget'>
<h3 class='widget-title fix'><span><script>
document.write('<a href="/search/label/'+label2+'?max-results=10">'+Title2+'</a>'); </script></span></h3>
<div class='carousel small-cat-story es-carousel-wrapper'>
<div class='es-carousel'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label2+"?max-results="+numposts10+"&orderby=published&alt=json-in-script&callback=showrecentposts4a\"><\/script>");
</script>
</div><!--es-carousel-->
</div><!--carousel-->
</div><!--home-widget-->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$('.carousel').elastislide({
imageW : 155,
minItems : 2,
margin : 10
});
});
//]]>
</script>
</div><!--mainhome-->
</b:if>
Demikian Cara Membuat Featured Image Galeri Gambar Carousel di Halaman Depan Blog. Good Luck & Happy Blogging! (www.contohblog.com).*
