Berikut tutorial singkat cara memasang Yahoo News Slider di Blog Anda :
Pertama, buka tab edit HTML blog Anda (tidak perlu dicentang), lalu masukkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> :
/* Yahoo Slider Wrapper
----------------------------------------------- */
div.jqans-wrapper {-x-system-font:none;font-family:arial,helvetica,clean,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;color:#666666;}
div.jqans-wrapper img {border: 0;}
div.jqans-wrapper ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p {list-style:none;margin: 0;padding: 0;}
div.jqans-wrapper {list-style:none;position: relative;overflow: hidden;}
div.jqans-wrapper ul {position: relative;left: 0;width: auto;list-style-type: none;overflow: hidden;z-index: 1;}
div.jqans-wrapper li {list-style:none;float: left;display: inline;}
/* Yahoo Slider Content
----------------------------------------------- */
div.jqans-wrapper.default .jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;}
div.jqans-wrapper.default .jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector li {height: 10px;}
div.jqans-wrapper.default, div.jqans-wrapper.default .jqans-container {width: 428px;background:#fff;}
div.jqans-wrapper.default li {width: 107px;}
div.jqans-wrapper.default a {text-decoration: none;font-weight: normal;color: #363636;outline: none;}
div.jqans-wrapper.default strong {color: #000;}
/* wrapper */
div.jqans-wrapper.default {border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;}
/* container */
div.jqans-wrapper.default .jqans-container {min-height: 270px;text-align: center;padding-top: 4px;}
div.jqans-wrapper.default .jqans-container a {font-weight: bold;color:#000;}
div.jqans-wrapper.default .jqans-container img {width:418px;height:200px;}
/* headline */
div.jqans-wrapper.default .jqans-headline {text-align: left;margin-left:10px;margin-bottom: 4px;font:normal 13px Arial;}
div.jqans-wrapper.default .jqans-content h1 {text-align:left;color:#16387c;margin: 1px 9px;font:bold 18px Arial;letter-spacing:-.0001em;line-height:1.1em; height:22px;overflow:hidden;}
div.jqans-wrapper.default .jqans-content p {text-align: left;color: #333;margin: 1px 9px;font:normal 12px Arial;line-height:1.3em;height:30px;overflow:hidden;}
/* stories */
div.jqans-wrapper.default .jqans-stories {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr30_2hXBDjS1SPnr6cqhlr1JZYsVPIX1C-qiZw2OcEUaGlfoUIRJykloIkOTIayp_hk2RbK5ZxssaU5Ls8tWt7fqqRvt9QGW5Fo0s-TOm_E4dHMX7JCEikQrBpscKUopp2Dw1nCDAKew/s1600/bg_stories.gif);background-repeat: repeat-x;background-position: top left;}
div.jqans-wrapper.default .jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color: #fff;line-height:1.2em;}
div.jqans-wrapper.default .jqans-stories li.selected {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMGRodSc0Sm7Zh4NReaY5YlftuzoGO-yVye8lEciB3E3sKgLg-OwcmDhwyt00CFiu_TXAiHEnnUjJ-1LGF_H4C3tM7IWglQWTwKcJ2xU-qZx1yOhWAjdB-4ZXnARXJ0dAoxYXCKMnZUY/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
div.jqans-wrapper.default .jqans-stories li.selected a {color:#fff;}
div.jqans-wrapper.default .jqans-stories li img {margin-top: 22px;width:92px; height:45px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #555;border-top:1px solid #555;}
div.jqans-wrapper.default .jqans-stories li p {display: none;}
div.jqans-wrapper.default .jqans-stories li h3 {margin:0;padding:1px 10px;color:#000;
font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;}
div.jqans-wrapper.default .jqans-stories-selector li.selected div {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMGRodSc0Sm7Zh4NReaY5YlftuzoGO-yVye8lEciB3E3sKgLg-OwcmDhwyt00CFiu_TXAiHEnnUjJ-1LGF_H4C3tM7IWglQWTwKcJ2xU-qZx1yOhWAjdB-4ZXnARXJ0dAoxYXCKMnZUY/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
/* pagination */
div.jqans-wrapper.default .jqans-pagination {border: 1px solid #ccc;border-width: 1px 0;margin: 0;padding: 4px 4px 4px 4px;background: #f2f2f2;text-align: left;clear: both;width: 420px;overflow: hidden;}
div.jqans-wrapper.default .jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;}
div.jqans-wrapper.default .jqans-pagination-controls {float: right;}
div.jqans-wrapper.default .jqans-pagination-controls a {display: inline-block;width: 22px;height: 13px;text-indent: -9999px;background: no-repeat bottom center;*float:left;}
div.jqans-wrapper.default .jqans-pagination-controls-back a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJq_AyoqyYIGaIhuqkgMTN6UrSWtsNYmM4SvUQaXn7ZwchJE1VJQS_v4-93Pup1q0kMvjuGPbZ35sCFd6tBhpRpxnrD6yIA7kz4Zlz6DvldFzSNtImnyKvZCytJ1PozItjtcN4tnpRApE/s1600/previous.gif);}
div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCILxmoIWMV0W5IeeuGjiZEPzTbHCp5Yb3f-Qmk62EEcZF3TpEAApOudIbdMoy7rn3RKucamlbha-Ym27nXRvWPXrFhHXJAJrSNcOSs2xHMJsbFKjKm5QAm-kXjXd9gYUAf_roVg1eeWE/s1600/next.gif);}
Kedua, Anda harus memasukkan javascript code berikut setelah kode ]]></b:skin> :
<script src='http://themestoday.googlecode.com/files/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.accessNews=function(b){var c={title:"TODAY - ",subtitle:"Choose the Trending Topics Today", slideBy:4,speed:"normal",slideShowInterval:3000,slideShowDelay:3000,theme:"default",continuousPaging:true,contentTitle:"h3",contentSubTitle:"abbr",contentDescription:"p",onLoad:null,onComplete:null};return this.each(function(){b=jQuery.extend(c,b);var k=jQuery(this);var h=k.children();var i;var j;var f;var e={_wrapper:'<div class="jqans-wrapper '+b.theme+'"></div>',_container:'<div class="jqans-container"></div>',_headline:jQuery("<div class='jqans-headline'></div>").html(["<p><strong>",b.title,"</strong> ",b.subtitle,"</p>"].join("")),_content:jQuery("<div class='jqans-content'></div>"),_stories:'<div class="jqans-stories"></div>',_first:jQuery(h[0]),init:function(){if(b.onLoad){b.onLoad.call(a(this))}k.wrap(this._wrapper);k.before(this._container);var l=(h.length*this._first.outerWidth(true));k.css("width",l);if(b.title.length){this.append(this._headline)}this.append(this._content);this.selector(l);this.set(0);d.init();g.init();k.wrap(this._stories);if(b.onComplete){b.onComplete.call(a(this))}},selector:function(n){var m="";for(var l=1;l<=h.length;l++){m+="<li><div/></li>"}var p=jQuery('<div class="jqans-stories-selector"></div>');p.append("<ul>"+m+"</ul>");j=jQuery(p.find("ul"));f=j.children();p.css("width",n);k.before(p)},append:function(l){this.get().append(l)},get:function(){return k.parents("div.jqans-wrapper").find("div.jqans-container")},set:function(n){var o=this.get();var r=jQuery(h[n]);var m=jQuery(f[n]);var q=jQuery("div.jqans-content",o);var p=jQuery("<img></img>");var l=jQuery("<div></div>");var s=jQuery(b.contentTitle+" a",r).attr("title")||jQuery(b.contentTitle,r).text();p.attr("src",jQuery("img",r).attr("longdesc")||jQuery("img",r).attr("src"));l.html("<h1>"+s+"</h1><p>"+jQuery(b.contentDescription,r).html()+"</p>");q.empty();q.append(p);q.append(l);h.removeClass("selected");r.addClass("selected");f.removeClass("selected");m.addClass("selected")}};var d={loaded:false,_animating:false,_totalPages:0,_currentPage:1,_storyWidth:0,_slideByWidth:0,init:function(){if(h.length>b.slideBy){this._totalPages=Math.ceil(h.length/b.slideBy);this._storyWidth=jQuery(h[0]).outerWidth(true);this._slideByWidth=this._storyWidth*b.slideBy;this.draw();this.loaded=true}},draw:function(){var n=jQuery('<div class="jqans-pagination"></div>').html(['<div class="jqans-pagination-count"><span class="jqans-pagination-count-start">1</span> - <span class="jqans-pagination-count-end">',b.slideBy,'</span> of <span class="jqans-pagination-count-total">',h.length,'</span> Featured News</div><div class="jqans-pagination-controls"><span class="jqans-pagination-controls-back"><a href="#" title="Back"><< Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next >></a></span></div>'].join(""));k.after(n);var m=jQuery(".jqans-pagination-controls-next > a",n);var l=jQuery(".jqans-pagination-controls-back > a",n);m.click(function(){var o=d._currentPage+1;d.to(o);return false});l.click(function(){var o=d._currentPage-1;d.to(o);return false})},to:function(p){if(this._animating){return}this._animating=true;var q=k.parent("div").next(".jqans-pagination");var l=jQuery(".jqans-pagination-count-start",q);var s=jQuery(".jqans-pagination-count-end",q);if(p>this._totalPages){p=b.continuousPaging?1:this._totalPages}if(p<1){p=b.continuousPaging?this._totalPages:1}var r=(p*b.slideBy)-b.slideBy;var n=(p*b.slideBy);if(n>h.length){n=h.length}var o=parseInt(k.css("left"));var m=(p*this._slideByWidth)-this._slideByWidth;l.html(r+1);s.html(n);o=(m*-1);k.animate({left:o},b.speed);j.animate({left:o},b.speed);e.set(r);this._currentPage=p;this._animating=false}};var g={init:function(){this.attach();this.off();i=setTimeout(function(){g.on()},b.slideShowDelay)},on:function(){this.off();i=setInterval(function(){g.slide()},b.slideShowInterval)},off:function(){clearInterval(i)},slide:function(){var o=jQuery("li.selected",k);var m=o.next("li");var n=0;if(!m.length){m=jQuery(h[0]);n=1}var p=h.index(m);if(d.loaded){var l=(p)%b.slideBy;if(l===0){n=(Math.ceil(p/b.slideBy))+1}if(n>0){d.to(n)}}e.set(p)},attach:function(){var l=jQuery(k).parent("div.jqans-wrapper");l.hover(function(){g.off()},function(){g.on()})}};e.init();h.hover(function(){e.set(h.index(this))},function(){})})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function() {jQuery('#newsslider').accessNews({});
jQuery('#newsslider2').accessNews({title : "BREAKING NEWS:", subtitle:"stories from the internet", speed : "slow", slideBy : 4, slideShowInterval: 100000, slideShowDelay: 100000});});
</script>
Langkah terakhir, silahkan save lalu tambahkan kode javascript berikut di elemen halaman yang Anda diinginkan :
<ul id="newsslider">
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXwjllysmycYjBlbiTa8B5vLcQH0Fm9r5uMYQI072OYoJzRO-jQK-bGRiIlVlfgW1UaUvx1ssHVxfLnjvbv3BNYlDrpnb8ouvf7FKibcpE2Sl2Z2eAg7xAcdpaEe_4jDbyjoCMZByFQ4/s1600/Facebook+Mark+Zuckerberg.jpg"/></a>
<h3><a href="#">Facebook Has Lost 6 million Users in U.S</a></h3>
<p>Independent monitoring sites showed that the Inside Facebook has lost 6 million users in the U.S. and 100,000 users... <a href="#"> more » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxVpEnyttH_6yf7HXbsdREH9tcZuOC5qYCO8zN3C48OV4IjDZcGOkVHNRR1_gsuhl6PbesQf-SzzXH6uqLptRpzcD47q1gMsx3Bxr3HK4yY6xtVSLfJ599v_M4CSfu2eCcVVzh7y09-E/s1600/Rossi+Crash.jpg"/></a>
<h3><a href="#">Rossi wasn't trying to pass Stoner</a></h3>
<p>Valentino Rossi says he was not even trying to overtake Casey Stoner when he took the Honda rider out of second in the Spanish..... <a href="#">more »</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1vNT0bPPdn1Flb4ljxVQh3acxmkwknYhcFmN3oK70o_bfmtoRiu-mlTfx7svsVXybG0BcHYMpZC0Qcq0KG0Up0Xxi81K3rdZNz-ax9UJEQOgrumMQU0srOmbyTauIzU48KLpOp-v5dI/s1600/Muammar+Gaddafi.jpg" /></a>
<h3><a href="#">Gadhafi Attacks Continue Despite Coalition Bombing</a></h3>
<p>Forces loyal to Moammar Gadhafi resumed attacks on Libya’s third-largest city early Thursday despite aerial bombardments.... <a href="#">Gadhafi Attacks »</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63pWCLlsMCFkGlKPUw3RzyPkkdFAgz8kUADlDpyb5PW3e3ShgIYbm-2lcAJzZKTTFVskOJUliRDiE6Kc92s6uzdwgDcsJioz2al8p_KjTUuKTXZllNqY9e8hgA58svXNYSeyMzeUf6jw/s1600/Japan+Tsunami.jpg"/></a>
<h3><a href="#">Developments in Japan's Earthquake, Tsunami and Nuclear Crisis</a></h3>
<p>Highly radioactive water has been found seeping into the Pacific Ocean from a newly discovered crack in a maintenance pit on the edge.... <a href="#">Japan Crisis » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXwjllysmycYjBlbiTa8B5vLcQH0Fm9r5uMYQI072OYoJzRO-jQK-bGRiIlVlfgW1UaUvx1ssHVxfLnjvbv3BNYlDrpnb8ouvf7FKibcpE2Sl2Z2eAg7xAcdpaEe_4jDbyjoCMZByFQ4/s1600/Facebook+Mark+Zuckerberg.jpg"/></a>
<h3><a href="#">Facebook and Skype Discussing Potential Partnership</a></h3>
<p>Facebook Inc., the world’s biggest social-networking company, is holding talks with Skype Technologies SA about offering... <a href="#"> Fecebook Discussion » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Y1QGl_Gq8uub8YIKzdgM1M0F7H4rtJKacF8abR4OpPKDV1ZG73STWZMNX0WcOlmO6mxpfOgMyYGr_GTKfYYGjI0fgpQCrxkcnNaNirHPBZTrAa51QR3KFHf9Z_nI6-Xr3XUOEdV3Fgw/s1600/Carlos+Slim+Picture.jpg"/></a>
<h3><a href="#">10 Top List of Richest People in the World</a></h3>
<p>Forbes, a leading source for reliable business news and financial information, make a new released list of richest people in the world.... <a href="#">Richest People »</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1vNT0bPPdn1Flb4ljxVQh3acxmkwknYhcFmN3oK70o_bfmtoRiu-mlTfx7svsVXybG0BcHYMpZC0Qcq0KG0Up0Xxi81K3rdZNz-ax9UJEQOgrumMQU0srOmbyTauIzU48KLpOp-v5dI/s1600/Muammar+Gaddafi.jpg" /></a>
<h3><a href="#">Gadhafi Attacks Continue Despite Coalition Bombing</a></h3>
<p>Forces loyal to Moammar Gadhafi resumed attacks on Libya’s third-largest city early Thursday despite aerial bombardments.... <a href="#">Gadhafi Attacks »</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63pWCLlsMCFkGlKPUw3RzyPkkdFAgz8kUADlDpyb5PW3e3ShgIYbm-2lcAJzZKTTFVskOJUliRDiE6Kc92s6uzdwgDcsJioz2al8p_KjTUuKTXZllNqY9e8hgA58svXNYSeyMzeUf6jw/s1600/Japan+Tsunami.jpg"/></a>
<h3><a href="#">Developments in Japan's Earthquake, Tsunami and Nuclear Crisis</a></h3>
<p>Highly radioactive water has been found seeping into the Pacific Ocean from a newly discovered crack in a maintenance pit on the edge.... <a href="#">Japan Crisis » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXwjllysmycYjBlbiTa8B5vLcQH0Fm9r5uMYQI072OYoJzRO-jQK-bGRiIlVlfgW1UaUvx1ssHVxfLnjvbv3BNYlDrpnb8ouvf7FKibcpE2Sl2Z2eAg7xAcdpaEe_4jDbyjoCMZByFQ4/s1600/Facebook+Mark+Zuckerberg.jpg"/></a>
<h3><a href="#">Facebook and Skype Discussing Potential Partnership</a></h3>
<p>Facebook Inc., the world’s biggest social-networking company, is holding talks with Skype Technologies SA about offering... <a href="#"> Fecebook Discussion » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Y1QGl_Gq8uub8YIKzdgM1M0F7H4rtJKacF8abR4OpPKDV1ZG73STWZMNX0WcOlmO6mxpfOgMyYGr_GTKfYYGjI0fgpQCrxkcnNaNirHPBZTrAa51QR3KFHf9Z_nI6-Xr3XUOEdV3Fgw/s1600/Carlos+Slim+Picture.jpg"/></a>
<h3><a href="#">10 Top List of Richest People in the World</a></h3>
<p>Forbes, a leading source for reliable business news and financial information, make a new released list of richest people in the world.... <a href="#">Richest People »</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO1vNT0bPPdn1Flb4ljxVQh3acxmkwknYhcFmN3oK70o_bfmtoRiu-mlTfx7svsVXybG0BcHYMpZC0Qcq0KG0Up0Xxi81K3rdZNz-ax9UJEQOgrumMQU0srOmbyTauIzU48KLpOp-v5dI/s1600/Muammar+Gaddafi.jpg" /></a>
<h3><a href="#">Gadhafi Attacks Continue Despite Coalition Bombing</a></h3>
<p>Forces loyal to Moammar Gadhafi resumed attacks on Libya’s third-largest city early Thursday despite aerial bombardments.... <a href="#">Gadhafi Attacks »</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63pWCLlsMCFkGlKPUw3RzyPkkdFAgz8kUADlDpyb5PW3e3ShgIYbm-2lcAJzZKTTFVskOJUliRDiE6Kc92s6uzdwgDcsJioz2al8p_KjTUuKTXZllNqY9e8hgA58svXNYSeyMzeUf6jw/s1600/Japan+Tsunami.jpg"/></a>
<h3><a href="#">Developments in Japan's Earthquake, Tsunami and Nuclear Crisis</a></h3>
<p>Highly radioactive water has been found seeping into the Pacific Ocean from a newly discovered crack in a maintenance pit on the edge.... <a href="#">Japan Crisis » </a></p>
</li>
</ul>
Selesai, silahkan lihat hasilnya.
Download Minima Cigazine Template
