Daftar Isi Navigasi [2 Kolom] | OOM RIO
Home » Widget » Daftar Isi Navigasi [2 Kolom]

Friday, February 22, 2013

Daftar Isi Navigasi [2 Kolom]

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.
» CSS
<!-- Daftar Isi navigasi -->
<style type='text/css'>
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0px 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 0px;
  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:0px 7px 5px 0px;
  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 0px;
}
#halaman, #totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0px;
}
#halaman span, #halaman a {
  background-color:#666;
  color:#fff;
  display:inline;
  margin:0 1px;
  padding:3px 5px;
  text-indent:0px;
  text-decoration:none;
}
#halaman a:hover  {background-color:#333;}
#halaman span.actual {background-color:black;}
#halaman span.hidden {display:none;}
</style>
<!-- Daftar Isi navigasi -->
» JavaScript
<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>
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
<!-- Daftar Isi navigasi -->
<style type='text/css'>
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0px 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 0px;
  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:0px 7px 5px 0px;
  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 0px;
}
#halaman, #totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0px;
}
#halaman span, #halaman a {
  background-color:#666;
  color:#fff;
  display:inline;
  margin:0 1px;
  padding:3px 5px;
  text-indent:0px;
  text-decoration:none;
}
#halaman a:hover  {background-color:#333;}
#halaman span.actual {background-color:black;}
#halaman span.hidden {display:none;}
</style>
<!-- Daftar Isi navigasi -->
<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>
4. Simpan 
5. Simpan Setelan
» Silahkan anda sesuaikan sendiri 
» Jika ingin menjadikan satu kolom lihat kode css berikut ini:
.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%;
}
ganti dengan kode float, height, dan width-nya
float:left;
height:auto;
width:100%;
» Untuk mengganti tulisan total post, next, prev, readmore dll.
lihat pada bagian java scriptnya
var showPostDate   = true, //menampilkan waktu terbit post
    showComments   = true, //menampilkan jumlah komentar
    idMode         = true, //Indonesian language
    sortByLabel    = false, //berdasarkan label
    labelSorter    = "", //tuliskan nama label jika hanya menampilkan artikel dg lebel tertentu
    loadingText    = "Loading...", //ketika animasi loading tidak muncul
    totalPostLabel = "Jumlah posting:", //tulisan jumlah posting
    jumpPageLabel  = "Halaman", //tulisan halaman
    commentsLabel  = "Komentar", //tulisan komentar/comment
    rmoreText      = "Selengkapnya &#9658;", //tulisan readmore
    prevText       = "Prev", //sebelumnya
    nextText       = "Next", //selanjutnya
    siteUrl        = "http://mdf-blog.blogspot.com", //ganti dengan alamat blog anda
    postsperpage   = 4, //jumlah artikel yang tampil per page
    numchars       = 150, //jumlah karakter huruf yang tampil setiap artikel
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg"; //gambar yang tampil jika post tidak terdapat gambar ataupun gambar tidak bisa ditampilkan
Silahkan anda sesuiakan sendiri ganti false dengan true ataupun sebaliknya.
ganti http://mdf-blog.blogspot.com dengan alamat blog anda.
» Semoga Bermanfaat


Judul: Daftar Isi Navigasi [2 Kolom]; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:


Posted by at 5:58 PM
Labels:

0 comments:

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).

Subscribe to: Post Comments (Atom)