Cara Membuat Daftar Isi Keren Habis Di Postingan

Cara Membuat Daftar Isi Keren Habis Di Postingan - Selamat pagi.. Kali anrhy chipaz akan membagikan tips yang sangat sangat simpel membuatnya tapi fungsinya besar! heheh
sesuai dengan judul bahawa kita akan membuat daftar isi di dalam postingan setelah kemarin saya telah share tentang Cara Simpel Membuat Link Goyang Saat Di Sorot Mouse Di blog.
OK bagi sahabat anrhy yang ingin memasang daftar isi llangsung aja lihat di THP:! hheh

Demonya seperti gambar di bawah ini!


 

1. Seperti biasa masuk ke akun google zobat
2. Masuk ke entri post 
3. Pastekan Skript di bawah ini di HTML (Bukan kompose)
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>

<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://anrhy.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>  

    Nb: 1.  Ganti tulisan yang hijau merah dengan URL blog zobat
          2.   Dan yang berwarna hijau ganti dengan kata sesuai selerah sobat

4. Terakhir simpan!
Na itulah cara membuat daftar isi pada postingan seemoga dapat membantu kawan-kawan yang membutuhkan!
Previous
Next Post »

17 komentar

Click here for komentar
May 3, 2013 at 11:18 PM ×

Saya sudah coba sob, wah keren juga jadinya, makasi ya sudah share postingan bagus.

Balas
avatar
admin
May 3, 2013 at 11:49 PM ×

maksi kunugannya zob,, iyya sama-sama!

Balas
avatar
admin
May 4, 2013 at 7:55 AM ×

wah iya jadi keren sob

Balas
avatar
admin
May 4, 2013 at 9:11 AM ×

makasi kunjugannya zob!

Balas
avatar
admin
May 6, 2013 at 5:49 AM ×

boleh jga nich mas..dari preview gambarnya kyaknya bagus. Saya simpen dulu scriptnya,

Balas
avatar
admin
May 6, 2013 at 10:08 AM ×

maksi kunjugannya zob!

Balas
avatar
admin
May 8, 2013 at 3:00 AM ×

Keren mas dalam rangka kunjungan balik...
http://informasibloger.blogspot.com

Balas
avatar
admin
May 12, 2013 at 7:39 AM ×

weis keren gan.. ijin pasang diblog ane gan..

Balas
avatar
admin
May 12, 2013 at 5:39 PM ×

maksi gan atas kunjungannya! silakan gan...

Balas
avatar
admin
March 18, 2014 at 3:24 AM ×

daftar isinya itu berdasarkan label, klo labelnya dipilih sendiri bisa gak..

Balas
avatar
admin
February 10, 2016 at 12:51 PM ×

mantap banget gan
terima kasih untuk berbagi info gan
semoga terus berkaya ya gan dan update terus....
thumbs up 4

Balas
avatar
admin
April 7, 2016 at 8:12 AM ×

Selamat Datang Di TWINPOKER88
Dan dapat kan bonus yang terbaru dan menarik hanya ada disini AGEN POKER ONLINE

Balas
avatar
admin
May 1, 2016 at 9:43 PM ×

aduh pusing liat kode2 itu mas :D

Balas
avatar
admin
August 23, 2016 at 1:05 AM ×

sangat bermanfaat makasih untuk sharing nya

Balas
avatar
admin
October 29, 2016 at 10:04 AM ×

Artikel yang menarik, kunjungi balik blog kami ya :)

http://clayton88.blogspot.com | http://kagumiterus.blogspot.com/ |
http://informasiberitatop.blogspot.com | http://www.layardewasa.top | http://pkcinema.com | http://bit.ly/1sAwovI | http://bit.ly/1sUU8dl | http://bit.ly/1ZIdBJv | http://bit.ly/1YjeNnK | http://bit.ly/1WKgJqp | http://bit.ly/1ZIehP9 | http://bit.ly/1sAwovI | http://bit.ly/1UobCKp | http://bit.ly/1S0ZSYr | http://bit.ly/1ZIehP9 | http://bit.ly/1UL7Ia5 | http://bit.ly/1WKgJqp | http://bit.ly/1YjeNnK |

Balas
avatar
admin

Terima telah berkunjung dan meniggalkan komentar di blog sederhana ini..!

NB :
1. Jangan berkomentar SPAM
2. Jangan meninggalakan LINK aktif karna otomatis akan terhapus.
Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon

Thanks for your comment
Widget by