Thursday, March 29, 2018

Cara membuat sitemap keren dan responsif di blog

Siambakidul.com~sitemap atau daftar isi didalam sebuah blog menurut saya sangatlah penting, karena bisa mempermudah para pengunjung untuk mencari informasi yang dicari.

Sebelum adanya script sitemap otomatis biasanya dulu para blogger membuatnya secara manual dan hal itu sangatlah menyita waktu serta hasil yang kurang rapi.

Dengan adanya sitemap diharapkan pengunjung betah dan mau kembali lagi untuk berkunjung.
Nah pada kesempatan kali ini saya ingin berbagi script untuk membuat sitemap atau daftar isi di blog kepada kalian.

Caranya sangat mudah dan kalian tidak perlu lagi menulis daftar isi secara manual karena script ini akan bekerja dengan otomatis dan menelusuri semua link artikel yang ada di blog kalian.

Berikut cara membuat halaman sitemap atau daftar isi di blog keren dan responsif.

#pertama silahkan sobat salin script yang ada dibawah ini ke notepad, dibawah ini ada 2 versi sitemap, silahkan pilih salah satu saja yang kira kira cocok buat blog sobat. Untuk warna bisa sobat edit sendiri, yang perlu sobat ganti adalah alamat yang berwarna putih pada script dengan alamat blog sobat.

Sitemap versi pertama
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.rawgit.com/Fahmigoo/Siambakidul.com-sitema/48f5f070/siambakidul.com.js" type="text/javascript"></script>
<script src="https://siambakidul.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>


Sitemap versi kedua
<link href="https://cdn.rawgit.com/Fahmigoo/Sitemap/faead1f4/siambakidul.com.css" rel="stylesheet"></link>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "https://www.siambakidul.com/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // 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: ' &ndash; <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>

Setelah sobat salin diantara script yang sobat pilih diatas kemudaian saatnya membuat halaman sitemap.

Untuk membuat halaman sitemap sepertinya sudah banyak yang tahu, mungkin ini berguna bagi kalian yang belum tahu saja.

Silahkan sobat masuk ke blogger lalu buat halaman baru dengan mode html, kemudian pastekan script yang sudah sobat salin diatas, tapi sebelumnya silahkan ganti alamat pada script yang berwarna putih dengan alamat blog sobat, kemudian publikasikan. Penting=> untuk penulisan alamat sobat harap perhatikan antara http dan https, script diatas bekerja pada http dan https tapi jika blog sobat tidak mendukung http maka tulislah dengan https begitupun sebaliknya.
Selesai...

Itulah cara membuat sitemap keren dan responsif yang bisa saya berikan kali ini semoga bermanfaat.


Berkomentarlah menggunakan bahasa yang baik dan tidak mengandung unsur profokasi.🤔Pilih EmoticonPilih Emoticon Anda🤗