How This Work?
After seen this page's demo now I would like to explain that how this made and how this work. Firstly this widget is made by CSS and Built with JavaScript This pages has not effect to your blogger blog loading speed it just required a blank page. This widget is created by Prajjwal Rajput so, all credits goes to them. This page is specially made for blogger platform blogs. It has a cool navigation and tabbed contents. This page is also called automatic sitemap page because this page is automatically add your latest and recent posts without editing this page is. So even better for us we don't need to change and update this sitemap page daily just after added in your blogger blog. This page also shows labels and date/Time with the posts titles it has great ability that when your mouse over on any post title then you will show their description and beginning words. This page is making using the JavaScript and CSS.
How To Install This Sitemap Page?
Well, after some gaining knowledge and information about this sitemap page now this time to add this page in your blogger blog it was so simple to add this in blogger blog you can just follow my simple steps. After Installing this sitemap page please make your blogger template backup and save it in your hard disk.
- Go To Blogger Dashboard>>Template>>Edit HTML.
- Find this below code using (Ctrl+F)
]]></b:skin>
- Paste the following code just above it.
------------------------------------------------------*/
CSS Sitemap Page By Www.NextBloggerTricks.Com
------------------------------------------------------*/
#bp_toc {
border: 0px solid #000000;
background: #ffffff;
padding:10px 0;
width:100%;
margin-top:10px;
}
#bp_toc a{
text-decoration:none !important;
}
#bp_toc a:hover{
text-decoration:underline !important;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
padding:10px;
background:#292929;
width:250px;
border-bottom:5px solid #99dbff;
}
.toc-header-col2{
border-right:2px solid #ffffff;
border-left:2px solid #ffffff;
}
.toc-header-col2 {
width:75px;
border-bottom:5px solid #ed4e69;
}
.toc-header-col3 {
width:125px;
}
.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-family: "Trebuchet MS", sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
color:#ebebeb;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding: 10px;
background:#f8f8f8;
border-bottom:2px solid #ffffff;
}
.toc-entry-col2{
border-right:2px solid #ffffff;
border-left:2px solid #ffffff;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
color:#45818e;
font-size:12px;
font-family:verdana;
}
.toc-note{
background-color:#333333;
padding:10px;
font-size:20px;
display:inline-block;
*display:inline;
zoom:1;
text-align:center;
color:#999999;
}
- No Save Your Template.
- Go To Blogger Dashboard>>Pages>>New Page
- Choose Blank Page.
- Enter your Page title ( i.e.Sitemap )
- Go To HTML Tab like below Image.
- Paste the Following code in there HTML Tab.
<div id="bp_toc">
<script src="https://nextbloggertricks.googlecode.com/svn/trunk/Sitemap%20By%20NBT.js" type="text/javascript"></script>
<script src="http://nextbloggertricks.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script></div>
- Click On Publish Button to Publish your sitemap Page.
- That's all!
- CONGRATULATIONS! You're successfully add this New Css Pure Sitemap Page in your Blogger Blog.
Last Words
So friends this is the our today fresh tutorial and I can promised you that next time I'm comes with interesting and useful articles. I hope you can successfully add this page in your blogger blog if not? you're facing problems or getting error during this process so feel free to ask comments box for your solutions. and don't forget to like our Facebook page and also share this post with your friends on social networking sites.
Happy Blogging!
Friday, August 01, 2014
