Cara Memasang Daftar Isi Ala Iumari Blog

Cara Memasang Daftar Isi Ala Iumari Blog - Daftar isi atau sering disebut Sitemap blogger ini merupakan halaman yang dibuat untuk memudahkan para pengunjung blog melihat seluruh konten atau artikel yang telah dipublikasikan. Sedangkan sitemap.xml merupakan jalur sebuah website untuk memberikan informasi kepada search engine atau mesin pencari bahwa semua page atau halaman pada website tersebut aktif, begitu juga memberitahukan manakah link yang lebih diutamakan. dan memberitahu search engine ketika kita melakukan update pada halaman atau postingan pada website kita.


Dampaknnya untuk SEO adalah untuk mempermudah Search Engine melakukan perayapan dan mengindex webiste kita. Namun disini saya tidak akan membahas panjang lebar tentang sitemap ini, saya hanya akan memberikan tutorial tentang cara membuat daftar isi otomatis blogger seperti yang ada di blog ini. Untuk demonya silakan liat pada link dibawah ini :

Cara memasang daftar isi blog seperti yang ada di blog ini


1. Masuk ke halaman statis dalam mode HTML

2. Kemudian masukkan kode dibawah ini :

<style scoped="" type="text/css">
#head-tab{background:#87D37C;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#tabbed-toc{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #87D37C}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:30%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#333;color:#fff}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;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:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#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:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#tabbed-toc{border:1px solid #ccc}
#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:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#87D37C;color:#fafafa}
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<div id="head-tab">
DAFTAR ISI IUMARI BLOG</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
blogUrl: "http://blog.iumari.com", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " <em style='color:#F2784B;'>New</em>" // HTML for the "New!" text
};
</script>
<script async="async" src="https://cdn.rawgit.com/Indzign/theme/master/daftar-isi-indzign.js"></script>

3. Kemudian klik publikasikan

Keterangan:

Ganti tulisan yang ditandai dengan url anda, daftar isi ini juga sudah saya buat responsive dan mendukung semua tampilan browser.


Demikian tutorial memasang daftar isi blogger semoga bermanfaat dan membantu.

Related Posts

Load comments

Comments