Manusia pendosa yang berusaha menjadi firqah najiyah dan jika ditanya Man Rabbuka, bisa jawab Allahu Rabbi.

My Label Post

Home » Blogging » Postingan » Widget » Membuat Daftar Isi Keren Beda Dari Yang Lain Pada Blog

Membuat Daftar Isi Keren Beda Dari Yang Lain Pada Blog

, ,
Cetak Sunting
Daftar Isi Keren Beda Dari Yang Lain
Demo

Integrasikan widget ke bog

cara membuat widget daftar isi ini, ikuti langkah-langkah berikut :
pertama-tama pilih laman di sidebar. Kemudian, pada Laman pilih laman baru :

Menambahkan Laman Statis Baru
Salin kode di bawah ini kemudial letakan di laman baru yang agan tadi buat dalam formulir HTMLnya:

 <style type="text/css">
#resultDesc {
  margin:0;
  padding:0 0;
  color:#999;
  font-weight:bold;
}
#resultDesc span {
  margin:0 auto;
  padding:5px 10px 7px;
  color:#D64D52;
}
#feedNav,#feedNav:hover {
  margin:0 auto;
  height:34px;
  line-height:34px;
  text-align:center;
  color:#fff;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#3c3c3c;
  border-top:1px solid #444;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#feedNav a,#feedNav span {
  color:#999;
  padding:0;
  text-decoration:none;
}
#feedNav:hover {
  color:white;
  background-color:#444;
}
#feedNav:active {background-color:#527915;}
#feedNav span {cursor:wait;}
#table-outer {
  height:30px;
  text-align:center;
  padding:0;
  margin:15px 20px 0;
}
#table-outer #orderFeedBy {float:left;}
#table-outer #postSearcher {float:right;}
#table-outer input {
  display:inline-block;
  vertical-align:right;
  margin:0 2px 0 0;
  padding:0 0;
}
#table-outer select[disabled] {opacity:.4;}
#postSearcher input,#table-outer select {
  width:33%;
  background-color:#111;
  border:none;
  padding:5px 5px;
  font:normal normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
}
#postSearcher {
  width:33%;
  padding:0;
}
#postSearcher input {
  width:96%;
  padding:5px 5px;
}
#postSearcher input:focus,#table-outer select:focus {background-color:#090909;}
#tabbed-toc {
  width:100%;
  margin:5px auto 0;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc #labelSorteres {
  width:20%;
  float:left;
  margin:0 auto;
}
#tabbed-toc #labelSorter ul {
  position:relative;
  margin-top:-36px;
  background-color:#333;
}
#tabbed-toc #labelSorter li a,#tabbed-toc #labelSorteres #loadCat li a {
  display:block;
  font:bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:34px;
  line-height:34px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#CCC;
  border-top:1px solid #444;
  border-left:1px solid #444;
  border-bottom:1px solid #222;
  border-right:1px solid #222;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0;
  cursor:pointer;
}
#tabbed-toc #labelSorteres #loadCat .allowed,#tabbed-toc #labelSorter .allowed {cursor:not-allowed;}
#tabbed-toc #labelSorter li a:hover {
  outline:none;
  background-color:#3c3c3c;
  color:white;
}
#tabbed-toc #labelSorter li a.active-tab {
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  outline:none;
  z-index:1;
  padding:0 10px;
  margin:0;
  background-color:#3c3c3c;
}
#tabbed-toc #labelSorter li a.active-tab:hover {cursor:not-allowed;}
#tabbed-toc #labelSorter .disabled,#tabbed-toc #labelSorter .disablet {display:none;}
#tabbed-toc .feedline {
  width:80%;
  float:right;
  text-align:left;
  margin:0 auto;
  padding:0;
  background-color:#333;
  border-bottom:1px solid #222;
}
#tabbed-toc #feedContainer {background-color:#333;}
#tabbed-toc #feedContainer li {
  float:left;
  width:100%;
  margin:0 auto;
  list-style:none;
  background-color:#333;
  font:10px Helmet,Freesans,Sans-Serif;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li.bold {width:50%;}
#tabbed-toc #feedContainer li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc #feedContainer li a.item-title {
  display:block;
  position:relative;
  font-weight:normal;
  font-size:13px;
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  height:34px;
  line-height:34px;
  padding:0 12px;
  text-transform:uppercase;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc #feedContainer li a.item-title:hover,#tabbed-toc #feedContainer li a.item-title:focus {
  color:#999;
  outline:none;
  border-left:4px solid #066696;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  color:#ccc;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
}
#tabbed-toc #feedContainer li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #3c3c3c;
  background-color:#292929;
}
#tabbed-toc #feedContainer li .itemfoot {
  clear:both;
  height:34px;
  line-height:34px;
  padding:0 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore {
  float:right;
  font-weight:bold;
  color:#3B5998;
  text-decoration:none;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}
</style>
<div id="table-outer">
    <select id="orderFeedBy">
        <option value="published" selected>POSTING TERBARU</option>
        <option value="updated">POSTING DIPERBAHARUI</option>
    </select><span id="resultDesc"></span>
    <form id="postSearcher">
        <input type="text" id="feed-q-box" value="" autocomplete="off" onkeyup="resetField();" />
    </form>
</div>
<div id="tabbed-toc"><span id="labelSorteres"><div id="loadCat"></div><div id="labelSorter"><li class="toc-tab-item"><a class="allowed" href="javascript:changeSort(0);">SEDANG MEMUAT LABEL...</a></li></div></span>
    <div class="feedline">
        <ul id="feedContainer"></ul>
        <div id="feedNav"></div>
    </div>
</div>
<script type="text/javascript">
var tocConfig = {
    url: "http://nama_blog.blogspot.com", // Ganti nilainya menjadi URL blog anda
    feedNum: 12, // Jumlah posting yang tampil
    numChars: 100, // Jumlah ringkasan posting
    thumbWidth: 40, // Ukuran thumbnail posting
    newTabLink: true, // Membuka link pada tab baru
    showDates: true, // Menampilkan tanggal publis
    labelName: false, // Menentukan label yang akan di tampilkan
    showSummaries: true, // Menampilkan ringkasan posting
    showThumbnails: true, // Menampilkan thumbnail posting
    navText: "Berikutnya &#9660;", // Memuat artikel lainnya
    frontText: "Kembali ke Awal &uArr;", // Artikel sudah mencapai batas
    moreText: "Selengkapnya &#9658;", // Readmore atau baca selengkapnya
    loading: "<span>Memuat Content...</span>", // Sedang memuat content
    searching: "<span>Mencari...</span>", // Sedang mencari content
    noResult: "Tak Ditemukan", // Content tidak di temukan
    loadCat: "Sedang Memuat Label...", // Memuat label
    resetCat: "Reset Ulang Category...", // Reset label
    noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
    monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};
</script>
<script src="http://googledrive.com/host/0ByvRD4GA_N9IdHoxQzZUZW5idWs/js-daftarisi-blog-zonayahya.js"></script>

Pengaturan

OpsiNilaiKeterangan
urlhttp://nama_blog.blogspot.comGanti nilainya menjadi url blog anda.
feedNum12Ganti nilainya menjadi, misal 40 jika Anda ingin menampilkan jumlah artikel lebih dari 12.
numChars100Digunakan untuk menentukan jumlah potongan snippet posting.
thumbWidth40Digunakan untuk menentukan ukuran besar kecil thumbnail/gambar posting.
newTabLinktrueJika bernilai true maka link akan terbuka pada tab baru begitupun sebaliknya jika bernilai false maka link tersebut akan termuat pada tab yang sama.
false
showDatestrueJika bernilai true maka tanggal penerbitan posting akan di tampilkan begitupun juga sebaliknya jika bernilai false maka tanggal penerbitan posting tidak akan di tampilkan.
false
labelNamefalseJika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika anda ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label anda, misal Code Snippet
Nama label
showSummariestrueJika bernilai true maka numCharsatau jumlah potongan snippet posting akan ditampilkan begitupun juga sebaliknya jika bernilai falsemaka numChars atau jumlah potongan snippet posting tidak akan di tampilkan.
false
showThumbnailstrueJika bernilai true maka thumbWidthatau thumbnail/gambar posting akan ditampilkan begitupun juga sebaliknya jika bernilai false makathumbWidth atau thumbnail/gambar posting tidak akan di tampilkan, ini berkaitan dengan showSummariesnilainya harus sama.
false
navTextBerikutnyaDigunakan untuk memanggil posting berikutnya.
frontTextKembali ke Awal ⇑Digunakan untuk memberitahukan jika post uda mencapai batas.
moreTextSelengkapnya ►Digunakan untuk text read more atau baca selengkapnya pada widget ini. Opsi ini akan muncul jika, OpsishowSummaries bernilai true
loadingMemuat Content...Sedang memuat content
searchingMencari...Sedang mencari content
noResultTak DitemukanContent tidak di temukan
loadCatReset Ulang Category...Mereset ulang label
noImagedata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==Digunakan untuk menggantikan posting yang tidak memiliki gambar.
monthNames["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"]Nama nama bulan saat posting di publish atau di terbitkan Opsi ini muncul bila Opsi showSummariesbernilai false
thumbnail
Judul:Membuat Daftar Isi K
semoga bermanfaat. :D

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Facebook Google+ Twitter RSS

Silahkan berkomentar sesuai dengan topik artikel di atas, komentar yang menyertakan link, iklan, spam, dan sejenisnya akan di hapus.

Assalamu'alaikum wr.wb

Nama Saya Yahya Suteja . Saya hanya seorang pendosa yang berusaha menjadi firqah najiyah dan jika ditanya Man Rabbuka, bisa jawab Allahu Rabbi.
dan saya hanya seseorang cuma bisa mengaji di ajikan sholat dan disholatkan.

Menghindari zinah
1. Ta'aruf
2. Khitbah
3. Akad
Itulah tips saya buat kalian yang ingin mendapatkan seseorang yang kamu sayang seumur hidup.
Cukup sekian dari saya, mohon ma'af jika ada salah-salah kata.

Wassalamu'alaikum wr.wb

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!
-->