Pada tutorial sebelumnya saya sudah menjelaskan bagaimana Cara Membuat Sitemap SEO Frienly di Blogger.
Nah di tutorial kali ini adalah sitemap modifikasi dari tutorial sebelumnya, sitemap ini terlihat leboh keren, menarik dan responsive, walaupun terlihat full color dengan background pada tulisannya tapi jangan salah sitemap ini lebih fast loading dari sitemap sebelum nya.
Dengan adanya sitemap ini selain memudahkan pengunjung dalam mencari artikel dengan sitemap yang terlihat lebih keren juga memberikan kesan menarik pada pengunjung untuk itu buat juga Web master sitemap disini.
Bagi anda yang tertarik untuk mencoba nya silakan ikuti langkah-langkah nya dibawah ini.
Cara Membuat Sitemap Keren dan Responsive di Blogger
1. Loggin Ke Blogger
2. Pilih Laman/Page ==> Laman Baru/New Page Cara Membuat Sitemap Keren dan Responsive di Blogger 3. Pilih Mode HTML Lalu Copy kan kode di bawah ini Cara Membuat Sitemap Keren dan Responsive di Blogger
<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:#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>
4. Klik Publish/Publikasikan ket: bagi yang sudah terdapat 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 dan Responsive di Blogger. Selamat Mencoba, Semoga Bermanfaat.
1. Loggin Ke Blogger
2. Pilih Laman/Page ==> Laman Baru/New Page Cara Membuat Sitemap Keren dan Responsive di Blogger 3. Pilih Mode HTML Lalu Copy kan kode di bawah ini Cara Membuat Sitemap Keren dan Responsive di Blogger
<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:#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>
4. Klik Publish/Publikasikan ket: bagi yang sudah terdapat 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 dan Responsive di Blogger. Selamat Mencoba, Semoga Bermanfaat.
No comments:
Post a Comment