Cara Membuat Daftar Isi Keren

Riefkah - Kali ini saya akn posting tentang Cara Membuat Sitemap . Berbeda dari cara membuat sitemap keren kali ini saya akan memberikan tutorial tentang sitemap yang juga keren tetapi juga memiliki fast load atau loading yang cepat sehingga visitor yang ingin melihat postingan-postingan kita tidak bosen untuk menunggu loading yang sangat lama..

Selain itu salah satu yang menjadi keunggulannya adalah postingan yang dibuka otomatis terbuka di tab baru sehingga pengunjung yang ingin mengunjungi lebih dari satu postingan lebih mudah tanpa harus mengklik "open in new tab" terlebih dahulu, dan tentunya ini membantu kita untuk meningkatkan pageviews dan mengurangi bounce rate di blog kita

CARA PEMASANGAN :

• 1.buka blogger > blog anda
• 2.buka bagian  pos / laman kosong
• 3.lalu buka bagian html (bukan compose )
• 4.pastekan kode berikut

<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://rifkahs.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>

• 5.ubah http://rifkahs.blogspot.com dengan URL blog anda
• 6.pratinjau,jika sudah pas klik simpan

Posted by Unknown on Sunday 11 August 2013 - Rating: 4.5

Title : Cara Membuat Daftar Isi Keren
Description : Riefkah -  Kali   ini  saya akn posting tentang  Cara Membuat Sitemap . Berbeda dari  cara membuat sitemap keren   kali   ini  saya akan...

Tweet