Cara Membuat Daftar Isi (Sitemap) Keren di Blog - Kali ini aku akan membagikan cara menciptakan peta situs/daftar isi responsive pada halaman statis blogger, tentunya dengan tampilan terbaru 2019 yang tidak ketinggalan jaman yang cocok untuk blogger adsense.
Membuat daftar isi atau peta situs dalam blog kita sanggup memperlihatkan manfaat bagi pembaca atau pengunjung untuk mencari apa saja yang diperlukan pengunjung tersebut, yang tentunya berkhasiat sebagai penunjang blog kita diterima oleh AdSense.
Bagi kalian yang bosan dengan tampilan daftar isi yang sederhana dan terlihat membosankan, untuk itu analisyuki.com akan membagikan cara menciptakan daftar isi keren di blogger dengan tampilan pengaruh gradient (pelangi), tetap ringan dan yummy di pandang mata.
Cara Membuat Daftar Isi (Sitemap) Keren di Blogger/Blogspot
1. Login terlebih dahulu di blog anda > Pilih Halaman > pilih buat Halaman Baru
2. Tambahkan aba-aba ini di dalam sajian HTML (bukan compose)
<div class="sitemap-grdnt" id="sitemap-grdnt"></div> <script> var tabbedTOC={blogUrl:"https://www.analisyuki.com/",containerId:"sitemap-grdnt",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.gith4ck.com/Indzign/InSEO/master/daftarisikeren.js"></script> <style scoped="" type="text/css"> .sitemap-grdnt{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite} .sitemap-grdnt .loading{display:block;padding:2px 12px;color:#fff} .sitemap-grdnt ul,.sitemap-grdnt ol,.sitemap-grdnt li{margin:0;padding:0;list-style:none} .sitemap-grdnt .toc-tabs{width:20%;float:left} .sitemap-grdnt .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s} .sitemap-grdnt .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)} .sitemap-grdnt .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0} .sitemap-grdnt .toc-content,.sitemap-grdnt .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box} .sitemap-grdnt .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0} .sitemap-grdnt .panel{position:relative;z-index:5} .sitemap-grdnt .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden} .sitemap-grdnt .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right} .sitemap-grdnt .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px} .sitemap-grdnt .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa} .sitemap-grdnt .panel li{background-color:#f9f9f9;margin:0} .sitemap-grdnt .panel li:nth-child(even){background-color:#fff} .sitemap-grdnt .panel li a:hover,.sitemap-grdnt .panel li a:focus,.sitemap-grdnt .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none} .sitemap-grdnt .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} .sitemap-grdnt .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){.sitemap-grdnt .toc-tabs,.sitemap-grdnt .toc-content{overflow:hidden;width:auto;float:none;display:block}.sitemap-grdnt .toc-tabs li{display:inline;float:left}.sitemap-grdnt .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.sitemap-grdnt .toc-content{border:none}.sitemap-grdnt .toc-line,.sitemap-grdnt .panel li time{display:none}} </style>Setelah itu ganti url www.analisyuki.com/ dengan alamat blog anda. Maka kesannya akan menyerupai ini
Cukup sekian Tutorial Cara Membuat Daftar Isi (Sitemap) Keren di Blogger dengan tampilan gradient color (Warna-warni), jikalau ada sesuatu yang ingin ditanyakan silahkan menuju ke kolom komentar, Terimakasih.
Sumber http://www.analisyuki.com/