Daftar ini sangat diharapkan dalam navigasi sebuah web, sebab dengan adanya daftar isi sanggup memudahkan pengunjung menjelajahi setiap artikel kita tanpa tersesat dan menyulitkan pengunjung.
Selain itu, daftar isi pula menjadi salah satu elemen terpenting dalam optimasi SEO Off Page, yang kalau di pasang dalam blog bos kuh, sanggup meningkatkan ranking blog bos kuh dimata search engine Google. Dan tentunya hal tersebut sanggup menarik banyak User experience atau pengunjung ke dalam web site bos kuh.
Navigasi yang baik, dan benar, juga tampilan yang menarik selain sanggup akrab dengan search engine, juga sanggup menciptakan pengunjung betah berlama-lama di dalam blog bos kuh, apalagi kalau artikelnya sudah lebih dari 100 buah. Waw, sanggup di bayangkan berapa banyak pengunjung yang dapat. Diperkirakan sanggup mencapai 500 per hari.
Baiklah bos kuh, di bawah ini telah aku sedikan 10 tampilan daftar isi yang keren-keren dan juga responsive abis. Tapi sebelumnya, kita tutorial dulu cara memasang daftar isi ke blog kita.
1. Klik Halaman
2. Pilih Halaman Baru
3. Alihkan dari mode Compose ke HTML
4. Pastekan instruksi sitemap dibawah </div>
5. Ubah Url yang telah aku beri warna BIRU dengan URL bos kuh
6. Pada sidebar sebelah kiri ada "Setelan Halaman -> Komentar Pembaca -> Centang Jangan Izinkan
7. Langsung simpan
Sekarang kita masuk pada daftar 10 model sitemap paling keren dan responsive:
#1. Tanpa Scroll
1. Tampilan Daftar Isi Pertama
<style type="text/css"> #tabbed-toc { margin:0 auto; background-color:#50b7dc; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; -moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; overflow:hidden; position:relative; color:#fff; border: 1px solid #2aa4cf; } #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-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; height:28px; overflow:hidden; text-overflow:ellipsis; color:#fff; text-transform:uppercase; text-decoration:none; padding:2px 12px; cursor:pointer; padding-top: 10px; } #tabbed-toc .toc-tabs li a:hover { background-color:#2aa4cf; color:#fff; } #tabbed-toc .toc-tabs li a.active-tab { background-color:#2aa4cf; color:white; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; -moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; 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 #2aa4cf; -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: rgba(0,0,0,0.3) 0px 2px 2px -1px; -moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px; } #tabbed-toc .panel { position:relative; z-index:5; font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 11px; } #tabbed-toc .panel li a { display:block; position:relative; font-weight:700; font-size:11px; color:#222; 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:#222; float:right; } #tabbed-toc .panel li .summary { display:block; padding:10px 12px 10px; font-style:italic; border-bottom:4px solid #2aa4cf; 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:#50b7dc; } #tabbed-toc .panel li:nth-child(even) { background-color:#EAEAEA; } #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:#2aa4cf; color:#fff; outline:none; } #tabbed-toc .panel li.bold a:hover, #tabbed-toc .panel li.bold a:hover time { background-color:#2aa4cf; } @media (max-width:700px) { #tabbed-toc { border:2px solid #2aa4cf; } #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:#2aa4cf; -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> <div id="tabbed-toc"> <span class="loading">Loading...</span></div> <a href="aciknadzirah.blogspot.com/search?q=" style="display: block; font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 11px; font-weight: 700; margin: 9px; text-align: right; text-decoration: none;" title="Membuat Daftar Isi Keren ke Blog Dengan Dan Tanpa Scroll (10 Model Daftar Isi)">Get widget</a> <script type="text/j4vascript"> var tabbedTOC = { blogUrl: "http://vivologis.blogspot.com", containerId: "tabbed-toc", activeTab: 1, showDates: false, showSummaries: false, numChars: 200, showThumbnails: false, 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-d0wnl0ad.googlecode.com/svn/trunk/tabbed-toc.js" type="text/j4vascript"></script> 2. Tampilan Daftar Isi Kedua
<style type="text/css"> #toc{ width:99%; margin:5px auto; border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); } .labl{ color:#FF5F00; font-weight:bold; margin:0 -5px; padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE)); border:1px solid #2D96DF; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block; } .labl a{ color:#fff; } .labl:first-letter{t ext-transform:uppercase; } .new{ color:#FF5F00; font-weight:bold; font-style:italic; } .postname{ font-weight:normal; background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE)); } .postname li{ border-bottom: #ddd 1px dotted; margin-right:5px } </style> <div id="toc"> <script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/j4vascript"></script> <script src="http://Belajarseokompleks.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> 3. Tampilan Daftar Isi Ketiga
style type="text/css"> #toc{ width:99%; margin:5px auto; border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); } .labl{ color:#FF5F00; font-weight:bold; margin:0 -5px; padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE)); border:1px solid #2D96DF; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block; } .labl a{ color:#fff; } .labl:first-letter{t ext-transform:uppercase; } .new{ color:#FF5F00; font-weight:bold; font-style:italic; } .postname{ font-weight:normal; background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE)); } .postname li{ border-bottom: #ddd 1px dotted; margin-right:5px } </style> <div id="toc"> <script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/j4vascript"></script> <script src="aciknadzirah.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> 4. Tampilan Daftar Isi Keempat
<div id="tabbed-toc"> <span class="loading">Loading, please wait for a moment...</span></div> <script type="text/j4vascript"> var tabbedTOC = { blogUrl: "aciknadzirah.blogspot.com", // Enter your 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 showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Default thumbnail size noThumb: "", // A "no thumbnail" URL monthNames: [ // Array of month names "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], newTabLink: true, // Open link in new window. `false` to open in same 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 by changing the number newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for //the "New!" text }; </script> <script src="https://rawgit.com/susantokun/blogger/master/sitemaptabbed.js" type="text/j4vascript"></script> <style> /*Sitemap */ #tabbed-toc { width: 99%; margin: 0 auto; overflow: hidden !important; position: relative; color: #222; border: 0; border-top: 5px solid #007ABE; background-color: #fff; -webkit-transition: all 0.4s ease-in-out; } #tabbed-toc .loading { display:block; padding:5px 15px; font:normal bold 11px Arial,Sans-Serif; color:#FFF; } #tabbed-toc ul, #tabbed-toc ol, #tabbed-toc li { margin:0; padding:0; list-style:none; } #tabbed-toc .toc-tabs { width: 24.8%; float: left !important; } #tabbed-toc .toc-tabs li a { display:block; font:normal bold 10px/28px Arial,Sans-Serif; height:28px; overflow:hidden; text-overflow:ellipsis; color:#007ABE; text-transform:uppercase; text-decoration:none; padding:0 12px; cursor:pointer; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .toc-tabs li a:hover { background-color: #515050; color: #FFF; } #tabbed-toc .toc-tabs li a.active-tab { background-color: #007ABE; color: #fff; position: relative; z-index: 5; margin: 0 -2px 0 0; } #tabbed-toc .toc-content, #tabbed-toc .divider-layer { width: 75%; float: right !important; background-color: #F5F5F5; border-left: 5px solid #007ABE; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-in-out; } #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 Arial,Sans-Serif; } #tabbed-toc .panel li a { display: block; position: relative; font-weight: bold; font-size: 11px; color: #222; line-height: 2.8em; height: 30px; padding: 0 10px; text-decoration: none; outline: none; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .panel li time { display:block; font-style:italic; font-weight:400; font-size:10px; color:#666; float:right; } #tabbed-toc .panel li .summary { display:block; padding:10px 12px; 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; width:72px; height:72px; border:1px solid #dcdcdc; background-color:#fafafa; } #tabbed-toc .panel li:nth-child(even) { background-color: #DBDBDB; font-size: 10px; } #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:#222; color:#FFF; outline:none; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .panel li.bold a:hover, #tabbed-toc .panel li.bold a:hover time { background-color:#222; } @media (max-width:700px) { #tabbed-toc { background-color:#fff; border:0 solid #888; } #tabbed-toc .toc-tabs, #tabbed-toc .toc-content { overflow:hidden; width:auto; float:none !important; display:block; } #tabbed-toc .toc-tabs li { display:inline; float:left !important; } #tabbed-toc .toc-tabs li a, #tabbed-toc .toc-tabs li a.active-tab { background-color:#222; color:#ccc; } #tabbed-toc .toc-tabs li a.active-tab { color:#000; } #tabbed-toc .toc-content { border:none; } #tabbed-toc .divider-layer, #tabbed-toc .panel li time { display:none; } } </style> 5. Tampilan Sitemap Kelima
<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> <div id="tabbed-toc"> <span class="loading">Loading...</span></div> <a href="aciknadzirah.blogspot.com" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="Membuat Daftar Isi Keren ke Blog Dengan Dan Tanpa Scroll (10 Model Daftar Isi)">arsip</a> <script type="text/j4vascript"> var tabbedTOC = { blogUrl: "http://ngeblog07.blogspot.com", containerId: "tabbed-toc", activeTab: 1, showDates: false, showSummaries: false, numChars: 200, showThumbnails: false, 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-d0wnl0ad.googlecode.com/svn/trunk/tabbed-toc.js" type="text/j4vascript"></script> Nah, itulah 5 Daftar Isi keren yang sanggup menghiasi blog bos kuh dengan navigasi yang baik. Jika pada tampilan daftar di atas tanpa scroll, tapi kumpulan daftar isi di bawah ini akan mempunyai tampilan scroll. Berikut ini aku pilihkan kumpulan daftar ini berscroll yang aku pilihkan untuk bos kuh.
#2. Daftar Isi Dengan Scroll
6. Tampilan Daftar Isi Keenam (dengan Scroll)
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="aciknadzirah.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script></div> 7. Tampilan Daftar Isi Ketujuh (dengan Scroll)
<div style="background: #f2f2f2; width: 320px; color: #000; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; border:4px double #ccc; -moz-box-shadow: inset 2px 2px 2px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040"> <div id="cl_option"> Harap tunggu sebentar... </div> <div id="cl_content_list"> </div> <script type="text/j4vascript"> var jumlah_kata_dalam_ringkasan =200; </script> <script type="text/j4vascript" src="https://sites.google.com/site/bloggerbugisdotkom/j4vascript/Dafatar_isi_Biasa_Bloggerbugis.js"> </script> <script type="text/j4vascript" src="http://www.belajarseokompleks.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script> <div style="float:right;font:normal 10px verdana; color:#ccc;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px #000"> Widget by <a href="http://www.bloggerbugis.com">Blogger Bugis</a></div> </div> Catatan: Teks berwarna merah, silahkan bos kuh isi sendiri kata-katanya sesuai dengan yang bos kuh inginkan.
8. Tampilan Daftar Isi Kedelapan (dengan scroll)
<style type="text/css"> .daftar_posting{list-style:none;margin-left:-40px;font-family:Droid Serif;font-size:11px;color:lime;text-align:left;} .daftar_posting a{color:yellow;border-top:1px dotted blue;border-bottom:1px dotted blue;background:transparent url(image.1) no-repeat 0 50%;padding-left:15px;} .daftar_posting a:hover{color:red;} </style> <div style="margin:2px; padding:4px;border:2px solid #888;background:#333;"> <div style="border:2px solid #444;overflow:auto;padding:4px;background:#111;height:250px;"> <div style="width:500px;"> <script style="text/j4vascript"> var numposts = 1000; var showpostsummary = false; var standardstyling = true; function showrecentposts(json) {document.write('<ol class="daftar_posting">'); for (var i = 0; i < numposts; i++) { document.write('<li>'); var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break;}} posttitle = posttitle.link(posturl); if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (!standardstyling) document.write('<div class="bbrecpost">'); if (standardstyling) document.write(posttitle); if (!standardstyling) document.write('</div><div class="bbrecpostsum"">'); if (showpostsummary == true) { if (standardstyling) document.write('<br/>'); if (postcontent.length < numchars) { if (standardstyling) document.write('<i>'); document.write(postcontent); if (standardstyling) document.write('</i>');} else { if (standardstyling) document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); if (standardstyling) document.write('</i>');}} if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>'); document.write('</li>');} document.write('</ol>'); if (!standardstyling) document.write('<div class="bbwidgetfooter">'); if (standardstyling) document.write('<br/>');} </script> <script src="http//belajarseokomplek.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script> </div> </div></div> 9. Tampilan Daftar Isi ke Sembilan (dengan scroll)
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="aciknadzirah.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script></div> 10. Tampilan Daftar isi Kesepulan (Komplit)
Nah, kalau berdasarkan aku daftar isi sangat komplit dan sangat di rekomendasikan banget untuk bos kuh. Diantara keutamaan sitemap ini yaitu, sangat responsive, ringan, dan juga disertai tanggal terbit artikel.
<span style="background-color: white; border: 0px; font-family: "arial" , "times new roman" , "times" , serif; font-size: 14px; font-stretch: inherit; line-height: 19.6px; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">. </span></span></span>Berikut ialah daftar isi dari blog ini:<br /><div id="bp_toc" style="max-height: 1300px; overflow-x: auto; overflow: scroll;"></div><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/j4vascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/j4vascript"></script><hr /> Itulah bos kuh, 10 tampilan daftar isi keren-keren yang tanpa scroll dan juga yang menggunakan scroll. Oke, tampaknya tutorial ini hingga disini dulu. Sampai bertemu lagi di tutorial yang lainnya.