Cara Membuat Daftar Isi Tabulasi Keren di Blogger - Daftar isi atau sitemap di sebuah blog kadang sering kita lewatkan dan terlupakan oleh kita sendiri, padahal hal ini wajib kita pasang di blog kita biar pengunjung lebih gampang mengetahui konten apa saja yang ada pada situs kita. Sehingga menawarkan akomodasi kepada visitor untuk menelusuri setiap konten yang ada pada blog Anda dengan begitu kita sanggup meningkatkan jumlah tanyangan blog Anda.
Widget daftar isi ini terdiri dari 2 kolom adalah bab kiri untuk daftar label atau sesuai dengan kategori dan bab sebelah kanan merupakan judul setiap konten yang ada pada blog Anda. Setiap kategori atau label akan menjadi tab sehingga jikalau Anda klik setiap kategori atau label maka akan muncul semua postingan yang berkaitan dengan kategori tersebut dan ini akan otomatis terupdate setiap Anda mempunyai konten yang baru.
Baca Juga : Kumpulan Kode Robots.txt SEO Friendly untuk Blogger
Dengan desainnya yang keren aku yakin setiap pengunjung yang melihat daftar isi situs Anda akan sangat betah dan akan merasa nyaman untuk mencari setiap konten yang ingin di bacanya. Kode script yang dipakai telah di optimalkan menjadi valid html5 dan css3 sehingga akan lebih seo friendly jikalau memakai peta situs atau daftar isi ini dibandingkan yang lain.
Langsung saja untuk Anda yang ingin mencoba memakai daftar isi tabulasi ini silahkan ikuti langkan pemasangannya dibawah ini :
1. Masuk ke Blogger.com
2. Klik pada bab Halaman
3. Silahkan buat halaman gres atau mengedit yang sudah ada sebelumnya
4. Setelah itu klik pada bab HTML bukan Compose
5. Copy paste instruksi script dibawah ini
<style> /* Skin for Blogger Tabbed Layout TOC */ #tabbed-toc { margin:0 auto; background-color:#2279A2; -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:#333; } #tabbed-toc .loading { display:block; padding:5px 10px; font:normal bold 10px/normal Helmet,Freesans,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 Helmet,Freesans,Sans-Serif; height:28px; overflow:hidden; text-overflow:ellipsis; color:#ccc; text-transform:uppercase; text-decoration:none; padding:0 12px; cursor:pointer; } #tabbed-toc .toc-tabs li a:hover { background-color:#0D364B; color:white; } #tabbed-toc .toc-tabs li a.active-tab { background-color:#1F91C7; 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 #1F91C7; -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/normal Helmet,Freesans,Sans-Serif; } #tabbed-toc .panel li a { display:block; position:relative; font-weight:bold; font-size:11px; color:#083146; 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 #1F91C7; 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:#EDF9FF; } #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:#333; color:white; 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:#2279A2; -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">Memuat...</span></div> <script> var tabbedTOC = { blogUrl: "aciknadzirah.blogspot.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 showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Thumbnail size noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL monthNames: [ // Array of month names "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], 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:red;'>New !</em>" // HTML for the "New !" text }; </script> <script type="text/j4vascript"> var tabbedTOC_defaults = { blogUrl: "aciknadzirah.blogspot.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 showThumbnails: false, // true to show the posts thumbnails (Not recommended) thumbSize: 40, // Thumbnail size noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // No thumbnail URL monthNames: [ // Array of month names "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], newTabLink: true, // Open link in new window? maxResults: 99999, // Maximum posts result preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by date showNew: false, // `false` to hide the "New !" mark in most recent posts, or define how many recent posts are to be marked newText: " - <em style='color:red;'>Baru !</em>" // HTML for the "New !" text }; for (var i in tabbedTOC_defaults) { tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[i]; } function clickTab(pos) { var a = document.getElementById(tabbedTOC_defaults.containerId), b = a.getElementsByTagName('ol'), c = a.getElementsByTagName('ul')[0], d = c.getElementsByTagName('a'); for (var t = 0; t < b.length; t++) { b[t].style.display = "none"; b[parseInt(pos, 10)].style.display = "block"; } for (var u = 0; u < d.length; u++) { d[u].className = ""; d[parseInt(pos, 10)].className = "active-tab"; } } function showTabs(json) { var total = parseInt(json.feed.openSearch$totalResults.$t,10), c = tabbedTOC_defaults, entry = json.feed.entry, category = json.feed.category, skeleton = "", newPosts = []; for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) { if (g == entry.length) break; entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText : ''); } entry = c.sortAlphabetically ? entry.sort(function(a,b) { return (a.title.$t.localeCompare(b.title.$t)); }) : entry; category = c.sortAlphabetically ? category.sort(function(a,b) { return (a.term.localeCompare(b.term)); }) : category; // Build the tabs skeleton skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">'; for (var h = 0, cen = category.length; h < cen; h++) { skeleton += '<li class="toc-tab-item-' + h + '"><a href="j4vascript:clickTab(' + h + ');" title="√ Cara Membuat Daftar Isi Tabulasi Keren di Blogger">' + category[h].term + '</a></li>'; } skeleton += '</ul>'; // Bulid the tabs contents skeleton skeleton += '<div class="toc-content">'; for (var i = 0, cnt = category.length; i < cnt; i++) { skeleton += '<ol class="panel" data-category="' + category[i].term + '"'; skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : ''; skeleton += '>'; for (var j = 0; j < total; j++) { if (j == entry.length) break; var link, entries = entry[j], pub = entries.published.$t, // Get the post date month = c.monthNames, // Month array from the configuration title = entries.title.$t, // Get the post title summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,c.numChars) + '…' : '', // Get the post summary img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="Cara Membuat Daftar Isi Tabulasi Keren di Blogger √ Cara Membuat Daftar Isi Tabulasi Keren di Blogger" src="' + entries.media$thumbnail.url.replace(//s72(-c)?//,"/s"+c.thumbSize+"-c/") + '"/>' : '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="Cara Membuat Daftar Isi Tabulasi Keren di Blogger √ Cara Membuat Daftar Isi Tabulasi Keren di Blogger" src="' + c.noThumb.replace(//s72(-c)?//,"/s"+c.thumbSize+"-c/") + '"/>', // Get the post thumbnail cat = (entries.category) ? entries.category : [], // Post categories date = (c.showDates) ? '<time datetime="' + pub + '" title="√ Cara Membuat Daftar Isi Tabulasi Keren di Blogger">' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date for (var k = 0; k < entries.link.length; k++) { if (entries.link[k].rel == 'alternate') { link = entries.link[k].href; // Get the post URL break; } } for (var l = 0, check = cat.length; l < check; l++) { var sasaran = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window? // Write the list skeleton only if at least one of the post... // ... has the same category term with one of the current categories term list if (cat[l].term == category[i].term) { skeleton += '<li title="√ Cara Membuat Daftar Isi Tabulasi Keren di Blogger"'; skeleton += (c.showSummaries) ? ' class="bold"' : ''; skeleton += '><a href="' + link + '"' + sasaran + ' title="√ Cara Membuat Daftar Isi Tabulasi Keren di Blogger">' + title + date + '</a>'; skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:block;clear:both;"></span></span>' : ''; skeleton += '</li>'; } } } skeleton += '</ol>'; } skeleton += '</div>'; skeleton += '<div style="clear:both;"></div>'; document.getElementById(c.containerId).innerHTML = skeleton; clickTab(c.activeTab-1); } (function() { var h = document.getElementsByTagName('head')[0], s = document.createElement('script'); s.type = 'text/j4vascript'; s.src = tabbedTOC_defaults.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC_defaults.maxResults + '&orderby=published&callback=showTabs'; if (tabbedTOC_defaults.preload !== "onload") { setTimeout(function() { h.appendChild(s); }, tabbedTOC_defaults.preload); } else { window.onload = function() { h.appendChild(s); }; } })(); </script>6. Ganti aciknadzirah.blogspot.com dengan URL blog Anda
7. Klik Publikasikan Sumber http://www.caramanual.com