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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaW1tW2ibfX5ForakOsNr88Oy-RftQGokvqgXvOUhvRFD0IJBb02YgEzPKJHznA5zkNYG1Ox6Ip71lWHPHWExXZaYBNYepfbOOMy9fKG5AD2GPCbUoCmm4YoP0sShiMMMnTXyVJcfOo8Cw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fOLPyH7AYBUWpRlj8cFIM0GfNsAq1bqKiEPW_k_ED1Wb27bAenJeJD6TXTZbAc5fU2p-OBiK2qQmdi-Pt2zBHqUVvFx8UTgB4WgLqI9g4BV7j5oCvcKiTMxBx0MzEeqUGfgAA4azQukz/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrW4umaiV6ZFONsfRsae-FUTxa8SuBaj6Z1eEu2mPysBOgibeUs454aqmjPLIdk60BlPzipkXr-Fwc3BDc2hfE3ORUTLWIM6ISKA3bNTIve4R5fPqJ-x73nkhHxtdubCLJWdJq8R3EnPy2/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] untuk 5 image slide.
• 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpwdFGNEzAjgvKzqQYe3bgZXNRwzcCPA9pBeE8MNXSkry5XNisaKxw1WEHKXb14RO_DxAK1xYZt4krY5fjj1-ga9dvLYuUPRv4RcYzbGbsBE5MrxeyJkYN64vMB0OwK3AVkUo7051kWLK/s1600/No+Picture.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://tips-blogbego.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://tips-blogbego.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 Biru
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 :@