Want to learn more about blog SEO? Read this post " HOW TO INCREASE SEO FOR YOUR BLOG "
Back to the Topic.
So What is Blog Archive and Why Should You Add it to your website or Blog.?
Blog archives simply serves as the nucleus and history of your blog. As a blogger , you publish new posts frequently and while you do so, your new posts appears on your blog's home page and you will notice that your older post will be very difficult to locate.
At this point is where the Blogger Archive come in, with this widget , you can always find your older blog posts online with ease. Many blogging platforms has this widget already intact for users to add but the one i will share with you is more precise and looks good and well organised.
It has some division such as: Post Titles, Post Dates and Post Labels, unlike the default blogger Archive widget..
Why Blog Archives Is Important..
Firstly , blog archive gives your blog good credibility in a way that visitors will see your blog post that was made may be 2 years ago and this will give them a great instinct to trust and value your blog over others that have little post in them.Archives also help your visitors to navigate easily and locate a post or similar post that might be important to them..
Ok, with that little description above I hope you now know what blog Archive means and why you should add it to your blog or blogspot.
How To Add Stylish Archives widget to your blog.
= Login to your blogger account and go to pages
= Click on New page
= Title your new page with " Archives" click on HTML and copy and paste the code bellow
<style scoped="scoped" type="text/css">
/* CSS Sitemap Archive Page */
#bp_toc {background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px;}
.toc-header-col1 {padding:15px!important;line-height:15px;background-color:#555;width:250px;transition:all 0.3s ease-in-out;}
.toc-header-col2 {padding:15px!important;line-height:15px;background-color:#333;width:75px;transition:all 0.3s ease-in-out;}
.toc-header-col3 {padding:15px!important;line-height:15px;background-color:#111;width:125px;transition:all 0.3s ease-in-out;}
.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {opacity:0.9;}
.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:15px;text-transform: lowercase;text-decoration:none;color:#fff;font-family:'Roboto Slab';font-weight:400;letter-spacing:0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:10px;font-size:92%;;transition:all 0.3s ease-in-out;}
.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {background:#fdfdfd;}
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {padding:10px;font-size:92%;}
.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {padding:10px;font-size:92%;}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#8493A5;}
span.toc-note {padding:10px;margin:10px 0;display:inline-block;background:#fff;
color:#666;}
#bp_toc table {width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color: transparent;}
#bp_toc tr:nth-child(even) {background:#fafafa}
#bp_toc tr:nth-child(odd) {background:#f5f5f5}
/* CSS Bounce To Top */
#BackToTop {background:#8493A0;display:none;color:#fff;padding:13px 16px;
font-size:16px;line-height:30px;border-radius:100%;opacity:0.7;transition:all .3s linear;}
#BackToTop:hover{opacity:1;transition:all .3s linear}
.BackToTop {-webkit-transform: translateZ(0);cursor:pointer;position:fixed;bottom:30px;right:30px;z-index:90;}
/* Custom CSS for Pass Strength */
input#pwd {width:50%;color:#666;border:1px solid #e5e5e5;padding:5px;margin:20px auto;float:none;}
#pwd_strength_wrap {background:#fcfcfc;border:1px solid #e5e5e5;border-radius:2px;display:none;float:left;padding:15px;position:relative;width:auto;box-shadow:4px 4px 0 #f5f5f5;}
#pswd_info ul {list-style-type:none;margin:5px 0 0;padding:0;}
#pswd_info ul li {color:#308cf4;background: url(http://2.bp.blogspot.com/-wBYlnND0TkE/VBDPofBF_zI/AAAAAAAABVU/RtZHTPtr_8o/s1600/icon_pwd.png) no-repeat left 2px;padding:0 0 0 20px;opacity:0.8;}
#pswd_info ul li.valid {opacity:1;background-position:left -42px;color:#bbb;text-decoration:line-through;}
#passwordStrength {display:block;height:5px;margin-bottom:10px;transition:all 0.6s ease-in-out;}
.strength0 {background:none;width:0px;}
.strength1 {background:none repeat scroll 0 0 #FF4545;width:25px;}
.strength2 {background:none repeat scroll 0 0 #FFC824;width:75px;}
.strength3 {background:none repeat scroll 0 0 #6699CC;width:100px;}
.strength4 {background:none repeat scroll 0 0 #008000;width:150px;}
</style>
<br />
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://ismoothblog.googlecode.com/svn/sitemap-archive-page.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
= Then click on Publish and your are good to go..
I hope this helps. Please don't read alone, this post might be useful to your friend or someone out there do SHARE please...
If you encounter any problem on the course of implementing this code do let me know through the comment box..
No comments:
Post a Comment