slide headers
PASTEKAN SAJA DI GADGET: HTML/JAVASCRIPT .
KEBAWAH slide headers
==================================
PASTEKAN KODE DI BAWAH INI DI ATAS ]]></b:skin>
/*------------------------------------------------
SLIDESHOW AREA
--------------------------------------------------*/
#slideshow {width:940px;margin:0 0 20px 0;background: rgba(255,255,255,0.8);}
#slider{float:left;margin:20px 20px 10px 30px}
.featured-post{width:900px}
.slider-image{width:400px;height:250px;float:left}
.slider-post{width:470px;margin:0 0 0 15px;float:left;font-size:110% !important;line-height:1.8em}
.slider-post-meta {background:none repeat scroll 0 0 #599531;color:#fff;font-size:11px;margin:5px 0 15px;padding:5px;line-height:1.2em}
.slider-post-meta a {color:#BDE9FB;font-style:normal}
.slider-post-meta a:hover {color:#F9D7A4}
#slider-nav {float:left;padding-left:440px;margin:0 0 20px}
#slider-nav a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSr57fvnpBdHPVU0CTeAk0eYvPqy9ZrH45Fme14fGYUSmVlkbAo-2xrsw7h0ewJ748wnMaI4hyphenhyphenw6PJsoJ5vc1Gm9sQFv9vONgEOp0YvIJ8MvrrNtUsqPjdXzBEG9fw7hxNn6uGnFHh4REu/s1600/control-1.png) no-repeat;display:block;float:left;height:14px;margin-right:4px;text-indent:-9999px;width:15px;}
div#slider-nav a.activeSlide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NvhWntwIZKF6FJUMO84-tmOVSYK90ZG0ueH2hHeDlHfzNXa_YYWt33wK2yQBfiB7NYAAqPMKXvRQo8xc6sp6wRdr3vWfPXVEcsQvwiyo0TB800mfbEBQO6DtCN4vwTEN88jFmUYB7UuR/s1600/control-2.png) no-repeat;}
.slider-arrow{position:relative}
span#prev, span#next{display:block;height:23px;position:absolute;text-indent:-9999px;top:140px;width:13px;}
span#prev {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYoMdIcf4W54-x7pJk1zi7W6KFkH99BC-cZSlXXL-Ybb5QQHDrILY72PqhT9YoZwqs3NCcBdFnjpxZdXH5ur7jxqqOyGOkDJFmOyMEp0p6tRglUkpZsnFq7tTjQAqwszWfYCs5vnOByP1/s1600/prev.png) no-repeat;left:10px }
span#next {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3AgVddtHknj_qFxdsafPPMZ2WFKyEyn8eMxewPnF-MnUCuy5vmx3g2SXiTtRlHA_Z8xLu6gnxHUijVQFG4OPtqJeIeR152JbR86WwVZvxu-XUMb8hNJSMVhhbJuQVV2sy9KWKI6NfgRv/s1600/next.png) no-repeat ;right:5px}
a.readmore span {display:block;height:34px;padding:0 5px 0 10px;}
.readmore{
background:#F4F9FB;display:block;float:right;height:34px;line-height:34px;margin:8px 10px 0 0;padding-right:9px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:15px;-khtml-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;
-moz-box-shadow: 1px 1px 1px #D5D5D5 inset;box-shadow: 1px 1px 1px #D5D5D5 inset;-webkit-box-shadow: 1px 1px 1px #D5D5D5 inset;
}.readmore:hover{
background:#ECF1E8;text-shadow:1px 1px 1px #357BC5;color:#fff
}
--------------------------------------------------*/
#slideshow {width:940px;margin:0 0 20px 0;background: rgba(255,255,255,0.8);}
#slider{float:left;margin:20px 20px 10px 30px}
.featured-post{width:900px}
.slider-image{width:400px;height:250px;float:left}
.slider-post{width:470px;margin:0 0 0 15px;float:left;font-size:110% !important;line-height:1.8em}
.slider-post-meta {background:none repeat scroll 0 0 #599531;color:#fff;font-size:11px;margin:5px 0 15px;padding:5px;line-height:1.2em}
.slider-post-meta a {color:#BDE9FB;font-style:normal}
.slider-post-meta a:hover {color:#F9D7A4}
#slider-nav {float:left;padding-left:440px;margin:0 0 20px}
#slider-nav a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSr57fvnpBdHPVU0CTeAk0eYvPqy9ZrH45Fme14fGYUSmVlkbAo-2xrsw7h0ewJ748wnMaI4hyphenhyphenw6PJsoJ5vc1Gm9sQFv9vONgEOp0YvIJ8MvrrNtUsqPjdXzBEG9fw7hxNn6uGnFHh4REu/s1600/control-1.png) no-repeat;display:block;float:left;height:14px;margin-right:4px;text-indent:-9999px;width:15px;}
div#slider-nav a.activeSlide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NvhWntwIZKF6FJUMO84-tmOVSYK90ZG0ueH2hHeDlHfzNXa_YYWt33wK2yQBfiB7NYAAqPMKXvRQo8xc6sp6wRdr3vWfPXVEcsQvwiyo0TB800mfbEBQO6DtCN4vwTEN88jFmUYB7UuR/s1600/control-2.png) no-repeat;}
.slider-arrow{position:relative}
span#prev, span#next{display:block;height:23px;position:absolute;text-indent:-9999px;top:140px;width:13px;}
span#prev {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYoMdIcf4W54-x7pJk1zi7W6KFkH99BC-cZSlXXL-Ybb5QQHDrILY72PqhT9YoZwqs3NCcBdFnjpxZdXH5ur7jxqqOyGOkDJFmOyMEp0p6tRglUkpZsnFq7tTjQAqwszWfYCs5vnOByP1/s1600/prev.png) no-repeat;left:10px }
span#next {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3AgVddtHknj_qFxdsafPPMZ2WFKyEyn8eMxewPnF-MnUCuy5vmx3g2SXiTtRlHA_Z8xLu6gnxHUijVQFG4OPtqJeIeR152JbR86WwVZvxu-XUMb8hNJSMVhhbJuQVV2sy9KWKI6NfgRv/s1600/next.png) no-repeat ;right:5px}
a.readmore span {display:block;height:34px;padding:0 5px 0 10px;}
.readmore{
background:#F4F9FB;display:block;float:right;height:34px;line-height:34px;margin:8px 10px 0 0;padding-right:9px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:15px;-khtml-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;
-moz-box-shadow: 1px 1px 1px #D5D5D5 inset;box-shadow: 1px 1px 1px #D5D5D5 inset;-webkit-box-shadow: 1px 1px 1px #D5D5D5 inset;
}.readmore:hover{
background:#ECF1E8;text-shadow:1px 1px 1px #357BC5;color:#fff
}
LALU LETAKKAN KODE DIBAWAH INI LAGI DI ATAS </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
/* * Superfish v1.4.8 - jQuery menu widget Copyright (c) 2008 Joel Birch */
;(function($){$.fn.superfish=function(op){var sf=$.fn.superfish,c=sf.c,$arrow=$(['<span class="',c.arrowClass,'"> �</span>'].join('')),over=function(){var $$=$(this),menu=getMenu($$);clearTimeout(menu.sfTimer);$$.showSuperfishUl().siblings().hideSuperfishUl();},out=function(){var $$=$(this),menu=getMenu($$),o=sf.op;clearTimeout(menu.sfTimer);menu.sfTimer=setTimeout(function(){o.retainPath=($.inArray($$[0],o.$path)>-1);$$.hideSuperfishUl();if(o.$path.length&&$$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}},o.delay);},getMenu=function($menu){var menu=$menu.parents(['ul.',c.menuClass,':first'].join(''))[0];sf.op=sf.o[menu.serial];return menu;},addArrow=function($a){$a.addClass(c.anchorClass).append($arrow.clone());};return this.each(function(){var s=this.serial=sf.o.length;var o=$.extend({},sf.defaults,op);o.$path=$('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){$(this).addClass([o.hoverClass,c.bcClass].join(' ')).filter('li:has(ul)').removeClass(o.pathClass);});sf.o[s]=sf.op=o;$('li:has(ul)',this)[($.fn.hoverIntent&&!o.disableHI)?'hoverIntent':'hover'](over,out).each(function(){if(o.autoArrows)addArrow($('>a:first-child',this));}).not('.'+c.bcClass).hideSuperfishUl();var $a=$('a',this);$a.each(function(i){var $li=$a.eq(i).parents('li');$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});});o.onInit.call(this);}).each(function(){var menuClasses=[c.menuClass];if(sf.op.dropShadows&&!($.browser.msie&&$.browser.version<7))menuClasses.push(c.shadowClass);$(this).addClass(menuClasses.join(' '));});};var sf=$.fn.superfish;sf.o=[];sf.op={};sf.IE7fix=function(){var o=sf.op;if($.browser.msie&&$.browser.version>6&&o.dropShadows&&o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');};sf.c={bcClass:'sf-breadcrumb',menuClass:'sf-js-enabled',anchorClass:'sf-with-ul',arrowClass:'sf-sub-indicator',shadowClass:'sf-shadow'};sf.defaults={hoverClass:'sfHover',pathClass:'overideThisToUse',pathLevels:1,delay:200,animation:{opacity:'show'},speed:'normal',autoArrows:true,dropShadows:true,disableHI:false,onInit:function(){},onBeforeShow:function(){},onShow:function(){},onHide:function(){}};$.fn.extend({hideSuperfishUl:function(){var o=sf.op,not=(o.retainPath===true)?o.$path:'';o.retainPath=false;var $ul=$(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass).find('>ul').hide().css('visibility','hidden');o.onHide.call($ul);return this;},showSuperfishUl:function(){var o=sf.op,sh=sf.c.shadowClass+'-off',$ul=this.addClass(o.hoverClass).find('>ul:hidden').css('visibility','visible');sf.IE7fix.call($ul);o.onBeforeShow.call($ul);$ul.animate(o.animation,o.speed,function(){sf.IE7fix.call($ul);o.onShow.call($ul);});return this;}});})(jQuery);
//--><!]]></script>
<script src='http://sites.google.com/site/bthemenet/jquery.lazyload.mini.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bthemenet/theme-script.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bthemenet/jquery.cycle.all.min.js' type='text/javascript'/>
TERAKHIR PASTEKAN KODE DI BAWAH INI PAS DI ATAS <div id='header-wrapper'>
<script type='text/javascript'>
//Initiate Featured Content Slider
$('#slider') .cycle({
fx: 'fade',
pager: '#slider-nav' ,
speed: 300,
pause: true ,
prev: '#prev',
next: '#next'
});
</script>
<div class='clearfix' id='slideshow'>
<div id='slider'>
<div class='featured-post clearfix'>
<div class='slider-image'>
<img alt='feat0' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZle67yx4NVKffxKtRsglHqa0bh-nC5Al0u1ZBAPgUscWyFpNU0neiiWjayl_GfT7YfCfHQwPqkZs-6SI4NcqL_A2qA3rj2RLJ2NzXdebN8s3Nhr_KM464rPsccOAxIusPxZUQkacsnUs/s1600/feat01.jpg' title='feat0' width='400'/> </div>
<div class='slider-post'>
<h2><a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='your title co'>Another Post with Everything In It</a></h2>
<div class='slider-post-meta'>
<span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 17, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Child Category I'>Child Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category II'>Parent Category II</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on Another Post with Everything In It'>5 Comments</a> </span>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.</p>
<a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a>
</div>
</div><!-- .featured-post -->
<div class='featured-post clearfix'>
<div class='slider-image'>
<img alt='feat2' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cL7Ff2qYbgiFMMdJ2GUfweDXJJAYEl8YueEwNuOoHxkfRS9Px9_mNLTq_IQkw6tu7R6v38rhDpZb5XoaOBfIlBT_iomnCJNibjQbJVCtj5QNxUyKe5WFeQubFe1JNkhLZKNcxE2Bakk/s1600/feat21.jpg' title='feat2' width='400'/> </div>
<div class='slider-post'>
<h2><a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to A Post With Everything In It'>A Post With Everything In It</a></h2>
<div class='slider-post-meta'>
<span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 11, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE LABELS HERE' title='Comment on A Post With Everything In It'>2 Comments</a> </span>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.</p>
<a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a>
</div>
</div><!-- .featured-post -->
<div class='featured-post clearfix'>
<div class='slider-image'>
<img alt='feat3' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDoenMILApZtH_1y46HeJObiTGL9tontF6mSMTsmIIeGNh9LuXkFyqp3olh7YiRqqCWJm48QZ2_-xsMpfXRpC_Tnav95zEx1yM2QzBBPWSP0Ewy94-SHi_AMuEpFip2-VsuhWrnxNG2SI/s1600/feat31.jpg' title='feat3' width='400'/> </div>
<div class='slider-post'>
<h2><a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to Quotes Time!'>Quotes Time!</a></h2>
<div class='slider-post-meta'>
<span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 11, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on Quotes Time!'>1 Comment</a> </span>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat. Proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros </p>
<a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a>
</div>
</div><!-- .featured-post -->
<div class='featured-post clearfix'>
<div class='slider-image'>
<img alt='feat4' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWFmnLdWXpwRBG9rl7qDFtNjedjXP_K4biGsCN7uYhppV58oxxhiOuSDmStAHk9ciSu8Ppv3Ll2Hh1FgWjGuxwsWTDev81gSOwimrkkaZM7Yd1-DAa7gkLN5_gwiWkNmGldB-FxRTecrk/s1600/feat41.jpg' title='feat4' width='400'/> </div>
<div class='slider-post'>
<h2><a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to Another Text-Only Post'>Another Text-Only Post</a></h2>
<div class='slider-post-meta'>
<span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 11, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Child Category II'>Child Category II</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Grandchild Category I'>Grandchild Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on Another Text-Only Post'>1 Comment</a> </span>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend urna eu sapien. Quisque posuere nunc eu massa. Praesent bibendum lorem non leo. Morbi volutpat, urna eu fermentum rutrum, ligula lacus interdum mauris, ac pulvinar libero pede a enim. Etiam commodo malesuada ante. Donec nec ligula. Curabitur mollis semper diam.</p>
<a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a>
</div>
</div><!-- .featured-post -->
<div class='featured-post clearfix'>
<div class='slider-image'>
<img alt='feat5' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2IFH6JkVD9QgfZYvsnvGzwxD6xCfoRdOQySL_b628p3mNUKmcZtQiWUk1L-_5jlus12_LKqaV8z_r07znaSg03zS7A2RnJd-zeuaCVPHkW9rbf95sff4QzCgU_sCL4LulsXtjwF7Dl0/s1600/feat51-400x250.jpg' title='feat5' width='400'/> </div>
<div class='slider-post'>
<h2><a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to A Simple Post with Text'>A Simple Post with Text</a></h2>
<div class='slider-post-meta'>
<span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on August 2, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Child Category I'>Child Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on A Simple Post with Text'>1 Comment</a> </span>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend urna eu sapien. Quisque posuere nunc eu massa. Praesent bibendum lorem non leo. Morbi volutpat, urna eu fermentum rutrum, ligula lacus interdum mauris, ac pulvinar libero pede a enim. Etiam commodo malesuada ante. Donec nec ligula. Curabitur mollis semper diam.</p>
<a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a>
</div>
</div><!-- .featured-post -->
</div><!-- end #slider -->
<div class='slider-arrow'>
<a href='#'><span id='prev'>Prev</span></a>
<a href='#'><span id='next'>Next</span></a>
</div>
<div id='slider-nav'/>
</div> <!-- End of #slideshow-->
KEMBALI