Membuat Sitemap Ganteng Sesuai Label di Blog

Jadilah Blogger Tanpa Membuat Artikel Hoax
Memasang Widget Custom Stats di Blog
Memasang 3 Komentar Disqus, Blogger, dan Facebook

Sitemap disebut juga peta situs yang dapat diartikan sebagai daftar isi. Daftar isi adalah lembar halaman yang biasanya terletak pada halaman pertama menjadi petunjuk pokok isi buku beserta nomor halaman. Bedanya dengan di blog daftar isi tidak terletak pada halaman pertama melainkan terdapat pada menu navigasi.

Membuat Sitemap Ganteng Sesuai Label di Blog

Di sini saya akan sampaikan cara membuat sitemap atau daftar isi blog yang sesuai dengan kategori blog. Kenapa harus ada sitemap pada setiap blog, karena sitemap atau daftar isi akan mempermudah pengunjung dalam mencari artikel pada blog anda yang sudah memiliki pulusan, ratusan, bahkan ribuan artikel.

Sebelumnya saya pernah juga share tentang pembuatan sitemap pada blog di farhanweb. Akan tetapi yang saya share dulu tidak terpisah dari suatu judul label dengan yang lainnya.  Membuat Sitemap Tabel Flat di Blogger

Berikut Cara Membuat Sitemap atau Daftar isi Ganteng Sesuai Label di Blog

1. Login Blog

2. Laman – Buat Laman Baru

3. Copy kode di bawah ini kemudian simpan pada mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="f-web">
<script src="https://rawgit.com/farhanweb/farhanweb-javascript/master/sitemap-fast.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=farhan_web_Load"></script>
</div>
<style type="text/css">.f-web{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.f-web a{color:black;}
.f-web p .farhan_web_Label{background:#ED7FFD;display:block;padding:12px;}
.f-web ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.f-web ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#7F1AA5;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.f-web ol li:hover:after{left:-.5em;border-left-color:#7F1AA5;}
.f-webol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.f-web ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.farhan_web_Postname li:nth-of-type(odd){background:#43F28F;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
</div>

4. Publis. Lihat hasilnya

Demikian tutorial Membuat Sitemap Ganteng Sesuai Label di Blog. Jika bermanfaat silahkan boleh dishare artikel ini. Terimakasih..

COMMENTS

WORDPRESS: 14
  • comment-avatar

    wah ini yang bikin Maya pusing, berintung ada teman yang mau membantu
    mohon maaf lahir dan batin

  • comment-avatar

    sepertinya saya pernah mencobanya. namun sekarang saya udah ganti entah pake punya siapa ya. lupa.
    tapi ini bangus banget harus di coba

  • comment-avatar

    Terlihat lebih bagus sih, cuma warnanya terlalu rame, mungkin bisa ganti kode warnanya yamas untuk disesuaikan 🙂

  • comment-avatar

    Terimakasih. Mohon maaf lahir batin

  • comment-avatar

    terimakasih mas

  • comment-avatar

    hehe iya mbak

  • comment-avatar

    kebetulan pengen pasang sitemap diblog yang lain, tapi kenapa setelah pake tutorial ini, saya kok tetep aja dibilang nggak ganteng sih?

  • comment-avatar

    Wah. kalo itu mah musti ke salon mang, hehehe

  • comment-avatar

    dibilang mbak gegara jual kecantikan hahahaha

  • comment-avatar

    sabar – sabar mas.
    😀
    Fotonya belum muncul

  • comment-avatar

    saya bilang aja deh mang kalo gitu bognya si mamamg yang lain emang ganteng

  • comment-avatar

    belum sempat saya coba caranya mas admin. padahal sudah janji

  • comment-avatar

    coba aja mas, ntar hapus lagi biar ndk kebanyakan widget di blog nya biar kgk berat. tapi klo cocok bisa di tempelin terus hehe

  • comment-avatar

    bagus jg kalau punya sitemap yg menarik seperti diatas ya mas.

    koreksi dikit mas,sebaiknya kode yg paling atas : div dir="ltr" style="text-align: left;" trbidi="on" diilangin aja soalnya itu deteksi bahasa dan nggak valid html5