Cara Gampang Menciptakan Daftar Isi (Sitemap) Di Blog
Cara Praktis Membuat Daftar Isi (Sitemap) di blog - Daftar Isi yaitu daftar artikel dalam suatu blog atau website dengan memperlihatkan daftar link artikel yang ada pada blog kita. Layaknya menyerupai sebuah buku yang memperlihatkan daftar-daftar yang ada dalam suatu blog tersebut, atau merupakan daerah memberi gosip ihwal judul-judul apa saja salam artikel kita.
Membuat daftar isi atau peta situs dalam blog kita sanggup memperlihatkan manfaat bagi pembaca atau pengunjung untuk mencari apa saja yang diperlukan pengunjung tersebut. Daftar isi pada suatu blog juga merupakan suatu halaman yang harus ada di dalam sebuah blog dan tergolong penting semoga blog atau website kita terlihat lebih lengkap dan profesional.
Menurut para mahir menciptakan sitemap pada blog juga merupakan suatu bentuk SEO, alasannya yaitu dalam sitemap terdapat banyak sekali link dalam blog kita sehingga dengan gampang di telusuri baik itu pada mesin pencari maupun pengunjung blog atau website kita. Bayangkan saja kalau blog kita tidak mempunyai daftar isi, tentunya akan menciptakan para pembaca kesulitan untuk menemukan gosip yang ingin dicari maka pembaca tersebut tidak mau lagi berkunjung ke blog kita walaupun ada fitur menyerupai artikel terbaru dan terpopuler tapi terlihat kurang lengkap tanpa adanya daftar isi atau sitemap di blog kita.
Berikut aku akan membagikan tutorial cara memasang daftar isi di blog secara otomatis, aku menyebutnya otomatis alasannya yaitu dalam setiap postingan yang akan di publikasi oleh para blogger akan secara otomatis tersimpan dalam halaman statis blog kita tanpa perlu di tulis secara manual. Bisa juga kita sanggup menciptakan daftar isi secara manual, tetapi akan membutuhkan waktu yang lebih usang lagi dan harus diperbaharui setiap ketika mempublikasikan artikel kita. Oleh alasannya yaitu itu aku akan menciptakan membagikan sitemap secara otomatis dan responsive tentunya.
1. Login terlebih dahulu di blog anda > Pilih Halaman > pilih buat Halaman Baru
2. Tambahkan instruksi ini di dalam sajian HTML (bukan compose)
Setelah itu ganti url www.analisyuki.com/ dengan alamat blog anda. Maka balasannya akan menyerupai ini
Jika anda ingin tampilan yang lebih sederhana dan mudah tanpa banyaknya warna anda sanggup memakai instruksi di bawah ini:
Jangan lupa untuk mengganti url tersebut dengan alamat blog anda
Cukup sekian Tutorial Cara Membuat Daftar Isi (Sitemap) di Blogger dengan tampilan gradient color, kalau ada sesuatu yang ingin ditanyakan silahkan menuju ke kolom komentar, Terimasih. Sumber https://www.analisyuki.com/
Membuat daftar isi atau peta situs dalam blog kita sanggup memperlihatkan manfaat bagi pembaca atau pengunjung untuk mencari apa saja yang diperlukan pengunjung tersebut. Daftar isi pada suatu blog juga merupakan suatu halaman yang harus ada di dalam sebuah blog dan tergolong penting semoga blog atau website kita terlihat lebih lengkap dan profesional.
Menurut para mahir menciptakan sitemap pada blog juga merupakan suatu bentuk SEO, alasannya yaitu dalam sitemap terdapat banyak sekali link dalam blog kita sehingga dengan gampang di telusuri baik itu pada mesin pencari maupun pengunjung blog atau website kita. Bayangkan saja kalau blog kita tidak mempunyai daftar isi, tentunya akan menciptakan para pembaca kesulitan untuk menemukan gosip yang ingin dicari maka pembaca tersebut tidak mau lagi berkunjung ke blog kita walaupun ada fitur menyerupai artikel terbaru dan terpopuler tapi terlihat kurang lengkap tanpa adanya daftar isi atau sitemap di blog kita.
Berikut aku akan membagikan tutorial cara memasang daftar isi di blog secara otomatis, aku menyebutnya otomatis alasannya yaitu dalam setiap postingan yang akan di publikasi oleh para blogger akan secara otomatis tersimpan dalam halaman statis blog kita tanpa perlu di tulis secara manual. Bisa juga kita sanggup menciptakan daftar isi secara manual, tetapi akan membutuhkan waktu yang lebih usang lagi dan harus diperbaharui setiap ketika mempublikasikan artikel kita. Oleh alasannya yaitu itu aku akan menciptakan membagikan sitemap secara otomatis dan responsive tentunya.
Tutorial Cara Membuat Daftar Isi (Sitemap) pada Blog
Berikut aku akan membagikan 2 bentuk sitemap dengan bentuk gradient color dan dalam bentuk tampilan sederhana:1. Login terlebih dahulu di blog anda > Pilih Halaman > pilih buat Halaman Baru
2. Tambahkan instruksi ini di dalam sajian HTML (bukan compose)
<div class="tabbed-toc" id="tabbed-toc"></div> <script> var tabbedTOC={blogUrl:"https://turuninsay.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'}; </script> <script src="https://rawcdn.githack.com/Indzign/InSEO/master/daftarisikeren.js"></script> <style scoped="" type="text/css"> .tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite} .tabbed-toc .loading{display:block;padding:2px 12px;color:#fff} .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none} .tabbed-toc .toc-tabs{width:20%;float:left} .tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s} .tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)} .tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0} .tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box} .tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0} .tabbed-toc .panel{position:relative;z-index:5} .tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden} .tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right} .tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px} .tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa} .tabbed-toc .panel li{background-color:#f9f9f9;margin:0} .tabbed-toc .panel li:nth-child(even){background-color:#fff} .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none} .tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px} .tabbed-toc .panel li:before{display:none} @-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @media (max-width:768px){.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.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}} </style>Setelah itu ganti url www.analisyuki.com/ dengan alamat blog anda. Maka balasannya akan menyerupai ini
Jika anda ingin tampilan yang lebih sederhana dan mudah tanpa banyaknya warna anda sanggup memakai instruksi di bawah ini:
<div class="tabbed-toc" id="tabbed-toc"> <span class="loading">Memuat…</span></div> <script> var tabbedTOC = { blogUrl: "https://turuninsay.blogspot.com", // Blog URL containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: true, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: true, // `true` to show the posts thumbnails (Not recommended) thumbSize: 60, // 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 src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>Jangan lupa untuk mengganti url tersebut dengan alamat blog anda
Cukup sekian Tutorial Cara Membuat Daftar Isi (Sitemap) di Blogger dengan tampilan gradient color, kalau ada sesuatu yang ingin ditanyakan silahkan menuju ke kolom komentar, Terimasih. Sumber https://www.analisyuki.com/