How To Add Responsive HTML Sitemap Page For Blogger Blog? | TechnoSakib.com
--
How to add responsive HTML sitemap page in blogger? Beautiful HTML sitemap widget for blogger blog.
HTML Sitemap page for blogger.Blogger is a free and amazing blogging platform.You can create your own blog and earn money from it at free of cost.But if you want to give a stylish look to your blog, then you have to create html sitemap for blogger.
What is HTML sitemap for blogger blog?
There are two types of sitemap widget for blogger blog.One is XML sitemap widget for blogger and another one is HTML sitemap page for blogger.XML sitemap widget for blogger is a must thing to index your blog/website in Google. Google search bot get your content and site information from a xml sitemap. Check our another article, how to add xml sitemap widget for blogger blog?
HTML sitemap also give information about your site content.But a html sitemap page is more user friendly and your blog readers get accurate information of your blog from html sitemap page for blogger.
How to create html sitemap page for blogger?
This html sitemap page can show the total number of post by lebels.It means search engine can easily understand the content of your blog.Which will help you for better seo.You can check the demo html sitemap page.
<! — — HTML Sitemap by https://www.technosakib.com--->
<style type=”text/css”>
#sitemap {
width:100%;
margin:5px auto;
margin-left: 4px;
border:1px solid #23A839;
border-top:0px solid #2D96DF;
}
.label {
color:#FF5F00;
font-weight:bold;
margin: -16px -1px 0px;
padding:1px 0 2px 11px;
background: -webkit-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right,#6DFC85 0%,#23A839 40%); /* Standard syntax */
border:1px solid #23A839;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
display:block;
}
.label a {color:#fff;}
.label:first-letter {text-transform:uppercase;}
.new {
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname {
font-weight:normal;
background: -webkit-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right,#6DFC85 0%,#FFF 40%); /* Standard syntax */
}
.postname li {
border-bottom: #DDD 1px dotted;
margin-right:5px
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
</style>
<div id=”sitemap”>
<script type=”text/javascript” src=”https://cdn.rawgit.com/prozokti/rashid/master/sitemap.js"></script>
<script src=”https://www.technosakib.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadsitemap"></script>
</div>
<! — — HTML Sitemap by https://www.technosakib.com--->
Conclusion:
That’s how you can create html sitemap page for blogger.If you have any question related this article then feel free to ask me, on the comment section. Best of luck and create your own html sitemap page for blogger.
Originally published at https://www.technosakib.com.
