Himang
#Selamat Pagi, Selamat Siang, Selamat Sore,Dan Selamat Malam, Kapan Pun Anda Berada Yang Membaca Artikel Ini...
("Semoga Kasih Tuhan BesertaMU")
Oke Lanjut Artikel…
Kali Ini Himang.my.id Akan Berbagi Tips Cara Buat Daftar Isi/Sitemap Blogger Pemula Responsive. Daftar Isi/Sitemap Merupakan Berupa Daftar Artikel Yang Ada Pada Sebuah Blog Atau Website.
Dengan Memberikan Internal Link Pada Semua Laman Artikel Tertentu, Dengan Adanya Daftar Isi/SiteMap Maka Akan Mempermudah Seorang Pengunjung Untuk Mencari Apa Yang Dibutuhkan Seseorang Pengunjung Tersebut Pada Blog Anda.
Namun Tentu Apabila Dilakukan Secara Manual Yang Artinya Setiap Anda Membuat Artikel Yang Baru Anda Juga Harus Memperbarui Laman Daftar Isi Pada Blog, Maka Itu Akan Sangat Membosankan Dan Juga Membutuhkan Waktu Meskipun Memang Tidak Lama.
Tapi saya menulis artikel ini bertujuan agar teman-teman mempunyai daftar isi/sitemap yang berpenampilan menarik & baik dimata pengunjung. Ini Juga Sekali gus untuk teman-teman yang belum mempunyai sitemap teman-teman bisa mengikuti cara dibawah;
Buat Daftar/SiteMap Blogger Pemula Responsive.
Login Ke Blogger>
Buat Postingan Baru Di Menu Halaman>
Tambahkan Semua Kode/Script Dibawah Ini Dalam Postingan Tab Html.
Buat Daftar/SiteMap Blogger Pemula Responsive.
Login Ke Blogger>
Buat Postingan Baru Di Menu Halaman>
Tambahkan Semua Kode/Script Dibawah Ini Dalam Postingan Tab Html.
Note:
Bukan Di Compose Tapi Tab HTML
<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://dogghozt.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://cdn.jsdelivr.net/gh/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>Ganti Url Saya https://dogghozt.blogspot.com Yang Diatas Dengan Url Blog Kalian...Jika Sudah Klik Publikasikan Dan Selesai Deh...
Hasilnya
Nah sekian Dulu Cara Buat SiteMap Blogger Pemula Responsive Dari Saya Jangan Lupa Berkunjung Lagi Dan Membaca Artikel Saya Yang Lainnya Semoga Yang Saya Bagikan Berguna Buat Teman-Teman.
Terimakasih Sampai Jumpa lagi...
No comments