Daftar Isi Navigasi [2 Kolom]

Setelah beberapa hari tidak posting karena sibuk, untuk kesempatan kali ini saya akan posting tentang "Widget Daftar Isi Navigation 2 kolom", widget daftar isi 2 kolom ini hasil modifikasi dari widget daftar isi navigasi dari DT:] dan widget ini pula yang saya gunakan untuk menggantikan elemen posting pada homepage atau halaman utama blog saya.




Untuk Pemasangannya berikut langkah-langkahnya:
1. Login Akun Blogger anda
2. Pada dashboard pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Copy kode berikut ini kedalamnya
<style type='text/css'> #toc-outer {   color:black;   font:normal 11px/14px Arial,Sans-Serif;   height:auto;   margin:0 auto;   overflow:hidden;   padding:0;   text-align:left; } #loadingscript {   background:transparent url(&#39;   http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif&#39;   ) no-repeat 50% 45%;   font-weight:bold;   font-size:20px;   height:345px;   padding:30px 0;   text-align:center;   text-indent:-99999px; } .itemposts {   background-color:#fff;   border:1px solid #ccc;   -moz-border-radius:2px;   -webkit-border-radius:2px;   border-radius:2px;   float:right;   height:130px;   margin:0 1% 5px;   overflow:hidden;   position:relative;   padding:1%;   width:45%; } .itemposts h6 {   -moz-border-radius:5px;   -webkit-border-radius:5px;   border-radius:5px;   border-bottom:2px solid #333;   color:#333;   font:bold 11px/16px Sans-Serif;   height:15px;   margin:0 0 5px;   overflow:hidden;   padding:2px 6px !important;   text-transform:none; } .itemposts h6 a:hover {   color:#AD3000;   text-decoration:none; } .itemposts img {   background-color:#fff;   border:1px solid #ccc;   -moz-border-radius:3px;   -webkit-border-radius:3px;   border-radius:3px;   float:left;   height:65px;   margin:0 7px 5px 0;   padding:3px;   width:65px;   z-indent:99999px; } .itemposts .iteminside {} .itemposts .itemfoot {   border-radius:5px;   -moz-border-radius:5px;   -webkit-border-radius:5px;   border-top:2px solid #333;   padding:3px;   clear:both;   background-color:#fff;   color:333;   overflow:hidden; } .itemposts .itemfoot a.itemrmore {   color:#333;   float:right;   font-weight:bold;   text-decoration:none; } .itemposts .itemfoot a.itemrmore:hover {text-decoration:underline} #itempager {   clear:both;   padding:10px 0; } #halaman, #totalposts {   color:#000;   display:block;   font:bold 10px Verdana,Arial,Sans-Serif;   margin-bottom:10px;   text-align:center;   padding:0; } #halaman span, #halaman a {   background-color:#666;   color:#fff;   display:inline;   margin:0 1px;   padding:3px 5px;   text-indent:0;   text-decoration:none; } #halaman a:hover {background-color:#333} #halaman span.actual {background-color:black} #halaman span.hidden {display:none} </style> <script type='text/javascript'> //<![CDATA[ var showPostDate   = true,     showComments   = true,     idMode         = true,     sortByLabel    = false,     labelSorter    = "",     loadingText    = "Loading...",     totalPostLabel = "Jumlah posting:",     jumpPageLabel  = "Halaman",     commentsLabel  = "Komentar",     rmoreText      = "Selengkapnya &#9658;",     prevText       = "Prev",     nextText       = "Next",     siteUrl        = "http://mdf-blog.blogspot.com",     postsperpage   = 4,     numchars       = 150,     imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg"; //]]> </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 // ----------------------------------------------------------------------------------------- var minpage=4;var maxpage=10;var firstPage=0;var pagernum=0;var postsnum=0;var actualpage=1;function showpageposts(_0xef2cx8){var _0xef2cx9,_0xef2cxa,_0xef2cxb,_0xef2cxc;var _0xef2cxd='';if(pagernum==0){postsnum=parseInt(_0xef2cx8['feed']['openSearch$totalResults'].$t);pagernum=parseInt(postsnum/postsperpage)+1};for(var _0xef2cxe=0;_0xef2cxe<postsperpage;_0xef2cxe++){if(_0xef2cxe==_0xef2cx8['feed']['entry']['length']){break};_0xef2cx9=_0xef2cx8['feed']['entry'][_0xef2cxe];_0xef2cxa=_0xef2cx9['title']['$t'];for(var _0xef2cxf=0;_0xef2cxf<_0xef2cx9['link']['length'];_0xef2cxf++){if(_0xef2cx9['link'][_0xef2cxf]['rel']=='alternate'){_0xef2cxb=_0xef2cx9['link'][_0xef2cxf]['href'];break}};for(var _0xef2cx10=0;_0xef2cx10<_0xef2cx9['link']['length'];_0xef2cx10++){if(_0xef2cx9['link'][_0xef2cx10]['rel']=='replies'&&_0xef2cx9['link'][_0xef2cx10]['type']=='text/html'){var _0xef2cx11=_0xef2cx9['link'][_0xef2cx10]['title']['split'](' ')[0];break}};if('content'in _0xef2cx9){var _0xef2cx12=_0xef2cx9['content']['$t']}else{if('summary'in _0xef2cx9){var _0xef2cx12=_0xef2cx9['summary']['$t']}else{var _0xef2cx12=''}};var _0xef2cx13=/<\S[^>]*>/g;_0xef2cx12=_0xef2cx12['replace'](_0xef2cx13,'');if(_0xef2cx12['length']>numchars){_0xef2cx12=_0xef2cx12['substring'](0,numchars)+'...'};var _0xef2cx14=_0xef2cx9['published']['$t'],_0xef2cx15=_0xef2cx14['substring'](0,4),_0xef2cx16=_0xef2cx14['substring'](5,7),_0xef2cx17=_0xef2cx14['substring'](8,10);var _0xef2cx18=new Array();if(idMode){_0xef2cx18[1]='Jan';_0xef2cx18[2]='Feb';_0xef2cx18[3]='Mar';_0xef2cx18[4]='Apr';_0xef2cx18[5]='Mei';_0xef2cx18[6]='Jun';_0xef2cx18[7]='Jul';_0xef2cx18[8]='Agt';_0xef2cx18[9]='Sep';_0xef2cx18[10]='Okt';_0xef2cx18[11]='Nov';_0xef2cx18[12]='Des'}else{_0xef2cx18[1]='Jan';_0xef2cx18[2]='Feb';_0xef2cx18[3]='Mar';_0xef2cx18[4]='Apr';_0xef2cx18[5]='May';_0xef2cx18[6]='Jun';_0xef2cx18[7]='Jul';_0xef2cx18[8]='Aug';_0xef2cx18[9]='Sep';_0xef2cx18[10]='Oct';_0xef2cx18[11]='Nov';_0xef2cx18[12]='Dec'};var _0xef2cx19=(showPostDate)?_0xef2cx17+' '+_0xef2cx18[parseInt(_0xef2cx16,10)]+' '+_0xef2cx15+' - ':'';var _0xef2cx1a=(showComments)?_0xef2cx11+' '+commentsLabel:'';if('media$thumbnail'in _0xef2cx9){_0xef2cxc=_0xef2cx9['media$thumbnail']['url']}else{_0xef2cxc=imgBlank};_0xef2cxd+='<div class="itemposts">';_0xef2cxd+='<h6><a title="'+_0xef2cxa+'" href="'+_0xef2cxb+'" target="_blank">'+_0xef2cxa+'</a></h6>';_0xef2cxd+='<div class="iteminside"><a title="'+_0xef2cxa+'" href="'+_0xef2cxb+'" target="_blank"><img alt="'+_0xef2cxa+'" src="'+_0xef2cxc+'" /></a>';_0xef2cxd+=_0xef2cx12+'</div>';_0xef2cxd+='<div style="clear:both;"></div><div class="itemfoot">'+_0xef2cx19+_0xef2cx1a+'<a class="itemrmore" href="'+_0xef2cxb+'" target="_blank">'+rmoreText+'</a></div>';_0xef2cxd+='</div>'};document['getElementById']('results')['innerHTML']=_0xef2cxd;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 _0xef2cx1c=(actualpage*postsperpage)-(postsperpage-1);var _0xef2cx1d=actualpage*postsperpage;var _0xef2cx1e=totalPostLabel+' '+postsnum+' - '+jumpPageLabel+' '+_0xef2cx1c+' - '+_0xef2cx1d;document['getElementById']('totalposts')['innerHTML']=_0xef2cx1e};function incluirscript(_0xef2cx20){if(firstPage==1){removerscript()};document['getElementById']('results')['innerHTML']='<div id="loadingscript">'+loadingText+'</div>';document['getElementById']('halaman')['innerHTML']='';document['getElementById']('totalposts')['innerHTML']='';var _0xef2cx1c=(_0xef2cx20*postsperpage)-(postsperpage-1);if(sortByLabel){var _0xef2cx21=siteUrl+'/feeds/posts/default/-/'+labelSorter+'?start-index='+_0xef2cx1c}else{var _0xef2cx21=siteUrl+'/feeds/posts/default/?start-index='+_0xef2cx1c};_0xef2cx21+='&max-results='+postsperpage;_0xef2cx21+='&orderby=published&alt=json-in-script&callback=showpageposts';var _0xef2cx22=document['createElement']('script');_0xef2cx22['setAttribute']('type','text/javascript');_0xef2cx22['setAttribute']('src',_0xef2cx21);_0xef2cx22['setAttribute']('id','TEMPORAL');document['getElementsByTagName']('head')[0]['appendChild'](_0xef2cx22);firstPage=1;actualpage=_0xef2cx20};function removerscript(){var _0xef2cx24=document['getElementById']('TEMPORAL');var _0xef2cx25=_0xef2cx24['parentNode'];_0xef2cx25['removeChild'](_0xef2cx24)};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>
Bagikan :
+
Previous
Next Post »
 
Copyright © 2015 Ow.. Baru! - All Rights Reserved
Template By Kunci Dunia
Back To Top