Senang berjumpa kembali sahabat mm kali ini saya akan memberikan tutorial bagaimana cara membuat sitemap dan mengedit tampilannya agar sesuai denngan yang kita ingginkan pertama - tama mari kita pelajari apa itu sitemap.
Sitemap atau peta situs bisa juga dibilang daftar artikel atau postinggan sebuah website yang biasanya hanya berupa url yang di buat langsung oleh robot.txt google untuk para pengguna tema blogger sepeti gambar di bawah, kalian dapat melihat sitemap dari website kalian sendiri dengan menuliskan URL sebagai berikut ( https:// nama blog kalian /sitemap.xml ) .
Seperti yang kalian lihat sebenarnya sitemap hanyalah sebuah kumpulan url yang bermaksud untuk memudahkan mesin pencari google untuk mecrawl website kita sehingga artikel yang kita buat dapat segera tampil di mesin pencari google.
Untuk lebih jelas mengenai memudahkan mesin pencari google silakan baca juga artikel ini
cara simpel agar postingan cepat muncul
Jadi meski kita tidak membuat sebuah sitemap, sitemap akan otomatis di buat seperti gambar diatas. Tapi kita dapat menggubah tampilan biasa sebuah sitemap tersebut dengan script sehinggan menjadi sebuah daftar isi yang dapat memudahkan para pembaca mencari artikel yang mereka inginkan dah selalu up to date juga berpenampilan menarik.
Baiklah langsung kita mulai saja dari yang pertama yaitu menyiapkan halaman tempat script pembuat sitemap kita tuliskan
- Pembuatan
Pertama - tama kita klik Pages di samping kiri(BOX1) setelah itu kita klik New Pages(BOX2) tunggu beberapa saat sampai muncul tampilan seperti membuat artikel baru, tapi berbeda dari pembuatan sebuah artikel di halaman(pages) tidak ada pilihan lable dan tanggal terbitan
untuk mengetahui perbedaan halaman(Pages) dengan Postingan(Post) silakan klik Link dibawah ini
MMtips - apa perbedaan halaman dan postingan
Jika halaman edit sudah terbuka selanjutnya kita ubah dahulu tampilan menyusun(compose view) menjadi tampilan html(Box1) seperti gambar di bawah setelah itu kita tuliskan di judul dari halaman kita di title(box2)
Jika sudah siap selanjutnya kita salin script dibawah ini dan tempel ke halaman yang kita buat tadi
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.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;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 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;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.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:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.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,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // 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: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>Jika kalian sudah menempelkan code di atas selanjutnya kita dapat mempublikasikan halaman ini.
- Penyesuaian
Baiklah jika kalian sudah sukses mempublikasikan sitemap kalian dan sudah bekerja dengan benar selanjutnya mari kita edit code yang ada sehingga dapat menyesuaikan tampilan seperti yang kita ingginkan.
Baiklah mari kita mulai pertama tama kalian pastikan bahwa kalian sudah menyalin semua code yang saya berikan sehingga urutan dari code sama dan tidak akan membinggunkan kalian.
Seperti gambar di bawah yang memiliki 4 box warna merah kali ini saya akan mengajarkan kalian bagaimana cara mengganti warna sehingga seperti yang kalian ingginkan sesuai urutan.
Baik mari kita mulai dari warna table sebelah kiri(Box1)
Kalian harus mencari code warna ini #2f77bd akan ada dua kode warna seperti ini tetapi yang akan kita ubah adalah code di baris ke2 ,kalian ubah kode warna tersebut sesuai dengan wana yang kalian inginkan kalau saya akan menggunakan code warna ini #193498 sehingga seperti tampilan di bawah
Selanjutnya kita ubah warna button jika di pilih oleh mouse(Box2) dengan mencari kode warna ini #4086E0 yang berada di baris ke 10 dengan kode warna yang kita ingginkan sehingga seperti tampilan di bawah
Berikutnya kita ganti warna yang membagi diatara kedua table(Box3) dengan mencari kode warna #1E84BC di baris ke 13 dan menggantinya dengan warna yang kita ingginkan sehingga seperti tampilan di bawah
Untuk yang terakhir kita bergeser ke table sebelah kanan dan kita akan mengubah warna yang berbeda dari table artikel seperti gambar pertama di atas(Box4) dengan mencari kode #66A9FF di baris ke 23 dengan kode yang kita ingginkan sehingga seperti gambar di bawah
Baiklah sampai di sini saja tutorial kali ini semoga bermanfaat jika ada pertanyaan silakan komentar di bawah
Terimakasih sudah membaca artikel saya kali ini sampai jumpa di artikel selanjutnya.
0 Komentar