Stylish Site Map for Blogger Blog

Stylish Site Map for Blogger Blog 1

In this article, I discuss about how to add stylish sitemap widget for blogger blog?
Sitemaps are more useful to easy user access. It publish your all posts link in simple page. I found this amazing widget on techtrickhome. So i share it for you.

Steps to add Sitemap widget

Step 1: Login to your blogger blog
Step 2: Go to Page Section and Create New Page
Step 3: Change New Page in HTML mode/
Step 4: Paste the below code in it.

<div dir=”ltr” style=”text-align: left;” trbidi=”on”> <script src=” https://googledrive.com/host/0B6ZMa_AKw94_dnBrQ2hfVTZmMm8″></script> <br /> <script src=”http://www.techwar24.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc”></script> <br /> <script type=”text/javascript”> var accToc=true; </script> <br /> <script src=”https://googledrive.com/host/0B6ZMa_AKw94_SWRpSTZoUXRwdm8″ type=”text/javascript”></script><br /> <style>#blog-pager{display:none} .judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#888888′, endColorstr=’#575757′); } .data-list{ line-height:1.5em; margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:”Arial”,sans-serif; font-size:12px; } .list-ganjil{ background-color:#F6F6F6; } .headactive{ color: #fef4e9; border: 2px solid white !important; background: #1C8DFF; background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); background: -moz-linear-gradient(top, #9dc2e7, #438cd2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9dc2e7′, endColorstr=’#438cd2′); } </style></div> <!–INFOLINKS_ON–></div>

Step 5: Change your blog address in highlighted text.

Step 6: Publish the page.

Done! You create sitemap page for your blog. Any question about adding sitemap comment below.

Credit: TechTrickHome 

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.