Minggu, 17 Juni 2012

Cara Membuat Featured Post Slider


Berikut tutorial membuat Featured Posts Slider:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/stepcarousel.js'/>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;board_carusel&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;board_item&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: [&#39;http://i34.tinypic.com/317e0s5.gif&#39;, -5, 80], rightnav: [&#39;http://i38.tinypic.com/33o7di8.gif&#39;, -20, 80]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;inline&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/*board*/
#board{
width:977px;
height:276px;
overflow:hidden;
margin:0 0 0 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykwjdOK-AIskVpXMp6d9OjmK0lhY-uzFVZu-NAC7z6TdGtbtF5WRQtZuUdk1cN3Cn0lpqvTDQxzKJb9USXIZ6p_6wE50plJ1ghVaj_NQDhyphenhyphenK-Z6z16g6vof_1PiNYZZX9n8c2y9QnmoeX/s1600/bgr_board.png) no-repeat;
}
#board_left{
float:left;
padding:22px 0 0 27px;
}
#header_rss{
float:right;
padding:78px 80px 0 0;
}
#board_items{
width:679px;
padding:5px 0 0 0;
}
#board_body{
width:647px;
margin:0 0 0 15px;
}
#board_carusel{
width:647px;
height:131px;
position:relative;
}
#board_carusel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.board_item{
width:647px;
height:173px;
overflow:hidden;
}
#board_body h2{
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
font-weight:normal;
margin:0 0 28px 0;
}
#board_body strong{
font-size:12px;
color:#000;
line-height:18px;
display:block;
}
#board_body p{
font-size:12px;
color:#000;
line-height:18px;
padding:0 0 10px 0;
}
#board_body p img{
float:left;
border:1px solid #83b2c4;
margin:0 10px 0 0;
width:161px;
height:107px;
}
#board_body p a{
color:#000;
}
#board_body p.more a{
text-decoration:underline;
}
#board_body p.more a:hover{
text-decoration:none;
}
#board_carusel_nav{
width:100%;
overflow:hidden;
}
#board_carusel_nav li{
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
float:left;
}
#board_carusel_nav a{
display:block;
float:left;
background:#7ac2df;
border-right:1px solid #85d7f7;
width:33px;
text-align:center;
padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
text-decoration:underline;
font-weight:bold;
background:#a7e2f9;
border-right:1px solid #a7e2f9;
}

5. Tambahkan kode HTML berikut diatas <div id='content-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id='board'>
<div id='board_left'>
<div id='board_items'>
<div id='board_body'>
<h2>Featured Posts</h2>
<div id='board_carusel'>
<div class='belt'>
<div class='board_item'>
<!-- board_item -->
<p><img alt='Shafiyyah Binti Abdul Muththalib' src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a href='#'>Shafiyyah Binti Abdul Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang tangguh, beliau merawat dan membesarkan putranya sendiri semenjak suaminya wafat.....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Asiyah, Wanita yang Ditampakkan Surga Untuknya' src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a href='#'>Asiyah, Wanita yang Ditampakkan Surga Untuknya</a></strong>Iman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta&#8217;ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir&#8217;aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Fathimah binti Al-Yaman' src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra&#39;, nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Ummu Fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu &#39;anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu &#39;anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu &#39;anhu, &quot;Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img alt='Ummu Haram Binti Malhan' src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja. Akhirnya Allah mengabulkan angan-angannya dan mewujudkan cita-citanya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div> </div>
</div>
</div>
<ul id='board_carusel_nav'>
<li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 1)'>1</a></li>
<li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 2)'>2</a></li>
<li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 3)'>3</a></li>
<li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 4)'>4</a></li>
<li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 5)'>5</a></li>
</ul>
</div>
</div>
<div id='header_rss'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Rss'><img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nfRwuq4Uk2my3JFuFzbh7eUk26vvhbr-B5CD7i14X1_jtbTh3dnGU7PGRdWmYLWGIqVbLbwqmCYsti0thb4o4JAv-6mR8AP6PBAJP0EQ4l7y9V4Zh3hT0rgFxCP6iPnKorx5c_8WzBXb/s1600/button_rss.png'/></a>
</div>
</div>

6. Selesai. Simpan template
7. Selamat mencoba
READ MORE - Cara Membuat Featured Post Slider

Cara Membuat Featured Post (Menu Slide) Dengan JQuery


Dalam desain website atau blog banyak cara untuk membuat tampilan 'featured content' atau post nampak profesional dan cantik dengan bantuan JQuery. Sehingga menambah jumlah ragam fetured content slider atau slide show dalam dunia desain.

Tertarik? Ikuti langkah-langkah berikut:

1. Setelah sig in pada account blogger sobat- pada dasbor- Klik Tata Letak- Edit HTML
2. Tambahkan Script JQuery dibawah ini sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

3. Kemudian tambahkan pula script dibawah ini dibawah script JQuery (nomor 2) tadi:


<!-- Featured Gallery script -->
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Cycle Plugin (with Transition Definitions)
* Examples and documentation at: http://jquery.malsup.com/cycle/
* Copyright (c) 2007-2009 M. Alsup
* Version: 2.63 (17-MAR-2009)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.2.6 or later
*
* Originally based on the work of:
* 1) Matt Oakes
* 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
* 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
*/
;(function($){var ver="2.63";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length==0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){options=handleArguments(this,options,arg2);if(options===false){return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=options.slideExpr?$(options.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts=buildOptions($cont,$slides,els,options,o);if(opts===false){return;}if(opts.timeout||opts.continuous){this.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},opts.continuous?10:opts.timeout+(opts.delay||0));}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;if(arg2===true){options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}return false;default:options={fx:options};}}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(this.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var i=0;i<els.length;i++){var $e=$(els[i]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth;}if(!h){h=e.offsetHeight;}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:$el.height();this.cycleW=(opts.fit&&opts.width)?opts.width:$el.width();if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingOp=($.browser.opera&&this.cycleW==42&&this.cycleH==19&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).click(function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).click(function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(var i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];var tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){var tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(var i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}log("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(curr,next,opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn(curr,next,opts,fwd);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}if($.isFunction(opts.prevNextClick)){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a=($.isFunction(opts.pagerAnchorBuilder))?opts.pagerAnchorBuilder(i,el):'<a href="#">'+(i+1)+"</a>";if(!a){return;}var $a=$(a);if($a.parents("body").length==0){$a.appendTo($p);}$a.bind(opts.pagerEvent,function(){opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if($.isFunction(opts.pagerClick)){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return false;});if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250};})(jQuery);
/*
* jQuery Cycle Plugin Transition Definitions
* This script is a plugin for the jQuery Cycle Plugin
* Examples and documentation at: http://malsup.com/jquery/cycle/
* Copyright (c) 2007-2008 M. Alsup
* Version: 2.52
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function($){$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});opts.speed=opts.speed/2;opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(var i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(var i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var t=parseInt(h/2);var l=parseInt(w/2);clip="rect("+t+"px "+l+"px "+t+"px "+l+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function showVideo(id) {
document.write("<object width=\"291\" height=\"225\"><param name=\"movie\" value=\"http://www.youtube.com/v/"+id+">&amp;hl=en&amp;fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/"+id+"&amp;hl=en&amp;fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"291\" height=\"225\"></embed></object>");
}
$(function() {
$('#featured').cycle({
fx: 'scrollLeft',
speed: 700,
timeout: 5000
});
});
$(document).ready(function(){
$(".click").click(function(){
$("#panel").slideToggle("medium");
$(this).toggleClass("active"); return false;
});
});
//]]>
</script>
<!-- End Featured Gallery script -->

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Features */
#featured {height: 290px; overflow: hidden; background: url('http://sites.google.com/site/amatullah83/background/slide0002_background.gif') no-repeat top center; clear: both; font-size: 0.85em; margin-bottom: 5px;}
#featured .post {padding: 20px;}
#featured .post .featured-thumb {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7l_u7iT3SB_qSuF8Ca8pN4BGUtE-eTEu1OY9mcJGt7G1Uvy_eSmMQYvTlIMTwhew0EG6zbir-R08o-qlzRI41WRnH46L8Ka24vE_vdjhzJU-_kmUAmdKIo8QDEOqtRuk-EUmYXMfHsk/s400/nothumb.gif') no-repeat center; float: left; border: 5px solid #FFFF99; overflow: hidden; height: 120px; width: 200px; margin-right: 15px;}
#featured .post .featured-thumb img {width: 200px;}
#featured .post .featured-text {padding-bottom: 10px;}
#featured .post .featured-title {font: normal 1.1em Georgia, Times, Serif; line-height: 1.1em;}
#featured .post .featured-comment {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjum1kEoOgu0K6P2s5nBFn9bghY4sBjSXa8mM0sjymdI1sdUUKCXIPuW2Swy-AaD5KCr4XzNc3Ryy5brzc7R5BRPaCjzaKKRJ2aGw-aF9TKG4qFsa_W8U0wu9T0wCVoijIh9EctMujV4kE/s400/entry-comment.png') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-date {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEut4q9VEbKP4SZuAkntwk4Y3e6Cg773NY_DgUrlcavEhoXv-ZPQ8SWpuWDHV0yUB4us6m6ksX4_AbtbkTuKtJa9JDcwjO1pU9p-0dFQyLbi5b_IJdgPu8smV_9Fk_PLb17hZK8DAtn-k/s400/entry-date.gif') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
#featured .post .featured-read {display: block; float: right; background: #A9F5F2; width: 80px; color: #fff !important; padding: 5px 0px; text-align: center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}

5. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<!-- begin featured -->
<div id="featured">
<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Cinta Sepanjang masa</a></h1></div>
<div class="featured-thumb"><img src="http://i42.tinypic.com/eld8k0.jpg" /></div>
<p>Ia adalah wanita yang terus hidup dalam hati suaminya sampaipun ia telah meninggal dunia. Tahun-tahun yang terus berganti tidak dapat mengikis kecintaan sang suami padanya. Panjangnya masa tidak dapat menghapus kenangan bersamanya di hati sang suami.....</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>
<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Kisah Mahar Paling Mulia</a></h1></div>
<div class="featured-thumb"><img src="http://i43.tinypic.com/2rrmn38.jpg" /></div>
<p>Sejarah telah berbicara tentang berbagai kisah yang bisa kita jadikan pelajaran dalam menapaki kehidupan. Sejarah pun mencatat perjalanan hidup para wanita muslimah yang teguh dan setia di atas keislamannya. ....</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>
<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Saudariku Inilah Kemuliaanmu</a></h1></div>
<div class="featured-thumb"><img src="http://i42.tinypic.com/2cnxjk9.jpg" /></div>
<p>Dan kemuliaan (yang sebenarnya) itu hanyalah milik Allah, milik Rasul-Nya dan milik orang-orang yang beriman, akan tetapi orang-orang munafik itu tiada mengetahui." (Qs. al-Munaafiqun: 8).....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>
<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Cinta Sejati Dalam Islam</a></h1></div>
<div class="featured-thumb"><img src="http://i40.tinypic.com/dfkqo5.jpg" /></div>
<p>Makna ‘Cinta Sejati’ terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu ‘Cinta Sejati’ dan bagaimana pandangan Islam terhadapnya?...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>
<div class="post">
<div class="featured-text"><h1><a href=http://ilovebloggink.blogspot.com class="featured-title">Luangkanlah Waktumu Membaca Al-Qur'an</a></h1></div>
<div class="featured-thumb"><img src="http://i42.tinypic.com/1z6qzgn.jpg" /></div>
<p>"Ingatlah hanya dengan mengingat Alloh-lah hati menjadi tentram.” (Qs. ar-Ra'd: 28) ...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Luangkanlah Waktumu Membaca Al-Qur'an">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>
</div>
<!-- end featured -->
<!-- more -->

Catatan: Silahkan edit kode HTML diatas sesuaikan dengan postingan pada blog sobat.
# alamat atau url link posting, tulisan berwarna BIRU judul postingan, tulisan berwarna HIJAU deskripsi singkat dari postingan, sedang tulisan berwarna MERAH url image/ thumbnail postingan
6. Simpan template dan lihat hasilnya pada blog sobat.
READ MORE - Cara Membuat Featured Post (Menu Slide) Dengan JQuery

Cara Membuat Efek JQuery Link Nudging Pada Tabel


JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang.

1. Setelah sig in pada account blogger sobat- pada dasbor- Klik Rancangan- Edit HTML
2. Tambahkan Script JQuery berikut diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

3. Tambahkan lagi script berikut dibawah script JQuery tadi:

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

4. Simpan, dan lihat hasilnya pada blog sobat.
Mudah bukan? Selamat mencoba, semoga berhasil dan bermanfaat.
READ MORE - Cara Membuat Efek JQuery Link Nudging Pada Tabel

Cara Membuat Background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?




1. Loggin ke Blogger - Layout - Edit HTML dan cari kode dibawah.

.sidebar h2 {

2. Tambah kode berikut dibawah kode tadi

background:url(alamat image anda disini)repeat-x;

3. Isi tulisan berwarna merah diatas dengan alamat gambar anda
4. Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
5. Tambahkan saja kode berikut pada sidebar content

.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

Note:
Edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu untuk warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!
Untuk mengedit warna font anda bisa lihat kode warna disini
READ MORE - Cara Membuat Background Pada Judul Sidebar

Cara Membuat Komentar Admin Berbeda Dengan Komentar Pengunjung Blog


Berkunjung ke beberapa blog terkadang kita melihat daftar komentator suatu postingan dan mendapatkan komentar admin atau pemilik blog tampak berbeda dengan komentar pengunjung. Sebagian template telah menyediakan fitur ini sedangkan lainnya harus dimodifikasi lagi.
Nah bagi anda yang templatenya belum memiliki fitur tersebut berikut trik membuat komentar pemilik blog berbeda dengan pengunjung:

Langkah 1
Login ke account blogger Anda!

Langkah 2
Jangan lupa beri tanda centang Expand Widget Templates

Langkah 3
Copy paste kode di bawah sebelum kode ]]></b:skin>

.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Untuk kode yang berwarna merah bisa anda ganti sesuai selera, bisa lihat kode warnanya disini

Langkah 4
Cari kode seperti di bawah:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kode warna merah adalah kode baru yang harus di sisipkan di antara kode di atas.

Langkah 5
Simpan template! Sekarang lihat artikel yang ada komentar anda, sudah berubah tampilannya apa belum? Selamat mencoba :)
READ MORE - Cara Membuat Komentar Admin Berbeda Dengan Komentar Pengunjung Blog