mas template

Membuat Slideshow Gambar Ala Yahoo

Meskipun sudah lama sekali saya tidak menulis karena banyak sekali kesibukan, kali ini saya akan menyempatkan waktu untuk berbagi dengan teman-teman semua mengenai cara membuat slide gambar seperti yang biasa kita lihat di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slide ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.

Banyak saya temui blog yang sudah memakai animasi image slider dengan berbagai macam variasi. Blog akan semakin menarik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider Yahoo ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing. 

slideshow yahoo

Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling tidak patut dan layak untuk dicoba.

Langkah Pertama
  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas 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: 458px;background:#fff;}
    div.jqans-wrapper.default li {width: 115px;}
    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:438px;height:210px;}
    /* 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(http://4.bp.blogspot.com/-SsHwJwKc-jY/Tmzg71W1MYI/AAAAAAAABrk/9zURurJzGe0/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(http://3.bp.blogspot.com/-eHE_fLpi3AA/Tmzg6jla9RI/AAAAAAAABrc/gsWIGuxfWeI/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:100px; height:52px;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(http://3.bp.blogspot.com/-eHE_fLpi3AA/Tmzg6jla9RI/AAAAAAAABrc/gsWIGuxfWeI/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: 448px;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(http://4.bp.blogspot.com/-jqdT01cCe8Y/Tmzg-VAYmjI/AAAAAAAABrw/2xYRHb_20_Q/s1600/previous.gif);}
    div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(http://2.bp.blogspot.com/-6GjfPbxDW0c/Tmzg9iPxgzI/AAAAAAAABrs/B-qsVB-_V6E/s1600/next.gif);}
Langkah Kedua
  1. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'/>
    <script type='text/javascript'>
    //<![CDATA[
    (function(a){a.fn.accessNews=function(b){var c={title:"HARI INI -",subtitle:"<span id='clock'/>",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> <strong>News Pagination</strong></div><div class="jqans-pagination-controls"><span class="jqans-pagination-controls-back"><a href="#" title="Back">&lt;&lt; Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next &gt;&gt;</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'>
    // when the DOM is ready, convert the feed anchors into feed content
    jQuery(document).ready(function() {

        jQuery(&#39;#newsslider&#39;).accessNews({
      
        });

        jQuery(&#39;#newsslider2&#39;).accessNews({
            title : &quot;BREAKING NEWS:&quot;,
            subtitle:&quot;stories from the internet&quot;,
            speed : &quot;slow&quot;,
            slideBy : 4,
            slideShowInterval: 100000,
            slideShowDelay: 100000
        });

    });
    </script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    jQuery.noConflict();jQuery(function(){jQuery("ul.menu-primary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(function(){jQuery("ul.menu-secondary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(document).ready(function(){jQuery(".fp-slides").cycle({fx:"fade",timeout:4000,delay:0,speed:400,next:".fp-next",prev:".fp-prev",pager:".fp-pager",continuous:0,sync:1,pause:1,pauseOnPagerHover:1,cleartype:true,cleartypeNoBg:true})});
    /* ]]> */
    </script>
  2. Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas :
    <script type='text/javascript'>
    //<![CDATA[
    var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='666666' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};
    //]]>
    </script>
  3. Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
      <body onLoad='goforit()'>
  4. Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi
Langkah Ketiga
  1. Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
    /* Slide Content
    ----------------------------------------------- */
    .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
    word-wrap: break-word; overflow: hidden;} 
    .slide {color: #666666;line-height: 1.3em;}
    .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    .slide li {margin:0;padding-top:0;
    padding-right:0;padding-bottom:.25em;
    padding-left:0px;text-indent:0px;line-height:1.3em;}
    .slide .widget {margin:0px 0px 6px 0px;}
  2. Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
          </div>
    </b:if> 
  3. Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
  4. Klik Tambah Gadget >> pilih HTML/Javascript
  5. Copy kode di bawah dan letakkan di kotak HTML/Javascript
    <ul id="newsslider">

    <li>
    <a href="#"><img src="http://1.bp.blogspot.com/-NTjAplB_Yd4/TsEfhvFbCYI/AAAAAAAAABc/MuNgwtAv_ak/s1600/emak.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
    <p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more &raquo; </a></p>
    </li>

    <li>
    <a href="#"><img src="http://2.bp.blogspot.com/-F0r0xFfA8ow/TsEU8AHakBI/AAAAAAAAAAQ/wy7HNuJAhTA/s1600/hawa.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>

    <p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
    </li>

    <li>
    <a class="title" href="#"><img src="http://3.bp.blogspot.com/-4_t3sOkM0qw/TsEW7QvN3kI/AAAAAAAAAAk/3mDIGASTc2I/s1600/hawa+2.jpg" /></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
    <p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

    </li>

    <li>
    <a href="#"><img src="http://2.bp.blogspot.com/-v5-N8uly1AM/TsEclOVHykI/AAAAAAAAAA8/cj8Gx9NJElc/s1600/youly+chang.jpg"/></a>

    <h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
    <p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>
    </li>

    <li>
    <a href="#"><img src="http://1.bp.blogspot.com/-NTjAplB_Yd4/TsEfhvFbCYI/AAAAAAAAABc/MuNgwtAv_ak/s1600/emak.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
    <p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more &raquo; </a></p>

    </li>

    <li>
    <a href="#"><img src="http://2.bp.blogspot.com/-F0r0xFfA8ow/TsEU8AHakBI/AAAAAAAAAAQ/wy7HNuJAhTA/s1600/hawa.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
    <p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
    </li>

    <li>
    <a class="title" href="#"><img src="http://3.bp.blogspot.com/-4_t3sOkM0qw/TsEW7QvN3kI/AAAAAAAAAAk/3mDIGASTc2I/s1600/hawa+2.jpg" /></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
    <p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

    </li>

    <li>
    <a href="#"><img src="http://2.bp.blogspot.com/-v5-N8uly1AM/TsEclOVHykI/AAAAAAAAAA8/cj8Gx9NJElc/s1600/youly+chang.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
    <p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>
    </li>

    <li>
    <a href="#"><img src="http://3.bp.blogspot.com/-5qiy1rsd-hY/TsEbyMeYUNI/AAAAAAAAAA0/gDorQZrVXak/s1600/emak.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/oh-emak-oh-ibu.html">Oh Emak Oh Ibu</a></h3>

    <p>5 tahun yang lalu waktu emak mengantarku ke terminal bus antar provinsi guna merantau dan berangkat kuliah ke Jakarta... <a href="#"> more &raquo; </a></p>
    </li>

    <li>
    <a href="#"><img src="http://2.bp.blogspot.com/-F0r0xFfA8ow/TsEU8AHakBI/AAAAAAAAAAQ/wy7HNuJAhTA/s1600/hawa.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
    <p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more &raquo;</a></p>
    </li>

    <li>

    <a class="title" href="#"><img src="http://3.bp.blogspot.com/-4_t3sOkM0qw/TsEW7QvN3kI/AAAAAAAAAAk/3mDIGASTc2I/s1600/hawa+2.jpg" /></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
    <p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more &raquo;</a></p>

    </li>

    <li>
    <a href="#"><img src="http://2.bp.blogspot.com/-v5-N8uly1AM/TsEclOVHykI/AAAAAAAAAA8/cj8Gx9NJElc/s1600/youly+chang.jpg"/></a>
    <h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay&#8230; </a></h3>
    <p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more &raquo; </a></p>

    </li>

    </ul>
    Keterangan :
    -  Warna biru : URL image
    -  Warna merah : URL post
    -  Warna kuning : Ringkasan post
    -  Warna hijau : judul post
  6. Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
  7. Kemudian save/simpan template selesai sudah
Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda.  Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.

* Slider source by Borneo Template and plugin Yslider for Wordpress by Andrea Ferracani
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

104 comments:

  1. sipp gan ..
    thank's atas informasinyaaa .. !!
    Semoga sukses ..
    jngan lupa kunjungi blog saya

    http://hariezx6.blogspot.com

    Klo Bisa Follow yaa ..
    heheh

    ReplyDelete
    Replies
    1. blognya bagus tapi lebih bagus lagi lekonk13.com

      Delete
  2. sory gan "Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas : " taro kodenya dimana??

    ReplyDelete
  3. @Fu'additiya Imaspadi Muharam:
    Baca lagi pelan-pelan om, jangan terburu-buru. Coba baca kalimat yang saya kasih bold ini letakkan kode berikut di bawah kode diatas letakkan saja kode itu di bawah kode yang sudah ditaro sebelumnya...
    ocree...

    ReplyDelete
  4. Sory gan d blog saya gak bisa seperti yang ditampilkan seperti demo??

    ReplyDelete
  5. @Fu'additiya Imaspadi Muharam:
    Santai aja kali om... hehehehe. Kalo mau template yang udah ada yahoo slidernya kirim aja ke email johnytemplate@gmail.com nanti dikirim scriptnya

    ReplyDelete
  6. hehe.. sudah saya kirim gan templatenya.. mohon bantuannya y.. :-)

    ReplyDelete
  7. askum gan,, ane coba ni ceritanya,, tapi ko lebarnya ga bisa ngepas ya? dah coba semua yang ukuran lebarnya dicoba tapi ga berubah,MOhon pencerahan ni gan buntu kayanya,, makasih,,salam

    ReplyDelete
  8. @Warga Desa:
    Yng harus diperhatikan, misalnya lebar kolom untuk tempat slider di template Anda 400px, maka untuk container anda kurangi 20px
    kemudian untuk pagination (paling bawah) anda bisa kurang 10px menjadi 390.
    setelah itu anda tingga menyesuaikan untuk gambar thumbnail kecil yang ada di bawah.
    Contohnya seperti diblog ini http://blackbauty-template.blogspot.com/

    ReplyDelete
  9. @maskolis:Mantap gan thanks ni ilmunya,, disini komplit abis,, ane jadi bulak balik,, kalo ntar ada yang ga mudeng lagi boleh nanya lagi ya gan..hoho

    ReplyDelete
  10. keren gan infonya.. tapi sepertinya byk bgt scriptnya ya. saya tkut sizenya jd berat

    ReplyDelete
  11. @Fazri:
    Iya kode2 terlalu panjang, tapi mas Fazri bisa meringkas sebagian kode script diatas di google code sehingga lebih ringan

    ReplyDelete
  12. Gan Mkasih bnget ya gan//////////
    ya muga 2 aen bisa utrak atik sendiri

    ReplyDelete
  13. code body gak ketemu gan,,,
    adanya body onload='new Accordian(&apos;basic-accordian&apos;,5,&apos;header_highlight&apos;);'

    ReplyDelete
  14. @john:
    Ya itu sama aja, karena kode itu memang saya rubah agar accordion tab nya bisa jalan.

    Makasih

    ReplyDelete
  15. Saya udah coba atur size slidenya tapi gak pernah sesuai seperti diblog http://blackbauty-template.blogspot.com/.
    Klo boleh, saya mau template yg ini saja. :D

    ReplyDelete
  16. @John:
    Template yang mana bro... bisa lebih spesifik.
    Tinggalkan email anda nanti saya kirim ...

    ReplyDelete
  17. Judul pada gambar THUMBNAIL diblog saya kenapa tulisannya besar ya?

    ReplyDelete
  18. @Mr-Top:
    Coba cari kata uppercase pada template anda, ganti dengan none

    ReplyDelete
  19. Template yg seperti di http://blackbauty-template.blogspot.com/ mas. Saya udah berburu template kemana-mana tapi lebih sregg sama tempalte yg satu ini, ada Yahoo Slider-nya. Klo mas berkenan tolong kirimi saya ke obugara@gmail.com.
    Thanx ya :).

    ReplyDelete
  20. @John L
    Yah gemana sih bro, template itu kan udah saya share
    disini lihat bagian bawah artikel disitu udah saya sertakan lengkap sama scriptnya tinggal download aja.

    ReplyDelete
  21. Maaf bor gak konek nih. Sorry klo merepotkan. Btw Thanks berat ya . .

    ReplyDelete
  22. bro templetnya kok ga sama jadinya, sya mau yg ini neh http://blackbauty-template.blogspot.com/

    ReplyDelete
  23. @Yan Chriestiano:
    Template itu bisa di download disini baca bagian bawah ya

    ReplyDelete
  24. thank banget ea atas informasi nya sekarang blog ku jadi lebih keren.... kalau mau berkunjung ke blog ku silahkan di

    http://gamerzamz.blogspot.com/

    ReplyDelete
  25. berhasil kang
    makasih tutornya sangat bermanfaat
    saya masih merancang template nih http://nnaufal.blogspot.com dengan adanya slide yahoo ini jadi tambah keren aja blog saya :D

    ReplyDelete
  26. pengen nyoba jadinya salam kenal Gan...sukses selalu

    ReplyDelete
  27. masih atas artikelnya,, tapi kalo misalnya gambarnya dilebarin gimana caranya mas?

    ReplyDelete
  28. Ini dia yang saya cari,....
    tpi di buat slider otomatis gmn mas...?
    kalau itu kan jadinya manual harus masukkan sendiri..??

    Di tunggu mas slider ala yahoo yang otomatis hehee,...

    ReplyDelete
  29. Sob, kode yg tdk ada<div id='main-wrapper ,mohon petunjuknya, syukron.

    ReplyDelete
  30. wah situs ini memang sangat top artikelnya!!! salam kenal facewoman.blogspot.com

    ReplyDelete
  31. susah om,, ngga' mau jadi".. padahal tmplate sy sudah mirip yahoo, tinggal slide shownya saja,, mampir ya om>> i-dil.blogspot.com

    ReplyDelete
  32. kok gak jalan slide nya mas

    ReplyDelete
  33. MANTAPPP !!!
    Thankss Gan Tutorialnya ...

    ReplyDelete
  34. gagal k....postingannya jadi turun ke bawah bukan ke pinggir...udah 2-3x nyoba...tetep gagal..apa ada yg miss ?..thanks klo di kasih tau pencerahannya...utk blog2 yg laen jg kebanyakan copy paste jadi kalimat2 nya sama seperti kata 2...

    ReplyDelete
  35. hi I would like to ask some help I want this slider I follow the rules but not working on my blog.. thank you here's my blog http://einews.blogspot.com/

    ReplyDelete
  36. @Peter Hale Dequilla:
    You have two jquery.min.js in your template, remove one.
    And remove your slider default in your template first before you add this slider, cause that can make a conflict script

    ReplyDelete
  37. kak..
    kode ini div id='main-wrapper' kok gk ad ya

    padahal sudah saya seacrh berulang2 tpi tetap aj gk ad..

    pencerahan kak..
    newbie ... :D

    ReplyDelete
  38. gan kok mun cul nya di home doang., kalau buka postingan kok nggk muncul.,. mohon pencerahan nya gan.,.

    ReplyDelete
  39. mantap gan sudah saya pasang,
    namun tolong petunjuk selanjutnya untuk mengaktifkan otomatis dengan feed post.
    karena pd kode jquery ada suggest begini.
    // when the DOM is ready, convert the feed anchors into feed content.
    http://www.radirachim.web.id
    mail: radirachim@ymail.com

    ReplyDelete
  40. mantap gan ..
    :D
    makasi infonya ..

    ReplyDelete
  41. gan, sms k no. aq donk.. aq mau tanya2 soal blog donk.. nih no. HP aq 085747175377

    ReplyDelete
  42. waw is amaging , saya pengen coba gan.web kamu bagus tuh I like it

    ReplyDelete
  43. Kalau mau buat slideshow yg sprti di 'Johny Joss Banget Blogger Template', itu bgmna crnya y?

    ReplyDelete
    Replies
    1. Coba baca artikel ini :
      http://creatingwebsite-maskolis.blogspot.com/2012/04/membuat-slider-carousel-otomatis.html
      Tinggal diperbesar ukuran gambarnya

      Delete
  44. Bro, saya udah ikutin cara diatas, tapi kok jadinya bukan slider kayak yahoo ya?? tapi jadi tampilan foto biasa (bukan horizontal tapi vertikal), itu kenapa ya??
    mohon bantuannya..

    Trims

    ReplyDelete
  45. Di HTML Blolg saya kok tidak ditemukan kode: div id='main-wrapper'. Gimana solusinya? Terimakasih.

    ReplyDelete
  46. bro,untuk resize ukuran slide nya itu yang di rubah yang mana? terutama lebar slideshow nya
    ea di blog ku kurang lebar slideshow nya...

    ReplyDelete
  47. gkgkgk...asem gan...templat ane langsung berantakan ... jQuery yg udah ada gak fungsi jadinya ... ada trik nya biar fungsi semua gak ??? kepengen tuh yg kek gitu T_T
    eh iya,,,tolong di bales yak...kalo perlu lewat email aja , gimana caranya biar yg jadi gambar slide tuh recent post ato popular post gitu ... thanks gan seblumnya

    ReplyDelete
  48. kanng kolis saya ada sdikit prtanyaan nih...
    - kan Slide ala Yahoo sperti yg akan jelasin d atas uda slesai..
    trus saya pengen ngilangin 'Tab View Widget per Label' di blog ane... code yg d apus yg mna yah...?? mohon bntuannya...
    [TKP: www.g4mezone.com]

    Makasih..

    ReplyDelete
  49. sob ane udh coba dan akhir nya berhasil, tapi kenapa yah posisi nya gk pas berda di tengah2, di lebih condong ke kiri.....
    mohon bantuan nya..

    ReplyDelete
  50. mas slidenya sudah saya pasang tapi koq slider saya yang lain terganggu dan ukurannya pun tidak pas pd template saya bagaiman nih maskolis, tolong dibantu. Apakah maskolis mau memasangkan slider yahoo ini pada blog saya. saya tunggu balasannya. help me.

    ReplyDelete
    Replies
    1. Mas Icuk, setahu saya itu karena terjadi konflik pada dua jquery yang digunakan di template panjenengan.

      Delete
  51. iya ribet banget.. :D but (y) makasih ilmunya kk.. cun dulu :*

    ReplyDelete
  52. - Warna biru : URL image
    - Warna merah : URL post
    - Warna kuning : Ringkasan post
    - Warna hijau : judul post


    ynag di maksud warna warna itu dmnnya yea,,,,

    ReplyDelete
  53. Your blog posts and articles are very interesting and make me become more scientific, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

    ReplyDelete
  54. Thanks udh share gan ...
    tpi G' jadi di blog sya ....
    sya cari slide yg lain aj yg ad di blog maskolis ini ....

    ReplyDelete
  55. gak bisa otomatis ganti ya gan?harus ditulis sendiri deskripsinya dan gambarnya ya

    ReplyDelete
  56. makasih telah bantu, tapi masih ada yang kurang, nih. Gimana cara gantiinin feed slide postnya agar sesuai dengan posting lebel yang dibuat di blogku? Misalkan akan ku masukkan slide post HEADLINE. Coba mampir ke blogku: http://sukabuminews.blogspot.com

    ReplyDelete
  57. Gan, tanggalnya kok gak bisa muncul ya disini http://tanikedelai.alamfay.com/ . mohon bantuannya.
    padahal uda sesuai langkahnya.

    ReplyDelete
  58. mas, ga ada kode lgi?, jadi langsung automatic kluar langsung recent post atau artikel terbarunya di slide show nya

    ReplyDelete
  59. mas, tutorial diatas sudah saya coba, tapi kenapa ya, slider yahho-nya tidak berfungsi, apakah karena template yang saya pakai tidak cocok ? soalnya saya pakai template johny kenthir banget, mohon pencerahannya mas.

    ReplyDelete
  60. Akhh Tidakkk banyak sekali scriptnya...sy save aja dulu linknya..Nanti baru coba. Thx Infonya Admin. GBU

    ReplyDelete
  61. Widget sudah kami pasang di http://adiwimintermas.blogspot.com tapi masih belum disesuaikan. Jancok, keren Mas. Terima kasih..

    ReplyDelete
  62. Mas, gimana yah pasang slideshow kayak gini di pstingan ??? bs gak yah ???

    ReplyDelete
  63. mas ko diblog saya ga bisa ya ? ga ada gambarnya.. padahal jquery.min.js udah aku hapus 1

    ReplyDelete
  64. gan bsa mnta scrip yng sdh jd gk
    klw bsa qrim k andi.syaputra45@ymail.com

    ReplyDelete
  65. thanx infonya gan......... kalau ada waktu iseng, maen di http://d-banx.com ya

    ReplyDelete
  66. mas kolis yang langkah ketiga itu di template apa d add javascript atau diposting blog
    makasih

    ReplyDelete
  67. Thanks gan,, saya sudah ngerti kok,,, dan saya sudah coba lalu hasilnya memuaskan,,,
    semoga sukses yea,,,!! god job

    ReplyDelete
  68. i am not find code
    ]]>
    in template
    here link

    http://swisscomswitzerland.blogspot.com/

    ReplyDelete
  69. Terimakasih sangat membantu, trik ini berhasil. Akan tetapi, bagaimana cara agar melebarkan tampilan slide nya dan membuat nya berada di tengah? Dimana saya harus merubah nya? trims

    ReplyDelete
  70. Mas Kolis untuk kode
    ko saya engga bisa nemuin ya?

    ReplyDelete
  71. Sugeng siang mas, kok slidernya gak mau jalan, gambarnya malah berantakan kebawah. Itu karena apa ya mas ?

    ReplyDelete
  72. Halo mas, klo mau ngatur lebar slide nya yg mana ya?

    ReplyDelete
  73. Hebat banget Gan, kalo ada yg lebih simpel tolong dibagi gan, saya pengen slider untuk recent post dengan image plus kutipan teksnya dan letaknya di bawah header tepat selebar header, bagaimana caranya, please bantu saya Gan. Kalo saya minta Agan mempermak template agar bisa seperti yg saya maksud, ngirimnya kemana Gan, harap maklum newbie banget nih. Matur nuwun.

    ReplyDelete
  74. Gan untuk waktunya kok nggak jadi...? sebabnya apa ya...?

    ReplyDelete
  75. artikel yang bermanfaat sekali...
    ane coba dulu ya cara nya...

    www.kartunamamurah.com

    ReplyDelete
  76. pada langkah 2 nomor 3
    di blog edit HTML saya koq ngga ada?mohon pencerahannya?

    ReplyDelete
  77. tutorialnya emang mantap sob,
    tapi pusing bener kayanya..
    kunjungi jg blog ane sob
    http://188bet-sportsbook.blogspot.com

    ReplyDelete
  78. Kerennnnnnnnnnnnnn.......... hehehehe..........

    ReplyDelete
  79. wah sangat membantu,tampilan saya makin keren terimakasih bos..
    http://gsb12.blogspot.com/

    ReplyDelete
  80. Kalau supaya otomatis gimana gan ?saya nyoba dengan script seperti "Cara membuat Slide otomatis dengan label tertentu" itu cuma muncul gambarnya, tapi deskripsinya g bisa gan.Please pencerahanya gan...

    ReplyDelete
  81. saya tidak bisa menemukan kode div id='main-wrapper' , bagaimana ini ??
    apa ada masalah dg blog saya ??

    ReplyDelete
  82. gan kalo buka postingan lama ko slidenya ilang yah ?

    ReplyDelete
  83. kok gak jadi ya mas? lIhat nih blognya http://inspirasino1.blogspot.com/

    ReplyDelete
  84. heheheeh udah bisa kakak http://inspirasino1.blogspot.com/

    ReplyDelete
  85. Yang modelnya otomatis langsung ngambil di Postnya ada nggk?

    ReplyDelete
  86. kreatifnya sangat bagus gan :) i like this


    kami juga ada bonus over turn bonus 0.3%
    dan kami mentedia kan kode referral

    http://www.senangpoker.com/?ref=859522

    WWW.senang77r.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    http://WWW.senang77.COM

    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    http://WWW.senangp77.COM
    SHARE dengan teman2mu karena senangpoker adalah POKER

    ONLINE TERPERCAYA dan TERCEPAT PELAYANANNYA

    Tunggu apa lagi ayo segera bergabung di senang poker

    yang saat ini memberikan bonus 10 point untuk setiap

    turn over per 1jt langsung di hitung otomatis dalam

    waktu satu minggu jika bonus anda tidak di klaim dalam

    waktu satu minggu maka bonus anda dinyatakan hangus. Dan

    saat ini www.senangpoker.com sudah terdapat permainan

    baru DOMINO99 yang tidak kalah menarik dengan POKER.

    Kami bisa di hub melalui :
    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1 SKYPE : senang.poker
    TWITTER : senangpoker

    ReplyDelete


  87. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)
    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  88. mantap deh artikelnya sangat bermanfaat :)
    ijin share http://kedaijellygamatgoldg.com/obat-herbal-kanker-payudara/

    ReplyDelete
  89. makasih banyak buat infonya gan,, nice post..

    http://goo.gl/Yk7tv9

    ReplyDelete
  90. Terimakasih artikelnya membantu :)
    http://bit.ly/1EOZnPi

    ReplyDelete
  91. terimakasih bro, hasilnya lumayan :

    http://dragonseo.blogspot.com/

    ReplyDelete
  92. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger