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/AVvXsEjTmCssi93lHYxgQaxIHTaDxRYeb5IwBFU8oaUlR-X8gtgksyMDsRCPeL2s18yw6HNZpgJ_7qTPw4sbs-GVlwkljQz77AcKAkyOQRwIwBHVn5Fvu3BUzdKr03Wv-Xu87NGDL5hlGAQJosQ/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/AVvXsEg-tFWY3OzaRqRWuj68bxJNF_FYpkbzmqnPmhZErkaOBDeg61LqbhYqiD-Uql4_Il7xJcp-gxKdbrAeMZkbgPLtU5I3geqUTKtLmHy-HiBa1iHic2se5-NC2usA1RIoGGkRMkd4sBQ9ces/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/AVvXsEg-tFWY3OzaRqRWuj68bxJNF_FYpkbzmqnPmhZErkaOBDeg61LqbhYqiD-Uql4_Il7xJcp-gxKdbrAeMZkbgPLtU5I3geqUTKtLmHy-HiBa1iHic2se5-NC2usA1RIoGGkRMkd4sBQ9ces/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/AVvXsEi2Zf-y5rZfye7JTRQXfI3Vh8mKl-C05csfJ4FrZ5nbHRLtXxZCUNLoUROhQUDcT__w5z0LjFYjQX7m01MoG88AKYQ5uG0KTwJu6Sj7n7OsOj7FR0NVFpka9cB0vTPWqgUQQ6pMsBYxBug/s1600/previous.gif);} div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpj2fBNRzFY8L9z26NVhbwdNRuUVXydqWZ6b3mZDzVV-N6F6IL5ICztL5TYGVQCTVBFH5AV4RNTjWS34JcW0KlIP-TbjHG27ueAeOih2Rh4LcLe5sy7EITB2LEnQh6cHYd4cevEpt5Nyo/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/AVvXsEhLujaBSy6cF3Yz3pRhVSHjfs3T65bO-9pHlSVwlEua90dbuuAVDvRWeYxfSc14MPlVEdbLy6R3znqmKWj7hdaqmh4XBIZBxNJgDJL0a6W86HlJw94nk3Pi0zk4n58hWPaDyzLHjHSWmw8/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/AVvXsEg14UBB9TmAxMF8gyKTMxjTHt4UM7cA_m07o7I7jk1xT14u-8CFoMw_XCPJZ-EIGzC262oBpD2RdqZGg8lAkTTlBBOhxiCrDHG-xqMMFd7B5wz-cXZEBGU0_b6Y4eErjvAFigv2nbEBGf8/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/AVvXsEj46K7J8tfHaVWhgKYSS_Y4Ghm4ZJfjO7BWcFxnY-yLmJfwr7Wi6zK4XaRYUkMA67qXklcnYi3XB0xcuSlTDIRPgXajXnUEQZeFu7X2y8kvytb3bIcpKgLU98HEu-nU3xnse3XZ2HDNpUs/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/AVvXsEiSR2Fl67gBY9fz8D9f9JR_o7ztvyHerfvMAA9GqQEOLVJ4zObBkYEJYJljH5gPc49GzFrB-iOOIJQD4aHe6I9Bzb898-aglA_AztNtRbWyjyD8lxE52ngB_Iod6HCMXvy_OKEbLWYu5CA/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/AVvXsEhLujaBSy6cF3Yz3pRhVSHjfs3T65bO-9pHlSVwlEua90dbuuAVDvRWeYxfSc14MPlVEdbLy6R3znqmKWj7hdaqmh4XBIZBxNJgDJL0a6W86HlJw94nk3Pi0zk4n58hWPaDyzLHjHSWmw8/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/AVvXsEiVLkXOgtKvGAE-QMUeCktNpTi5hCSAFKGCNHM7i-gN0JexUJ6Iz0S1F1JB9L1ZUUJFSVLMNOOLAMTtt4d0idKcXlBUtp4deBP_Pwzo0KCyceWUer8EHZQJBHvmde6MWXu6Ylpg6pW9Ndc/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/AVvXsEj46K7J8tfHaVWhgKYSS_Y4Ghm4ZJfjO7BWcFxnY-yLmJfwr7Wi6zK4XaRYUkMA67qXklcnYi3XB0xcuSlTDIRPgXajXnUEQZeFu7X2y8kvytb3bIcpKgLU98HEu-nU3xnse3XZ2HDNpUs/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/AVvXsEiSR2Fl67gBY9fz8D9f9JR_o7ztvyHerfvMAA9GqQEOLVJ4zObBkYEJYJljH5gPc49GzFrB-iOOIJQD4aHe6I9Bzb898-aglA_AztNtRbWyjyD8lxE52ngB_Iod6HCMXvy_OKEbLWYu5CA/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/AVvXsEhLujaBSy6cF3Yz3pRhVSHjfs3T65bO-9pHlSVwlEua90dbuuAVDvRWeYxfSc14MPlVEdbLy6R3znqmKWj7hdaqmh4XBIZBxNJgDJL0a6W86HlJw94nk3Pi0zk4n58hWPaDyzLHjHSWmw8/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/AVvXsEiVLkXOgtKvGAE-QMUeCktNpTi5hCSAFKGCNHM7i-gN0JexUJ6Iz0S1F1JB9L1ZUUJFSVLMNOOLAMTtt4d0idKcXlBUtp4deBP_Pwzo0KCyceWUer8EHZQJBHvmde6MWXu6Ylpg6pW9Ndc/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/AVvXsEj46K7J8tfHaVWhgKYSS_Y4Ghm4ZJfjO7BWcFxnY-yLmJfwr7Wi6zK4XaRYUkMA67qXklcnYi3XB0xcuSlTDIRPgXajXnUEQZeFu7X2y8kvytb3bIcpKgLU98HEu-nU3xnse3XZ2HDNpUs/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/AVvXsEiSR2Fl67gBY9fz8D9f9JR_o7ztvyHerfvMAA9GqQEOLVJ4zObBkYEJYJljH5gPc49GzFrB-iOOIJQD4aHe6I9Bzb898-aglA_AztNtRbWyjyD8lxE52ngB_Iod6HCMXvy_OKEbLWYu5CA/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.
Sumber : catalog-tutorial.blogspot.com
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
