1.

letakkan kode berikut di atas kode ]]></b:skin>

/* Slide Content
----------------------------------------------- */
.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;}
2. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
</div>
</b:if>
3. Kemudian masukkan kode berikut di atas kode ]]></b:skin> :
/* Lofslidernews */
#slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f
6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2
100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); backgr
ound-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),c
olor-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6
0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 1
00%);
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px so
lid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow
:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:60
0px;height:298px;}
.slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:
hidden}
ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385p
x;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/g
wCsmb8Fcks/s1600/transparant.png);padding:10px}
ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:
block;margin:0}
ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:
0}
ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margi
n:0;padding:0}
ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden
;margin:0;padding:0}
ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px
;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:405px;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:10px;top:10px;z-index:10;height:
300px;width:200px;overflow:hidden;color:#333}
.slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0
}
.slider-navigator li div{background-color:#e2e2e2;background-image: -moz-lineargradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#ff
f 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%)
; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f
ff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#ff
f 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 10

0%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:

0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
.slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;bor
der:1px solid #999}
.slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left
;margin:5px 5px 5px 0}
.slider-navigator li.active img{border:#eee solid 1px}
.slider-navigator li.active h5{color:#0178d3}
4. masukkan kode script berikut ini diatas </head>
<script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/
javascript'/>
<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 Lic
ense 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 slidesh
ow
maxItemDisplay
: 5,
startItem
: 0,
navPosition
: 'vertical',
navigatorHeight
: 60,
navigatorWidth
: 210,
duration
: 600,
navItemsSelector
: '.slider-navigator li',
navOuterSelector
: '.slider-navigator-outer' ,
isPreloaded
: true,
easing
: 'easeInOutQuad'
}
$.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.star
tItem > 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.navInnerSe
lector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.naviga
torWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.setti
ngs.navigatorWidth );
this.navigatorOuter.height(
this.settings.navigatorHeight );
} else {
this.navigatorInner.height( this.slides.length * this.settings.navig
atorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.sett
ings.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', 'widt
h':( 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) == "obje

ct" ){
this.registerButtonsControl( 'click', this.settings.buttons, thi
s );
}
if( this.settings.auto )
this.play( this.settings.interval,'next', true );
return this;
},
onComplete:function(){
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );
his.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.maxIt
emDisplay-1) {
this.settings.startItem = currentIndex - this.settings.maxIt
emDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0
;
if (this.settings.startItem >this.slides.length-this.setting
s.maxItemDisplay) {
this.settings.startItem = this.slides.length-this.settin
gs.maxItemDisplay;
}
}
this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]
+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
{duration:500, easing:'easeInOut
Quad'} );
},

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.sli
des.length-1);
this.nextNo
= this.currentNo + (this.currentNo < this.slides.len
gth-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.s
ettings.duration, easing:this.settings.easing} );
$(this.slides).eq(index).stop().animate( {opacity:1}, {durat
ion: this.settings.duration, easing:this.settings.easing} );
}else {
this.wrapper.stop().animate( obj, {duration: this.settings.d
uration, 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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVn
YEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 70;
summaryTitle = 20;
numposts = 10;
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 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","N
ov","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="'+p
osturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h
3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h
3></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","N
ov","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 width="60" height="44" class="alignnone" src="'+im
g[i]+'"/><h5>'+posttitle+'</h5></div></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>
5. tambah html masukan kode ini
<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numpo
sts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>
");
</script>
</ul>

</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numpo
sts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script
>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('#slider').lofJSidernews({
interval:6000,
duration:800,
mainWidth: 405,
navigatorWidth: 200,
maxItemDisplay:5,
easing:'easeInOutQuad',
auto:true,
isPreloaded: false
});
});
</script>