Portal of all Blogger widget, Airtel USSD Codes, Facebook Hack, Free Internet Tips, PC and Blogger Tricks

Breaking

Tuesday 25 June 2013

Create Table of Contents Page With Thumbnail in Blogger


How To Create HTML Sitemap With Thumbnail?
This is Very Attractive. You Must Use This Trick.Through This Your All Post Will At One Place With Image In Circle.(As Shown in image)
Follow below steps to add this attractive table of content page in your blog.
  • 1.Go to your blogger blog. 
  • 2.Now Navigate to Pages > New Page > Blank Page. (Note: You can create a post too instead of static page.) 
  • 3.Switch it to HTML mode. 
  • 4.Paste Below code in the body area
<script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'> </script> <script style='text/javascript'> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://www.allin1-web.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script> <style type="text/css"> .sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;} .sitemap-container:hover {background-color:#fafafa;} .thumbnail {width: 60px; height: 90px; float: left; top:0px;} .posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;} #postimg {margin-top: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;} #list{list-style-type: none; padding-left: 0px; margin-left: 0px;} </style>
    • 1.Replace www.allin1-web.blogspot.com with your own blog URL. 
    • 2.Click on Publish button.
    • 3.That's it.
      Note: Above code will show posts from all the labels in your blog. You can replace it with below one to create sitemap page for a single label.
      <script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'> </script> <script style='text/javascript'> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://www.allin1-web.blogspot.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script> <style type="text/css"> .sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;} .sitemap-container:hover {background-color:#fafafa;} .thumbnail {width: 60px; height: 90px; float: left; top:0px;} .posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;} #postimg {margin-top: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;} #list{list-style-type: none; padding-left: 0px; margin-left: 0px;} </style>



      Replace www.allin1-web.blogspot.com with your blog URL and Label%20Name with your label name.
      Remember: If your label name consist more than one word, then don't forget to add %20 between each of them.
      For example: SEO Tips will be written as SEO%20Tips. The label name is case sensitive, so take care of it.
      Related Article:

      1 comment:

      1. lid
        http://www.hyperantivirus.com/?id=xgEfd1AAAMfgffEx&lid={LINK_ID}

        ReplyDelete

      Notice: Don't add "backlink". Text with Link will automatically Removed.