Memasang Widget Daftar Isi Dibawah Posting

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post{margin:8px 5px;padding:0 10px}
.post h1,.post h2{font:18px Oswald;line-height:1.2em;margin:8px 0 3px;padding:0;text-shadow:none;}
.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out; }
.post-body{font:12px Arial;border-top:none;padding-top:0px;background:none;line-height:1.5em;margin:0;padding-bottom:10px;text-align:left;color:#444}
.post-footer{display:none}
.postmeta{;padding:5px 0 10px}
.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.cutter{width:170px;height:130px;overflow:hidden;border:4px double #ccc;margin:0 10px 5px 0;float:left;padding:0px}
#toc-outer{font:normal 11px/14px Arial,Sans-Serif;overflow:hidden;text-align:left;color:#333;margin:0 auto;padding:0}
#loadingscript{background:transparent url(http://1.bp.blogspot.com/-xFIM2-m1StM/UUA5WQ_5uqI/AAAAAAAAAb0/FtFAncA55Hw/s1600/loading.gif) no-repeat 50% 45%;font-weight:700;font-size:20px;height:335px;text-align:center;text-indent:-99999px;padding:30px 0}
.itemposts{float:left;height:auto;overflow:hidden;width:47%;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px #c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px #c3c3c3;box-shadow:1px 1px 5px #c3c3c3;background:#f9f9f9;border:1px solid #fff;margin:3px 5px 8px;padding:0 3px}
.itemposts h6{border-bottom:1px solid #ccc;color:#333;font:bold 12px Arial;height:30px;overflow:hidden;text-transform:none;margin:0 0 5px;padding:2px 6px!important}
.itemposts h6 a:hover{color:#111;text-decoration:none}
.itemposts img{float:left;height:70px;width:70px;z-indent:99999px;margin:0 7px 5px 5px}
.itemposts .itemfoot{border-top:1px solid #ccc;clear:both;color:0;overflow:hidden;padding:4px 5px}
.itemposts .itemfoot a.itemrmore{color:#333;float:right;font-weight:700;text-decoration:none}
.itemposts .itemfoot a.itemrmore:hover{text-decoration:underline}
#itempager{clear:both;padding:10px 0}
#halaman,#totalposts{color:#222;display:block;font:11px Arial;margin-bottom:10px;text-align:left;padding:0}
#halaman span,#halaman a{background:#a13c39;color:#fff;display:inline;text-indent:0;text-decoration:none;margin:0 2px;padding:4px 8px}
#halaman span.hidden{display:none}
#halaman a:hover,#halaman span.actual{background:#333}
@media only screen and (max-width:910px) {
.itemposts { margin:0 5px 5px 7px; overflow:hidden; width:45.5%;height:auto}
}

@media only screen and (max-width:468px) {
.itemposts { width:100%; float:left;  margin:0px 5px 5px 0;}
} 
@media only screen and (max-width:320px) {
.itemposts { width:94%; float:left ;margin:0 5px 10px}
.cutter{width:110px;height:80px}
} 

</style>
</b:if></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='homepage'>
<script type='text/javascript'>
//<![CDATA[
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "",
    loadingText    = "Loading...",
    totalPostLabel = "Total Post :",
    jumpPageLabel  = "Page",
    commentsLabel  = "Comments",
    rmoreText      = "Read more &#9658;",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://johny-ajaib.blogspot.com/",
    postsperpage   = 9,
    numchars       = 160,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5t0hVajN-KlZH8TWykaZE0jzfyV_OKWV-RWKKIMXYkEvYfe_ocULOnBChEXKUAkeFsYH6e8HdA9hr4Kp1cBnlE629jICm34rzUgx28Skj8ZygJ3DeqpweMGXa8UqfKVel5OVUPiN_HTk/s1600/no+image.jpg";
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// -----------------------------------------------------------------------------------------
// Table of Content for Blogger with Pagination
// Original: http://vagabundia.blogspot.com/2011/04/resumen-de-entradas-con-paginacion.html
// Modified by Taufik Nurrohman
// On 3 March 2012
// Visit: http://hompimpaalaihumgambreng.blogspot.com
// -----------------------------------------------------------------------------------------
function showpageposts(e){var t,n,r,i;var s="";if(pagernum==0){postsnum=parseInt(e["feed"]["openSearch$totalResults"].$t);pagernum=parseInt(postsnum/postsperpage)+1}for(var o=1;o<postsperpage;o++){if(o==e["feed"]["entry"]["length"]){break}t=e["feed"]["entry"][o];n=t["title"]["$t"];for(var u=0;u<t["link"]["length"];u++){if(t["link"][u]["rel"]=="alternate"){r=t["link"][u]["href"];break}}for(var a=0;a<t["link"]["length"];a++){if(t["link"][a]["rel"]=="replies"&&t["link"][a]["type"]=="text/html"){var f=t["link"][a]["title"]["split"](" ")[0];break}}if("content"in t){var l=t["content"]["$t"]}else{if("summary"in t){var l=t["summary"]["$t"]}else{var l=""}}var c=/<\S[^>]*>/g;l=l["replace"](c,"");if(l["length"]>numchars){l=l["substring"](0,numchars)+"..."}var h=t["published"]["$t"],p=h["substring"](0,4),d=h["substring"](5,7),v=h["substring"](8,10);var m=new Array;if(idMode){m[1]="Jan";m[2]="Feb";m[3]="Mar";m[4]="Apr";m[5]="Mei";m[6]="Jun";m[7]="Jul";m[8]="Agt";m[9]="Sep";m[10]="Okt";m[11]="Nov";m[12]="Des"}else{m[1]="Jan";m[2]="Feb";m[3]="Mar";m[4]="Apr";m[5]="May";m[6]="Jun";m[7]="Jul";m[8]="Aug";m[9]="Sep";m[10]="Oct";m[11]="Nov";m[12]="Dec"}var g=showPostDate?v+" "+m[parseInt(d,10)]+" "+p+" - ":"";var y=showComments?f+" "+commentsLabel:"";if("media$thumbnail"in t){i=t["media$thumbnail"]["url"]}else{i=imgBlank}s+='<div class="itemposts">';s+='<h6><a title="'+n+'" href="'+r+'">'+n+"</a></h6>";s+='<div class="iteminside"><a title="'+n+'" href="'+r+'"><img alt="'+n+'" src="'+i+'" /></a>';s+=l+"</div>";s+='<div style="clear:both;"></div><div class="itemfoot">'+g+y+'<a class="itemrmore" href="'+r+'">'+rmoreText+"</a></div>";s+="</div>"}document["getElementById"]("results")["innerHTML"]=s;halaman()}function halaman(){countP=0;output="";if(actualpage>1){output+='<a class="prevjson" href="javascript:incluirscript('+parseInt(actualpage-1)+')">'+prevText+"</a>"}else{output+='<span class="prevjson hidden">'+prevText+"</span>"}if(pagernum<maxpage+1){for(countP=1;countP<=pagernum;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}}else{if(pagernum>maxpage-1){if(actualpage<minpage){for(countP=1;countP<maxpage-2;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}output+=" ... ";output+='<a href="javascript:incluirscript('+parseInt(pagernum-1)+')">'+parseInt(pagernum-1)+"</a>";output+='<a href="javascript:incluirscript('+pagernum+')">'+pagernum+"</a>"}else{if(pagernum-(minpage-1)>actualpage&&actualpage>minpage-1){output+='<a href="javascript:incluirscript(1)">1</a>';output+='<a href="javascript:incluirscript(2)">2</a>';output+=" ... ";for(countP=actualpage-2;countP<=actualpage+2;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}output+=" ... ";output+='<a href="javascript:incluirscript('+parseInt(pagernum-1)+')">'+parseInt(pagernum-1)+"</a>";output+='<a href="javascript:incluirscript('+pagernum+')">'+pagernum+"</a>"}else{output+='<a href="javascript:incluirscript(1)">1</a>';output+='<a href="javascript:incluirscript(2)">2</a>';output+=" ... ";for(countP=pagernum-(minpage+1);countP<=pagernum;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}}}}}if(actualpage<countP-1){output+='<a class="nextjson" href="javascript:incluirscript('+parseInt(actualpage+1)+')">'+nextText+"</a>"}else{output+='<span class="nextjson hidden">'+nextText+"</span>"}document["getElementById"]("halaman")["innerHTML"]=output;var e=actualpage*postsperpage-(postsperpage-1);var t=actualpage*postsperpage;var n=totalPostLabel+" "+postsnum+" - "+jumpPageLabel+" "+e+" - "+t;document["getElementById"]("totalposts")["innerHTML"]=n}function incluirscript(e){if(firstPage==1){removerscript()}document["getElementById"]("results")["innerHTML"]='<div id="loadingscript">'+loadingText+"</div>";document["getElementById"]("halaman")["innerHTML"]="";document["getElementById"]("totalposts")["innerHTML"]="";var t=e*postsperpage-(postsperpage-1);if(sortByLabel){var n=siteUrl+"/feeds/posts/default/-/"+labelSorter+"?start-index="+t}else{var n=siteUrl+"/feeds/posts/default/?start-index="+t}n+="&max-results="+postsperpage;n+="&orderby=published&alt=json-in-script&callback=showpageposts";var r=document["createElement"]("script");r["setAttribute"]("type","text/javascript");r["setAttribute"]("src",n);r["setAttribute"]("id","TEMPORAL");document["getElementsByTagName"]("head")[0]["appendChild"](r);firstPage=1;actualpage=e}function removerscript(){var e=document["getElementById"]("TEMPORAL");var t=e["parentNode"];t["removeChild"](e)}var minpage=4;var maxpage=10;var firstPage=0;var pagernum=0;var postsnum=1;var actualpage=1;onload=function(){incluirscript(1)};document["write"]('<div id="toc-outer">');document["write"]('<div id="results"></div>');document["write"]('<div id="itempager" style="position:relative;"><div id="halaman"></div>');document["write"]('<div id="totalposts"></div></div></div>')
//]]>
</script>
</div>
</b:if>

<div class='blog-mobile-link'> <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a> </div> </b:if> </div> </b:if> <div class='clear'/>

Labels: Blogger Tutorial