Wednesday, 23 October 2013

Cool Responsive Sitemap Widget for Blogger-How to Guide

Many of earlier bloggers want to add site map page in their blogs but they can’t know about it. In this modern age of blogging some blogger developers made a cool Sitemap page widget for blogger. It is similar to Wordpress Sitemap page. It is too cool, stylish and attractive having new features. It is easily to add in blogger. After adding CSS code you need to just change blogger URL with your own blog URL .It has cool and look and different from other sitemaps. It has three column and Tabled sitemap designed for blogger.

How to create Responsive Sitemap Page in BLogger

Step 1: Go to blogger Dashboard.
Step 2: Select "Pages" Section and then click on "New Page" and create a New "Blank Page"
Step 3: Paste the following HTML code in this new page "HTML Section"

<script src="" type='text/javascript'></script> <script src=";alt=json-in-script&amp;callback=loadtoc"></script> <style type="text/css"> .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } .post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } .ct-columns-3 p a:hover { background: #555; color: #fff; } @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } </style>

Step 4: After adding code.Now Replace my "Blogger URL" with your own "Blogger URL"

Step 5: After this Select Option button from middle right side and select "Don't allow, hide existing" for Comment Readers 

Now publish your Page and View your Sitemap Page
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...


:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

© 2016 Hub of Computer Tricks | All rights Reserveds
Customized by Sufyan Raza Cooperated with Tricks-Lab
Contact No +92-301-6106181

Back to top