Skip to main content

Cara Membuat Daftar Isi (Sitemap) Keren di Blog

Cara Membuat Daftar Isi (Sitemap) Keren di Blog

Cara Membuat Daftar Isi (Sitemap) Keren di Blog - Kali ini saya akan membagikan cara membuat 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 dapat memberikan manfaat bagi pembaca atau pengunjung untuk mencari apa saja yang dibutuhkan pengunjung tersebut, yang tentunya berguna 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 membuat daftar isi keren di blogger dengan tampilan efek gradient (pelangi), tetap ringan dan enak 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 kode ini di dalam menu 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:' &ndash; <em style="color:red;">New</em>'};
    </script>
    <script src="https://rawcdn.githack.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 hasilnya akan seperti ini

Cukup sekian Tutorial Cara Membuat Daftar Isi (Sitemap) Keren di Blogger dengan tampilan gradient color (Warna-warni), jika ada sesuatu yang ingin ditanyakan silahkan menuju ke kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar