DAGING TURBO

oke, sekarang Megat akan memberi tutorial tentang elemen didalam header. yaitu menaruh widget ke dalam header.DEMO

Letakkan script ini di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery(".subwid").hoverIntent(function(){
jQuery(this).animate({top: "0"}, 500 );
},function(){
jQuery(this).animate({top: "250"}, 500 );
});
});
//]]>
</script>

Kemudian taruh CSS dibawah ini diatas kode ]]></b:skin>

.subwid{
 height:225px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4B4az0NToCdXDkPLxDY6rPWUacLHeNXKtmZ8Z_Ga3krku0nCeqpj_-MJ-Hpl1gfo-Kcqdz82vc3qrPFapdc59FgAYAGYwDZtMvBU9ZfHvh24_tKa-uKhogpLFHPx6Ihh-cBMfbesEvtE/s1600/transbg.png);
 width:300px;
 float:left;
 margin:0px 0px ;
 position:relative;
 top:250px;
        color:#fff;
}
.subwid .widget-content {
        padding:10px;
   
}
.subwid h2{
 text-align:center;
 color:#fff;
 font-size:16px;
 width:300px;
 border-bottom:1px solid #000;
 line-height:49px;
 cursor:pointer;
 text-transform:uppercase;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmglkF6_kQ9rwY0PxTtNJ6zQ_f-tOousWFQnUYzJk-QkgV6RGWIIC9kgjnFd7qWLMQIPPvfI2fkV_-grdFBzBrqdeGDd7MLMxZQMODZ_RHKc8BK0MJRcQBtO3JrZ4-6Lj7qwS3r5AUVshb/s1600/ysubh.png) repeat-x;
}

Untuk text yang berwarna Merah sesuaikan dengan pengaturan korang sendiri kerana ukuran header di setiap blog berlainan.

selepas itu copy HTML ini di header korang.

<div class='subwid'>
<b:section class='upperbar' id='upperbar2' showaddelement='no'>
Isi Widget</b:section>
</div>

Semoga berjaya :D