[Blogger]Cara mudah membuat Sitemap Keren di Blog 2018

Kali ini OtakTekno mau share bagaimana cara membuat sitemap keren di blogger. sebenarnya apa sih fungsi menu sitemap? menurut admin fungsinya adalah mempermudah pengunjung mengetahui postingan apa saja yang ada di blog tersebut sama seperti daftar isi lah. tampilannya seperti dibawah ini

Simple kan tampilannya,untuk yang ingin tau cara membuatnya tinggal copy paste code di bawah ini

<div class="jontor">
<script src="https://cdn.rawgit.com/kahlaazahra/d254a2a23ec09379951dd9ce370693b8/raw/c2f201c27057cc6f900ad26edad2726ecc0fd7ed/sitemap.js"></script><br />
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=rak_info_Load"></script><br /></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:#89abbc;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:#d9f4f2;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:#89abbc;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>

Jika ingin melihat tutorial bergambarnya dari awal bisa ikuti cara-caranya dibawah ini
Pertama masuk ke dasbor blogger.com lalu pilih menu pages

Lalu buat sebuah halaman baru, lalu edit ke model html dan pastekan saja scipt di atas lalu save.
tampilannya seperti dibawah ini

Mudah kan caranya, semoga artikel tentang cara membuat sitemap keren dengan mudah di blog ini dapat membantu mempercanti tampilan blog dan membuat nyaman pengunjung blog. Terima kasih

Share this post