How to Add Sitemap Widget In Blogspot Blogs
Let's Start Procedure
A sitemap is a very crucial element that every blogger should have on their blog. It's not simply a page, it helps to lower the speed ratio by enabling direct navigation to mark certain messages.
The Sitemap we introduced today presents articles about the last published order in each category, based on the ajax technology you have, so it runs quickly and does not influence the speed of any site
Let's examine how we may add a Sitemap widget to a Blogspot blog. You may see a demo of the author gadget live by clicking the icon below.
Let's Start Step-1 ( Adding CSS )
A sitemap is a very crucial element that every blogger should have on their blog. It's not simply a page, it helps to lower the speed ratio by enabling direct navigation to mark certain messages. The Sitemap we introduced today presents articles about the last published order in each category, based on the ajax technology you have, so it runs quickly and does not influence the speed of any site
Let's examine how we may add a Sitemap widget to a BlogSpot blog. You may see a demo of the author gadget live by clicking the icon below.
go to >> Templates >> Edit HTML and search for the ending "]]></b:skin> "tag
اور
اس کے بالکل اوپر درج ذیل کوڈ پیسٹ کریں۔
CSS Code:
/* ######## Navigation Menu Css ZahidSoftPk ######################### */ .mapasite { margin-bottom: 10px; background-color: #F8F8F8 } .mapasite.active .mapa { display: block } .mapasite .mapa { display: none } .mapasite h2 { background-color: #EEE; color: #000; font-size: 15px; padding: 10px 20px; border-radius: 2px; margin-bottom: 0; cursor: pointer; font-weight: 700 } .mapasite h2 .botao { font-size: 18px; line-height: 1.2em } .botao .fa-minus-circle { color: #f30 } .mapapost { overflow: hidden; margin-bottom: 20px; height: 70px; background-color: #FFF } .mapa { padding: 40px } .map-thumb { background-color: #F0F0F0; padding: 10px; display: block; width: 65px; height: 50px; float: left } .map-img { width: 65px; height: 50px; overflow: hidden; border-radius: 2px } .map-thumb a { width: 100%; height: 100%; display: block; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .map-thumb a:hover { -webkit-transform: scale(1.1) rotate(-1.5deg)!important; -moz-transform: scale(1.1) rotate(-1.5deg)!important; transform: scale(1.1) rotate(-1.5deg)!important; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .mapapost .wrp-titulo { padding-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.3em; padding-left: 25px; padding-right: 10px; display: block; overflow: hidden; margin-bottom: 5px } .mapapost .wrp-titulo a { } .mapapost .wrp-titulo a:hover { color: #f30; text-decoration: underline } .map-meta { display: block; float: left; overflow: hidden; padding-left: 25px; } .mapasite h2 .botao { float: right }
Now save your template and go to the pages to add a sitemap.
Step-3 ( Adding Sitemap In Pages ) - Most Important !!
Now, this is the most important part of the lesson and you have to do it very carefully. Go to your Blogger
"dashboard > Pages > Add New Page."
After adding the page title and hiding the comments using the options, on the contents of the new page, add the following code in the page's content area.
[sitemap]
Congratulations !! You have made Now you've learned how to add a sitemap widget to Blogspot blogs. Go to your blog and see the awesome widget live in action, hope you enjoyed this tutorial, if you enjoyed it please share it with your friends, we have developed more useful widgets Staying with us, please stay with us.
Thanks.