Membuat Sitemap Keren Pada Halaman Statis

Membuat Sitemap Keren Pada Halaman Statis

Kegunaan sitemap atau daftar isi pada blog yaitu untuk memudahkan pengunjung melihat-lihat artikel yang ada pada blog tersebut. Penting untuk suatu blog mempunyai sitemap, selain untuk menampilkan semua artikel yang ada pada blog tersebut, pengunjung juga sanggup mengetahui artikel terbaru atau terupdate pada blog. Sebenarnya google telah menunjukkan akomodasi berupa widget arsip blog, namun widget yang berlebihan hanya akan menciptakan loading menjadi lebih lama. Oleh alasannya yaitu itu, aku merekomendasikan untuk menciptakan halaman khusus untuk sitemap.

Telah banyak artikel yang membahas sitemap, jadi aku akan membahas versi aku sendiri. Bisa Anda lihat sitemap pada blog ini, tampilan yang dipakai cukup menarik dan daftar isi yang diperlihatkan berdasarkan label. Ini sanggup memudahkan pengunjung semoga lebih gampang mencari artikel sesuai tema yang di inginkan. Artikel terbaru pada tema yang dipilih juga sanggup dengan terang dilihat, sehingga pengunjung sanggup mengikuti artikel terupdate pada blog ini. Bila tertarik untuk memasangnya pada blog Anda, silahkan ikuti tutorial berikut.

1. Silahkan login ke blog teman kemudian menuju ke Template > Edit HTML, kemudian letakkan CSS berikut sebelum arahan ]]></b:skin> atau </style>

/*CSS Sitemap ---- https://rodamotiv.blogspot.com/ */ #tabbed-toc{margin:0 auto;background-color:#fff;-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:#FC7569} #tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 12px Tahoma,Sans-Serif;color:#F53B3B} #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 Tahoma,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#FC7569;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer} #tabbed-toc .toc-tabs li a:hover{background-color:#fff;color:black} #tabbed-toc .toc-tabs li a.active-tab{background-color:#F53B3B;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 #F53B3B;-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 Tahoma,Sans-Serif} #tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#2d2d2d;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 #275827;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:#fff} #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:#F9F9F9;color:#FC7569;outline:none} #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}

2. Jika sudah, silahkan save kemudian buat halaman gres untuk sitemapnya. Saya merekomendasikan Anda untuk membuatnya dihalaman statis blog.

Baca juga : Cara Memasang Konversi Kode Pada Blog

3. Pada halaman Statis tersebut, ubahlah kedalam mode HTML jangan Compose semoga kodenya aktif.

4. Masukkan Kode pemanggil Sitemapnya

<div dir="ltr" style="text-align: left;" trbidi="on"> <div id="tabbed-toc"> <span class="loading">Loading Sitemap .. Please Wait.. :)</span></div> &nbsp;<script type="text/javascript"> var tabbedTOC = {     blogUrl: "https://rodamotiv.blogspot.com/",     containerId: "tabbed-toc",     activeTab: 1,     showDates: false,     showSummaries: false,     numChars: 200,     showThumbnails: true,     showNew: 15,     newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FC7569;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',     monthNames: [         "Januari",         "Februari",         "Maret",         "April",         "Mei",         "Juni",         "Juli",         "Agustus",         "September",         "Oktober",         "November",         "Desember"     ],     newTabLink: true,     maxResults: 99999,     preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload") }; </script> <script src="https://googledrive.com/host/0B2oQSsObIa2ldzBoUDlQWElRQlk" type="text/javascript"></script> </div>

Keterangan :

• Ganti https://rodamotiv.blogspot.com/ dengan alamat blog sobat,
• Anda sanggup memilih jumlah artikel terbaru yang ingin di tampilkan dengan mengganti angka 15 pada showNew.

5. Silahkan di publikasikan dan lihat hasilnya.

Demo