Home » , » How to add Cool Responsive Sitemap Widget for blogger blogs

How to add Cool Responsive Sitemap Widget for blogger blogs

Adsense code here ...

In this post i am going to share "How to add Cool Responsive Sitemap Widget for blogger blogs" . Flowing the below instructions .
How to add Cool Responsive Sitemap Widget for blogger blogs

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.computerjajot.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.computerjajot.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...

Happy Blogging :) 

Thanks for reading & sharing Festival Photo , Picture and Wallpaper ! Blog Kmdnifo

Previous
« Prev Post
Related Posts Plugin for WordPress, Blogger...

Search This Blog

Blog Archive

Popular News