Memasang Sitemap Model Grid Ala Kang Ismet

Haii... sobat Hendra Surya.COM ...

Pada postingan kali ini saya akan membagikan tutorial membuat dan memasang sitemap model grid ala Kang Ismet. Walaupun sekarang blog beliau sudah tidak aktif tapi kode-kode dan tutorial yang beliau ciptakan sangat berkesan dan banyak dipakai oleh para blogger.

Nah.. kalian tau ga apa itu SITEMAP ?

Oke.. saya kasih sedikit penjelasan tentang apa itu Sitemap.

Sitemap atau peta situs atau daftar isi adalah sesuatu yang mendeskripsikan dan memuat tentang apa yang ada dalam situs atau blog kita. Sitemap berisi tentang data-data, file, dan halaman yang dimaksudkan untuk mesin pencari (Search Engine) dan pembaca untuk mengetahui isi dari keseluruhan situs atau blog yang kita buat. Sitemap merupakan salah satu elemen penting untuk mengoptimasi suatu situs, bisa dikatakan bagian dari SEO Off Page.

Untuk penjelasan lebih lanjut tentang pengertian Sitemap, akan saya bahas dipostingan selanjutnya ya..

Dalam membuat sebuah sitemap atau peta situs kita diharuskan mematuhi kaidah-kaidah SEO, agar antara mesin pencari dan pembaca tidak terjadi semacam ketimpangan, misalnya : kita membuat sitemap dengan tujuan hanya untuk optimasi mesin pencari dan melupakan tampilan dari peta situs itu sendiri pasti pembaca juga akan malas untuk mengunjungi lagi situs atau blog kalian.

Tanpa banyak basa-basi lagi mari kita lanjut ke tutorialnya. Ingat !!! Ini hanya untuk blog non AMP jadi bagi kalian yang memakai custom blog AMP bisa baca tutorialnya di postingan saya "Cara Membuat Sitemap Keren Valid AMP".

• Langkah pertama, copy kode dibawah ini dan paste di halaman statis kalian.

<style type="text/css" scoped="scoped">

.list-entries{background:white;border:1px solid #d8d8d8}

.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}

.list-entries li{padding:1em;border-bottom:1px solid #ddd}

.list-entries .main-title{padding:0}

.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#fc002a;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0!important}

.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}

.list-entries .title a:hover{text-decoration:underline;color:#f707c3}

.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}

.list-entries .summary{overflow:hidden;color:#999}

.list-entries .more-link{border-bottom:none}

.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#db04ac;padding:.5em 1em;position:relative;font-weight:bold;color:white}

.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}

.list-entries .more-link a:hover{background-color:#ba0392}

.list-entries{margin:7px;width:251px;float:left;font-size:11px}

</style>

<script type="text/javascript">

var multiFeed = {

    feedsUri: [

        {

            name: "RPG",

            url: "https://games.hendrasurya.com/",

            tag: "RPG"

        },

        {

            name: "Action",

            url: "https://games.hendrasurya.com/",

            tag: "Action"

        },

        {

            name: "Puzzle",

            url: "https://games.hendrasurya.com/",

            tag: "Puzzle"

        },

        {

            name: "Strategy",

            url: "https://games.hendrasurya.com/",

            tag: "Strategy"

        },

        {

            name: "Racing",

            url: "https://games.hendrasurya.com/",

            tag: "Racing"

        },

        {

            name: "Adventure",

            url: "https://games.hendrasurya.com/",

            tag: "Adventure"

        }

    ],

    numPost: 4,

    showThumbnail: true,

    showSummary: true,

    summaryLength: 80,

    titleLength: "auto",

    thumbSize: 72,

    containerId: "feed-list-container",

    readMore: {

        text: "Selengkapnya",

        endParam: "?max-results=8"

    }

};

</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/HendraSurya/javascript@master/multifeed.js"></script>

<div style='clear: both;'></div>

</div>

• Langkah kedua

Ganti semua kode name, url, tag sesuai dengan situs kalian.

1. name : Nama label yang akan kalian tampilkan.
2. url : Alamat situs atau blog kalian.
3. tag : Nama label atau kategori yang kalian cantumkan dalam postingan.

• Langkah ketiga, save dan publikasikan and done !!

Untuk demo sitemapnya silahkan lihat tombol dibawah ini :

Bagaimana?? Mudahkan ?? Monggo dicoba di blog kalian masing-masing..

Note : Sitemap atau daftar isi ini adalah bukan terintegrasi otomatis dengan label postingan kalian. Jadi jika kalian membuat suatu label atau kategori baru silahkan ditambahkan pada baris kode feedsUri secara manual. Saya kasih contoh :

{
name: "Identitas label baru",
url: "https://www.namablogkalian.com/",
tag: "Tag label baru kalian"
},

Semoga bermanfaat..

Update

Changelog : CDN move to Staticaly (24 Oktober 2018)

Changelog : CDN move to jsDelivr (20 Juni 2020)