How to add Cool Responsive Sitemap Widget for blogger blogs

Most of the bloggers who has a blog on blogspot want to make a cool sitemap like WordPress, unfortunately the table of content/Sitemap widgets designed for blogger can't compete with WordPress sitemap. Few days ago we published a sitemap widget(by Ankit) but that's also not look much attractive and it can be only added for specific label. So, Today we're going to see how to add an stylish three column blogger sitemap with responsive design. This widget is easy to add and it has a cool look when compared to other sitemap widgets.

OK, you can see a live demo of the widget for better understanding.

How To Add Sitemap Widget to your blog
In the blogger Dashboard, Select your blog
Go to Pages >> New Page, then choose HTML Part
Paste the following code inside it.

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script> <script src="http://www.blogtipsntricks.com/feeds/posts/default?max-results=9999&amp;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>

After Adding the above code. Replace http://www.blogtipsntricks.com with your blog link
Then Click on the options on the right sidebar and select Don't allow, hide existing for Reader comments
Now, Click publish and See the page.
That's all, We are done.

I Hope you all like this widget Kindly Let me know your thoughts about the widget and don't forget to share it...

Comments

Post a Comment