Blog Posts Archived Looks Clean

4/16/2012
Hello world. I was so excited in starting back my blog-ing days, suddenly I realized it was 4 am in the morning. Well as usual, first thing comes first, finding templates, adjusting and customizing its features. - Thank god I kept a few of my old templates made years ago in my flash drive.

While I was Google-ing around for info and new gadjets/widjets, whatever you guys call it, for my fresh new blog-ger template, I came accross bloggeruniversity. Yup, the name says it all. A learning centre for semi to advance geeks in the web world. You can find tutorials, advice, mark-ups and plenty of dot, slash, colon, semicolon thingy. All and all, the easiest explanation, great tutorial content dude.

So here I found the thing i wanted, to archives my blog posts to look minimal clean. So, credits to bloggeruniversity for this tutorial. Very informative and bookmarked.


So, lets get to the hard work. Here is the tutorial and the steps taken to account:-

Step 1
Go to dashboard > Template > Back Up/Restore (Save your current template to your PC)

Step 2
At the same screen click on: edit html > proceed > turn on expand widget templates (on the top-left screen of the window)

Step 3
Press simultaneously ctrl-F (a small window finder will pop-up at top right) and type

]]></b:skin> and press enter (better yet, copy and paste this code).

Step 4

Copy the code below and place it underneath the exact code as above. (right after/directly under at your HTML/CSS style sheet)

<b:if cond='data:blog.url != "YOUR ARCHIVE PAGE URL"'>
<style>
#BlogArchive1{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

Step 5

Click Preview and wait until it is parsed. If no error occurred. Save and exit.

Step 6

Go to page > add pages - Name title Archives and leave it blank press > Update (save). Press > view this page and copy the page URL at your internet browser.

Step 7
Go back to layout and pick any 'add gadget' > and pick Archives. Any where it is fine enough because this gadget will disappear.Click save and drag the Archives gadget you made, just below your post body gadget. Click save layout.

Step 8

Go back to template > Edit HTML > Proceed and use Step 3 to find the code you pasted before. At this code: <b:if cond='data:blog.url != "YOUR ARCHIVE PAGE URL"'> replace YOUR ARCHIVE PAGE URL with the URL from your Page you just saved/copied from your browser before. ( the URL of your page will look something like this http://yourblog.blogspot.com/p/blog-page.html ). Click save and your done.

Go back to View Blog > Archives tab and you will see the Archives pages for your blog form the first blog you have posted.

Important Note: This tutorial method will only run one Archives widget in your layout. If you have extra please delete it. What's the point making a cleaner home page anyway right?.

That's all for: Archive Blog Posts To Look Minimal Clean.
back to top