Cara Membuat Sitemap Keren Warna dan Responsive di Blogger

Baca Juga

Cara Membuat Sitemap Keren Warna dan Responsive di Blogger



Sitemap atau daftar isi blog dirasa sangat penting untuk memberikan ruang informasi kepada pengunjung agar mengetahui seluruh isi artikel pada blog. Kali ini saya akan memberikan tutorial cara membuat sitemap keren otomatis dan fast loading di blog. Sebenarnya sitemap default dari blogger sudah tersedia, namun terlihat biasa dan tidak menarik. Nah, dengan membuat sitemap blog keren maka akan menajadi perhatian tersendiri dimata pengunjung dan ini akan menjadikan pengunjung betah di blog yang kita kelola.

Yang paling menarik dari sitemap seo ini adalah menampilkan sitemap otomatis sesuai dengan label, jadi menampilkan judul postingan sesuai dengan label yang ada. postingan terbaru akan secara otomatis masuk dalam daftar, jadi anda tidak perlu ribet memasukkan satu persatu. Memasang sitemap di blog blogger juga tidak membutuhkan skill untuk menguasai html, karena anda tinggal copas dan memasangnya pada halaman statis.

Dengan adanya sitemap ini selain memudahkan pengunjung dalam mencari artikel dengan sitemap yang terlihat lebih keren juga memberikan kesan menarik pada pengunjung.
Bagi anda yang tertarik untuk mencoba nya silakan ikuti langkah-langkah nya dibawah ini.

Cara Membuat Sitemap Keren Warna dan Responsive di Blogger

1. Loggin Ke Blogger
2. Pilih Laman/Page  , Klik  Laman Baru/New Page


3. Pilih Mode HTML Lalu Copy kan kode di bawah ini

<div class="jontor"> <script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script> <script src="/feeds/posts/default?max-results=5000&alt=json-in-script&callback=rak_info_Load"></script> </div> <style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;} .jontor a{color:black;} .jontor p .rak_info_Label{background:#428bdd;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;} .jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#ace6d5;color:#fff;text-decoration:none;transition:all .3s ease-out;} user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;} .jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#bed572;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;} .jontor ol li:hover:after{left:-.5em;border-left-color:#89abbc;} .jontorol 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);} .jontor 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:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;} .rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;} .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>

4. Pastekan Kode Tersebut dan Klik Publikasikan.


5. Silahkan Anda Lihat Hasilnya.



Tambahan : Bagi sobat yang sudah ada sitemap di blognya dan tertarik untuk mengganti nya dengan sitemap ini anda tinggal mengganti kode HTML nya saja kemudian Update/Perbaharui

Nah itu dia Cara Membuat Sitemap Keren warna dan Responsive di Blogger.
Selamat Mencoba, Semoga Bermanfaat.