Cara Membuat Animasi Daftar Isi Otomatis

Pada saat Blogwalking saya menemukan Animasi yang diberi judul Cara Membuat Feed Carousel Otomatis, setelah saya modif menjadi :r Animasi Daftar Isi Otomatis, Demonya lihat » disini
Untuk mendapatkan scriptnya kita wajib Registrasi dan bergabung dulu pada Forumnya,  :z  Karena slide ini mempunyai kelebihan tersendiri yaitu akan menambahkan Postingan kita secara otomatis, kalau kawan tertarik silahkan ikuti langkah-langkahnya, sebagai berikut :
  • Masuk Account Blogger dengan ID kawan
  • Pada Perancang Template pilih Edit HTML
  • Cari Kode  ]]></b:skin>
  • Copas Kode berikut diatasnya 
/* Star Carousel Otomatis BLOGBEGO*/
h2.widget_title{font-family:times new roman; color:#cd1713; font-size:18px; margin:4px 0; letter-spacing:-1px;text-transform:none;text-align:left;font-weight:normal}
h2.widget_title a{color:#fff;}
h2.widget_title a:hover{text-decoration:none}
#mediabar{width:99%; overflow:hidden; background:#2a2a2a; padding:8px 0 10px 8px; margin-bottom:10px; position:relative; height:223px;}
#mediabar .container{position:absolute; left:8px; width:800px; height:223px; overflow:hidden}
#mediabar ul{width:10000px; position:relative}
#mediabar li{float:left; width:152px; padding:0 8px 0 0}
#mediabar .thumb{width:150px; background:#fff; height:113px; border:1px solid #333; padding:1px; margin:0 0 3px 0; overflow:hidden; text-align:center}
#mediabar .thumb img{margin:0 auto; max-width:150px; max-height:113px}
#mediabar .info{width:148px; position:relative; background:#fff; border:1px solid #333; padding:2px; overflow:hidden; min-height:60px; height:auto !important; height:60px}
#mediabar .info p{font-size:11px; line-height:1.2em; font-weight:bold; padding:0 2px 0 2px; margin-top:1px;color:#000;}
#mediabar .info p.moreVideo{position:absolute; bottom:3px; right:3px; padding:3px 5px 0 5px}
#mediabar .info p.morePhoto{position:absolute; bottom:3px; right:3px; padding:3px 5px 0 5px; margin-bottom:0px;}
#mediabar .info p.morePhoto a{color:#50630a; background:url(http://3.bp.blogspot.com/-S9AyTNqtnB0/TW1VUmYZOzI/AAAAAAAAAIk/4xoQZiz-RQc/s1600/icophoto.gif) no-repeat left center; padding:0 0 0 17px}
#mediabar #previous_button{position:absolute; width:16px; height:16px; right:35px; top:21px; background:url(http://2.bp.blogspot.com/-avUr7vN8sOE/TW1TRWH5RBI/AAAAAAAAAIE/DTZCNHD7Pm4/s1600/prevu.png) no-repeat; z-index:100; cursor:pointer}
#mediabar #previous_button.disabled{background:url(http://img214.imageshack.us/img214/9588/prevdisabled.png) no-repeat; cursor:default}
#mediabar #next_button{position:absolute; right:10px; top:21px; width:16px; height:16px; background:url(http://1.bp.blogspot.com/-4p8UQa5X68s/TW1TiVv4r1I/AAAAAAAAAIM/glOV4gwQKVM/s1600/nextro.png) no-repeat; z-index:100; cursor:pointer}
#mediabar #next_button.disabled{background:url(http://img513.imageshack.us/img513/5651/nextdisabled.png); cursor:default}
/* END Carousel Otomatis BLOGBEGO */
  • Width:800px; berwarna merah adalah lebar Bar Blog [bisa disesuaikan dengan lebar blog]
  • Width:152px; dan 8px berwarna violet lebar image slide dan pemisah [bisa disesuaikan jumlah image yang akan ditampilkan].
  • Selanjunya Copas Kode berikut dibawah ]]></b:skin> atau diatas </head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
 //<![CDATA[
(function($) {                                          // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
    o = $.extend({
        btnPrev: null,
        btnNext: null,
        btnGo: null,
        mouseWheel: false,
        auto: null,
        speed: 200,
        easing: null,
        vertical: false,
        circular: true,
        visible: 3,
        start: 0,
        scroll: 1,
        beforeStart: null,
        afterEnd: null
    }, o || {});

    return this.each(function() {                           // Returns the element collection. Chainable.

        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
        var div = $(this), ul = $("ul:first", div), tLi = $(".car", ul), tl = tLi.size(), v = o.visible;

        if(o.circular) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            o.start += v;
        }

        var li = $(".car", ul), itemLength = li.size(), curr = o.start;
        div.css("visibility", "visible");

        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
        ul.css({ padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        //div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "29px"});
div.css({overflow: "hidden", "z-index": "2"});

        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

        li.css({width: li.width()});
        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images

        if(o.btnPrev)
            $(o.btnPrev).click(function() {
                return go(curr-o.scroll);
            });

        if(o.btnNext)
            $(o.btnNext).click(function() {
                return go(curr+o.scroll);
            });

        if(o.btnGo)
            $.each(o.btnGo, function(i, val) {
                $(val).click(function() {
                    return go(o.circular ? o.visible+i : i);
                });
            });

        if(o.mouseWheel && div.mousewheel)
            div.mousewheel(function(e, d) {
                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
            });

        if(o.auto)
            setInterval(function() {
                go(curr+o.scroll);
            }, o.auto+o.speed);

        function vis() {
            return li.slice(curr).slice(0,v);
        };

        function go(to) {
            if(!running) {

                if(o.beforeStart)
                    o.beforeStart.call(this, vis());

                if(o.circular) {            // If circular we are in first or last, then goto the other end
                    if(to<=o.start-v-1) {           // If first, then goto last
                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
                    } else if(to>=itemLength-v+1) { // If last, then goto first
                        ul.css(animCss, -( (v) * liSize ) + "px" );
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
                    } else curr = to;
                } else {                    // If non-circular and to points to first or last, we just return.
                    if(to<0 || to>itemLength-v) return;
                    else curr = to;
                }                           // If neither overrides it, the curr will still be "to" and we can proceed.

                running = true;

                ul.animate(
                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                    function() {
                        if(o.afterEnd)
                            o.afterEnd.call(this, vis());
                        running = false;
                    }
                );
                // Disable buttons when the carousel reaches the last/first, and enable when not
                if(!o.circular) {
                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                    $( (curr-o.scroll<0 && o.btnPrev)
                        ||
                       (curr+o.scroll > itemLength-v && o.btnNext)
                        ||
                       []
                     ).addClass("disabled");
                }

            }
            return false;
        };
    });
};

function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);

imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-WvLkTirqfbk/TX3kDVx2Y2I/AAAAAAAAAL4/xCQJIBIqwdE/s1600/No%2BPicture.png";
showRandomImg = true;

numposts7 = 100;

function showrecentposts7(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
     document.write('<ul>');
  for (var i = 0; i < numposts7; 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;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="150" height="113" class="alignnone" src="'+img[i]+'"/></a> </div><div class="info"><p>'+posttitle+'</p><p class="morePhoto"><a href="'+posturl+'">L i h a t</a></p></div></li> ';
document.write(trtd);    

 j++;
}
document.write('</ul>');
}

 //]]>
</script>

  • Angka 100 yang berwarna merah adalah jumlah postingan, bisa disesuaikan
  • Simpan Template kawan, dan kembali ke Perancang Template
  • Tambah Gadget 
  • Copas Kode berikut kedalamnya 
<div id='mediabar'>
<h2 class='widget_title'>
<script>
 document.write('<a href="http://blog-renovasi.blogspot.com">SLIDE DAFTAR ISI</a>');
 </script>
</h2>
<div id='previous_button'></div>
<div id='next_button'></div>
<div class='container'>
<script>
 document.write("<script src=\"http://blog-renovasi.blogspot.com/feeds/posts/default?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts7\"><\/script>"); </script>
</div>
</div><!-- end of Mediabar -->
<script type='text/javascript'>
(function($) { $(document).ready(function(){
 $("#mediabar .container").jCarouselLite({
 auto:4000,
scroll: 2,
 speed: 3000,
 visible: 6,
 start: 0,
 circular: true,
 btnPrev: "#previous_button",
 btnNext: "#next_button"
});
 })})(jQuery)
 </script>

Catatan :
  1. Silahkan ganti Link saya teks yang berwarna kuning
  2. Angka 2 yang berwarna merah adalah slide akan bergeser ke kiri 2 slide, angka ini bisa diganti dengan angka 1 sampai sebanyak image yang tampil
  3. Simpan Blog kawan mudah-mudahan tidak ada masalah :@ 



    Description: Cara Membuat Animasi Daftar Isi Otomatis - Rating: 4.5

    Reviewer: Putu BlogBego - Itemreviewed: Cara Membuat Animasi Daftar Isi Otomatis


    Kawan sedang berada pada Artikel
    » Cara Membuat Animasi Daftar Isi Otomatis
    di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
    asal kawan menyertakan Link / Sumber Artikelnya

    Artikel Menarik Lainnya :


    Comments
    20 Comments

    20 komentar pada : “Cara Membuat Animasi Daftar Isi Otomatis”


    1. mantap kayaknya nih...
      buat demonya sekalian atuh di fiddle ato dimana gitooo...xixixixi
      cobaa dolo aaahhhh

      ReplyDelete
    2. @Beben Koben trims mas sarannya, itu blog Demo saya tak pernah update lagi, biar terisi secara tak langsung :r

      ReplyDelete
    3. Mantap bro, ditunggu kreasi-kreasi yag lainnya...

      ReplyDelete
    4. keren nch s0b, tp synk q gk bs c0ba sekarang ..

      ReplyDelete
    5. @admirer nggak apa-apa, trims dah komentar :O

      ReplyDelete
    6. berkunjung kawan, dapat inspirasi baru nih, makasih infonya

      ReplyDelete
    7. Aqu cari yang untuk di wordpress ada ga' ya, untuk menambah link ke postingan yang lain untuk kepentingan SEO masbro, kebetulan lagi ikutan Kontes SEO Peluang Bisnis Online Tanpa Ribet, ayo ikutan juga, hadiahnya lumayan loh masbro :)

      ReplyDelete
    8. @TokoOnlineBaru sayang sekali kawan, artikel saya khusus di Blogspot :O

      ReplyDelete
    9. saya kesulitan mencari Kode ]]>
      dimana sih tempatnya, trus cara memasukkan kode html betul2 buat saya bingung tolong dong saya dibantu, selain itu blog saya yang di http://sdnsumogawe3.blogspot.com, sangat ingin mempunyai desain blog seperti punya anda, jika berkenan saya mohon diberik petunjuk, jika harus memasukkan kode2 saya sangat bahagia jika dikirimkan ke g-mail saya yaitu di lasino77@gmail.com

      ReplyDelete
    10. @lasino Setelah saya perhatikan maksud kawan ]]></b:skin> untuk menemukan kode tsb pakai Ctrl+F atau F3 [ini khusus Blogspot] :#

      ReplyDelete
    11. wah saya sudah coba2 koq gagal yah mas?
      apa pengaruh di themes/template yang saya pakai yah...(kurang cocok)

      ReplyDelete
    12. mantap gan :)

      catatanlinuxku.blogspot.com

      ReplyDelete
    13. @herman kemungkinan itu pasti, karena sampai saat ini saya coba di beberapa template wordpres selalu gagal :D

      ReplyDelete
    14. mantap postingnya masbro...

      langsung di coba...

      ReplyDelete
    15. @idebagus silahkan, mudah2an tidak ada masalah, karena ada template yang nggak respek dengan ini :z

      ReplyDelete
    KOMENTAR MENCERMINKAN KEPRIBADIAN KAWAN BLOGGER
    EKSPRESIKAN KOMENTAR DENGAN EMOTICON :

    :a :b :c :d :e :f :g :h :i :j :k :l :m
    :n :o :p :q :r :s :t :u :v :w :x :y :z