Demo Widget Daftar Isi Blogger dengan Navigasi Halaman

by Taufik Nurrohman

HTML

<script type="text/javascript">
showPostDate    = true;
showComments    = true;
idMode          = true;
sortByLabel     = false;
var labelSorter    = "JQuery",
    loadingText    = "Memuat...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "&#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://hompimpaalaihumgambreng.blogspot.com",
    postsperpage   = 10,
    numchars       = 70,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

CSS

body {background-color:skyblue;padding:50px;}

/**
 * Blogger Archive with Pagination
 * Visit: http://hompimpaalaihumgambreng.blogspot.com 
 */

#toc-outer {
  font:normal 11px/14px Arial,Sans-Serif;
  color:black;
  text-align:left;
  margin:0px auto;
  padding:5px 0 0;
  background-color:white;
  border:1px solid #ccc;
  overflow:hidden;
}

#loadingscript {
  font-weight:bold;
  font-size:20px;
  text-align:center;
  padding:30px 0px;
  background:white url('http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif') no-repeat 50% 48%;
  text-indent:-99999px;
  height:300px;
}

.itemposts {
  margin:0 1% 5px;
  height:auto;
  overflow:hidden;
  display:block;
  float:left;
  width:45.5%;
  height:145px;
  padding:1%;
  border:1px solid #ccc;
}

.itemposts h6 {
  margin:0px 0px 10px;
  font:bold 14px/16px Sans-Serif;
  height:16px;;
  overflow:hidden;
  text-transform:none;
  color:#285A7E;
  padding:0px 0px;
}

.itemposts h6 a {
  color:#285A7E;
  text-decoration:none;
}

.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:0px 10px 5px 0px;
  padding:2px;
  background-color:white;
  border:1px solid #ccc;
}

.itemposts .iteminside {}

.itemposts .itemfoot {
  clear:both;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#222;
  color:white;
  font-style:italic;
  overflow:hidden;
}

.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#4B9540;
  float:right;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {
  text-decoration:underline;
}

#itempager {
  padding:30px 0px;
  clear:both;
}

#pagination, #totalposts {
  display:block;
  color:black;
  font:bold 10px Verdana,Arial,Sans-Serif;
  padding:0px;
  margin-bottom:10px;
  text-align:center;
}

#pagination span, #pagination a {
  color:white;
  display:inline;
  margin:0 1px;
  padding:3px 5px;
  text-indent:0px;
  background-color:#316F27;
  text-decoration:none;
}
 
#pagination a:hover    ...