GO Blog

Banyak script javascript untuk membuat daftar isi di blogger secara otomatis dengan memanfaatkan atau memanggil direktori feed default blogger. namun terkadang javascript ini terlalu berat saat memuat atau proses loader content sehingga membuat pengunjung malas untuk membuka. contoh seperti kode javascript di bawah ini yang bisa sobat coba...

<div style="background-color: none; border: 1px solid #000000; height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="http://blognyailmu.googlecode.com/files/Daftar%20Isi%20Umum.js.js">
</script><script src="http://ngeblog07.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

tapi, dengan memanfaatkan jquery script berikut, load daftar isi lebih ringan saat memuat isi dari seluruh content blog sobat dan juga lebih praktis karena memiliki navigasi yang tidak perlu meload atau memuat ulang ketika permintaan content berikutnya di buka. langsung saja berikut ini kodenya:

<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Baca lanjutannya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://defandaky.blogspot.com",
    postsPerPage   = 10,
    numChars       = 400,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcBtKZ1l_PkD7v0mHUULg0L7GZoSdlc6PoJetWAPpoIxCcgLbYJ2Yw52rY4Me8ER-6x4UYmQcsTcJOvXczuGOJWYCNgRBG7l9nHR8OCYBFZUPNMhLyeaigTa3PC5F299TE3plz533AAOw/s127/background+noimg.png";
</script>
<script type="text/javascript" src="http://template-defandaky.googlecode.com/files/index-home-list.js"></script>

untuk menggunakannya, silahkan ikuti langkah yang mudah ini...

Buka akun blogger anda
Buka Template > Edit Template/HTML
Cari kode ]]></b:skin>
Copy kode di bawah ini dan pastekan sebelum/di atasnya

#toc-outer {
  font:normal 11px/14px Arial,Sans-Serif;
  color:#666;
  text-align:left;
  margin:0px auto;
  padding:15px;
  background-color:white;
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  box-shadow:0px 1px 4px rgba(0,0,0,0.6);
}

#loadingscript {
  background:#F6EFBB url('http://reader-download.googlecode.com/files/ajax-loader.gif') no-repeat 50% 46%;
  padding:10px;
  font:bold 20px Georgia,Serif;
  color:black;
  height:400px;
  text-indent:-9999px;
  -webkit-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  -moz-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  box-shadow:inset 0px 0px 0px 5px #EAE0AD;
}

.itemposts {
  margin:0px auto 5px;
  height:auto;
  background-color:white;
  overflow:hidden;
  display:block;
}

.itemposts h6 {
  margin:0px auto 2px;
  font:bold 12px/14px Arial,Sans-Serif;
  background-color:#9BB009;
  background-image:-webkit-linear-gradient(top, #9BB009, #AABD30);
  background-image:-moz-linear-gradient(top, #9BB009, #AABD30);
  background-image:-ms-linear-gradient(top, #9BB009, #AABD30);
  background-image:-o-linear-gradient(top, #9BB009, #AABD30);
  background-image:linear-gradient(top, #9BB009, #AABD30);
  padding:10px 15px;
  text-transform:none;
  color:white;
}

.itemposts h6 a {
  color:white;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}

.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  background-color:#fafafa;
  border:1px solid #dcdcdc;
  padding:4px;
}

.itemposts .iteminside {
  padding:10px;
  background-color:#f2f2f2;
  background-image:-webkit-linear-gradient(top, #f2f2f2, white);
  background-image:-moz-linear-gradient(top, #f2f2f2, white);
  background-image:-ms-linear-gradient(top, #f2f2f2, white);
  background-image:-o-linear-gradient(top, #f2f2f2, white);
  background-image:linear-gradient(top, #f2f2f2, white);
  border-top:1px solid #e5e5e5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}

.itemposts .itemfoot {
  clear:both;
  border:1px solid #EAE7DB;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#FAFAE7;
  color:#4B86C1;
  overflow:hidden;
}

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

.itemposts .itemfoot a.itemrmore:hover {
  color:#9BB009;
  text-decoration:underline;
}

#itempager {
  background-color:#F2F0F1;
  padding:30px 0px;
  border-top:1px solid #E5E5E5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}

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

#pagination span, #pagination a {
  border:1px solid #e5e5e5;
  color:white;
  display:inline;
  margin:0 1px;
  padding:2px 5px;
  text-indent:0px;
  background-color:#8899D0;
  text-decoration:none;
}
 
#pagination span.actual,
#pagination a:hover {
  background-color:#7483BC;
}

#pagination span.hidden {
  display:none;
}

Simpan perubahan

Lalu buatlah postingan baru atau laman baru di blogger.
Kemudian pilih HTML disamping Compose (ingat HTML, bukan COMPOSE)
Setelah itu copy script di bawah ini

<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Baca lanjutannya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://defandaky.blogspot.com",
    postsPerPage   = 10,
    numChars       = 400,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcBtKZ1l_PkD7v0mHUULg0L7GZoSdlc6PoJetWAPpoIxCcgLbYJ2Yw52rY4Me8ER-6x4UYmQcsTcJOvXczuGOJWYCNgRBG7l9nHR8OCYBFZUPNMhLyeaigTa3PC5F299TE3plz533AAOw/s127/background+noimg.png";
</script>
<script type="text/javascript" src="http://template-defandaky.googlecode.com/files/index-home-list.js"></script>