cara pasang slinder timer

sahabat kali ini cara pasang  slinder timer.Apa itu slinder timer?
slinder timer adalah slinder otomatis berjalan sendiri dengan menggunakan label ataupun dengan postingan terbaru,di blog sahabat. nah untuk measangnya sahanat 
terlebih dahulu login ke blog sahabat.
setelah login sahabat ke layout tample
setelah itu ediet HTML
temukan kode ]]></b:skin>

letakan kode di bawah ini tepat di atasnya

sliderTimer-wrapper{width:370px;padding:0 10px 10px 0;margin-top:-8px}
#sliderTimer-header li a.active{background:#ff0000;text-shadow:0 1px 0 rgba(0,0,0,.2);color:#fff}
#sliderTimer-header li a.active div.carouselProgress{display:block;background:#fff}
.sliderTimer-item{position:absolute;top:0;left:0;height:300px;width:370px;display:none;padding:0}
#sliderTimer h2 a{font:normal 20px Oswald;color:#fff;line-height:1.1em}
#sliderTimer a.carousel_link span{background:#d10110;display:block;color:#fff;float:right;padding:7px 10px}
#sliderTimer{position:relative;height:250px;overflow:hidden}
#sliderTimer-header{height:32px;border-bottom:4px solid #ff0000;border-top:0px solid #878773;padding:0}
#sliderTimer-header li{display:inline;list-style:none}
#sliderTimer-header li a{display:block;text-shadow:1px 1px 1px #fff;height:32px;float:left;line-height:32px;text-decoration:none;color:#333;font-size:14px;font-style:tahoma;position:relative;padding:0}
#sliderTimer-header li a div.carouselProgress{display:none;height:4px;background:transparent;width:0;position:absolute;bottom:-4px;left:0;margin:0}
#sliderTimer-header li a .carouselHeaderContent{padding:0 15px}
.sliderTimer-item .infos{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rDQjx7zeM9zXqu2ekGg-FvGVELx29lIdPUPbn9dYuEwtLEe4Um5DayWReUG10av0CAdAUiuDZwv35Ux6dH0fto_8iGKJPcXNxqLc_nbk5QRj-cu3648Lbw3RyOXjo1EFf4rzO4eTJRQ-/s1600/transparant.png);width:200px;height:400px;z-index:9;position:absolute;padding:10px 10px 0}
.sliderTimer-item h3{font-size:20px;line-height:20px;color:#1b1b1b;font-weight:700;margin-bottom:10px}
.sliderTimer-item p{font-size:12px;color:#fff;line-height:16px;width:200px}
.sliderTimer-item ul{margin-top:0;position:absolute;bottom:10px;width:370px}
.sliderTimer-item ul li{display:inline}
.sliderTimer-item ul li a{line-height:1.3em;display:block;font-size:15px;font-weight:700;color:#fff;float:left;text-decoration:none;margin-bottom:10px;padding:0 10px}
.sliderTimer-item .attachment-post-thumbnail,.sliderTimer-item .attachment-full{position:absolute;right:0;top:0;z-index:-1}
.sliderTimer-item .attachment-full img{width:370px;height:350px;overflow:hidden;margin-top:-20%}
#sliderTimer-header li a.active span.carouselHeaderDecorator,#sliderTimer .active{display:block}

setelah itu cari kode </head> dan letakan kode di bawah ini tepat di atasnya.

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'></script>
<script src='http://panjz-online.googlecode.com/files/news.txt' type='text/javascript'></script>
<style type='text/css'>
.titlefield{text-decoration: none;}
.labelfield{color:#666;font-size: 100%;}
.datefield{color:#fff;font:normal 12px Arial;}
#example1{width: 900px;height: 12px;border: 0px solid #aaa;padding: 0px;font:bold 12px Arial;text-transform:none;text-align:left;background-color:transparent;}
code{color: #fff;}
#example1 a:link, #example1 a:visited {color:#fdd910;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>
<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://panjz-online.googlecode.com/files/jam.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/511032252/jquery.cycle-metalhammer.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
var stepInterval = 4000;
    var initialDelay = 2000;
    var fadeTime = 1000;
    var carouselID;
    var i=1;
    function myAfterCall() {
    $('.carouselProgress').width(0);
    }

    function myBeforeCall() {
    $('#sliderTimer-header .active').removeClass('active');
    startProgress();
    carouselID = $(this).attr('id').replace('mas-', '');
    startProgress(carouselID);
    $('#mas-head-'+carouselID).addClass('active');
    }
    function startProgress(carouselID){
    parentWidth = $('#mas-head-'+carouselID).width();
        $('#mas-head-'+carouselID+' .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
    }
    $('.sliderTimer-item-header').live('click', function(a){
    var clicked = $(this);
    $('.sliderTimer-item-header').each(function(e){
    console.log(clicked.attr('id'));
    console.log($(this).attr('id'));
    if(clicked.attr('id')!=$(this).attr('id')){
    $(this).children('.carouselProgress').stop();
    }
    });
    });
    //$('.sliderTimer-item').hover(function(){}, function(){});

$('#sliderTimer').cycle({
delay: initialDelay,
  timeout: stepInterval,
speed: fadeTime,
after: myAfterCall,
before: myBeforeCall,
pager: '#sliderTimer-header',
pause: true,
pagerAnchorBuilder: function(idx, slide) {

carouselID = slide.id.replace('mas-', '');
carouselTitle = $(slide).attr('ref');
if(i==1) {
myClass="active"
} else {
myClass="";
}
i++;
return '<li> \
            <a href="#" class="sliderTimer-item-header '+myClass+'" id="mas-head-'+carouselID+'"> \
            <div class="carouselProgress"></div> \
             <span class="carouselHeaderContent">'+carouselTitle+'</span> \
                <span class="carouselHeaderDecorator"></span> \
         </a> \
      </li>';
}
});
//$('#sliderTimer-header:first-child').addClass('active');
parentWidth = $('#sliderTimer-header .active .carouselProgress').width();
$('#sliderTimer-header .active .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
});
 //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6jtERpqAmId7qwPqvVMUd3jYv8Pn-HMeGpEwdjgbLCVaar19RAbbyryOVo1BKZzyzIv4hDTmPrrGyJ8A4Jbaa_CRbCuRsUBBoYKtMxBE5SgsKfQwx7XXLDfFYtEQxbTqph2KdDoQjPg/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 180;
summaryPost1 = 80;
summaryTitle = 20;
numposts = 1;


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;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='<div class="infos"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="carousel_buttons"><a class="carousel_link" href="'+posturl+'"><span>Selengkapnya..</span></a></div></div><div class="attachment-full"><a class="carouselImageLink" href="'+posturl+'"><img src="'+img[i]+'"/></a></div>';document.write(trtd);j++}}
 //]]>
</script>

Nah save terlebih dahulu atau langsung ajja sahabat ke berikutnya nah untuk penempatanya sahabat temukan kode Slide2 atau sejenisnya dan letakan tepat di atasnya atau kode 'main-wrapper'
atau sahabat di tempatkan di tata letak sahabat.

<div id='slide3-wrapper'>
<div id='sliderTimer-wrapper'>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='AKTIVASI' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/aktivasi?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='KEGIATAN' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/aktivitas?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='EKONOMI' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Ekonomi?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='OLAH RAGA' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Sepak bola?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
</ul>
</ul></div>
</div>

silahkan lihat hasilnya sahabat.