Tech Online Help-Blogging, Wordpress Tutorials: How To Create a Responsive HTML Sitemap Page In Blogger

How To Create a Responsive HTML Sitemap Page In Blogger

Saturday, April 4

How To Create a Responsive HTML Sitemap Page In Blogger

Sitemap is a very important page for a website to seek out out all the articles in an website. Sitemap may also be known as a table of contents of all the posts in our blog. The sitemap byself is sometimes accustomed create it easier for viewers to check articles or posts within the website. Normally all articles or blog posts are going to be displayed by the labels and title on our web log. Sitemap is additionally a part of {SEO} and part of blogging.

Not inconsistently for bloggers consistently utilize a sitemap to make it simpler for viewers to see all the articles or all posts of articles that been distributed on the website. In making it yourself it's extremely simple, you don't have to paste the content into the format, you just make a static page on your blog, and the sitemap page can be utilized given that each posts as of now has or has a label given, at that point naturally posting or the writing article will go into the sitemap page.

Today we will give you 2 cool and responsive sitemap styles to the articles on the blog. both of these sitemap styles are entirely reasonable for use in the present websites. both of these sitemap styles are genuinely basic, just showing the title of the article dependent on each labeling. in any case, it looks extremely simple to see and responsive for all gadgets. Alright simply proceed to our post, How To Create a Responsive HTML Sitemap Page In Blogger

Table of Contents:-

♥ Style type I
♥ Style type II

How to Make a Responsive Sitemap on Blog or website

Style type I

♣ First of all Login to your website by visiting www.Blogger.com
♣ Choose Pages option =)> Add New Page
♣ Choose the hypertext mark-up language (HTML) Tab rather than Compose tab
♣ Copy the code below and paste it within the hypertext mark-up language (HTML) Tab Earlier.

<div class="jontor">
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:blue;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:10px;}
.jontor 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;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;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:#0fa9cd;}
.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:17px 'Calibri';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,155,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f2f3;}
.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>

To see the outcome please press on Preview button first, in case of everything feels right, if it's not too much trouble than publish the post.

5. End of Style I detailing, lets head to next one.

Style type II

♣ How to create a Style II sitemap widget constant means as responsive and style I, you simply enter the code below within the hypertext markup language (HTML) Tab. however you have to replace the website URL together with your website URL or link.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #2D96DF;
border:1px solid #3498DB; 
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>  <br />
<div id="toc">
<script src="https://cdn.rawgit.com/irawanria85/aridjaya/b34079da/sitemap-aridjaya.js" type="text/javascript"></script> <script src="https://www.tech-onlinehelp.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

If it's not too much trouble text the ones set apart with red color/ https://tech-onlinehelp.blogspot.com with your blog URL or connection.

In above article you learnt how to make a responsive sitemap on websites or blogs, Choose which one is better for you, it would be ideal if you set it yourself. If you find this post helpful don't forget to Subscribe and Share. Thank You!!! written with ♥ Tech Online Help