Add your own Archive in Blogger

  • 24Jan
  • 2013
  • 5
    4.2k
    1.Sign in your blogger account
    2.Navigate to Pages
    [Image: 2r76kdT.png]
    3.Now click on New Page->Blank Page 
    [Image: D0eGZ27.png]
    4.Give a name to your archives.
    5.Change it to HTML
    [Image: 8fPa0dL.png]
    6.Copy the below code in the content.
    [Image: eulyA6H.png]
    Code:
    <div id="bp_toc">
    <script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript">
    </script><br />
    <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript">
    </script><br />
    <br />
    <style>
    #bp_toc {
    border: 5px solid #c1bfbf;
    padding: 5px;
    width:100%;
    margin-top:10px;
    }
    .toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #fff;
    color: #000000;
    padding-left: 5px;
    width:60%;
    }
    .toc-header-col2 {
    width:20%;
    }
    .toc-header-col3 {
    width:20%;
    }
    .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
    font-size:18px;
    text-decoration:none;
    }
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    font-size:18px;
    text-decoration:underline;
    }
    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding-left: 5px;
    font-size:18px;
    }
    </style>
    </div>
    7.Thats it...Click on Publish
    [Image: jRHNJwz.gif]
    Interest-Involvement-Implementation
    Share-Learn-Respect-Repute-Thank
    Demo site pls . . .?


    Always do your best. What you plant now, you will harvest later. - Og Mandino.

    What ever I post abt Blog is from my blog only!
    [Image: jRHNJwz.gif]
    Interest-Involvement-Implementation
    Share-Learn-Respect-Repute-Thank