create table which are contained on blogger label / Create Archive Page for Your Blog

create table which are contained on blogger label / Create Archive Page for Your Blog



It’s common practice for a blog to have a specific page that can be
helpful for visitors to browse all published posts from one place.



Archive page in some cases it's called sitemap, sometimes can be a table
of contents, and while others folks call it index page. It depends on
what we want to display on that page.





If you want to create an archive page for your Blogger blog which is
beneficial for readers, today's post might be useful for you. It's based
on what I've done to my Archive Page. It was a long process to me -
because I didn't have pretty much time - since a few techniques had
taken place in order to achieve the way it displays the posts.



Here are several methods related to showing all posts in one place that I stumbled across the web;

• Use Blogger Archive/Labels Gadget. The trick is placing the
  gadget either on top or below the post section. Then we write
  conditionals to hide and show the gadget depending on post URLs. To me
  it's hard to customize the look.


• Use Related Posts Script. A good technique that we can show
  all important parts besides post titles (Published date, number of
  comments, and image thumbnail). Anyway, It only shows maximum 25 feeds
  even after altering the max-results.


• Table of Contents Script. The TOCs script was re-written by Abu Farhan. He comes with a few versions of TOCs
  for Blogger blog that we can choose the best. Yet I don't know how to
  avoid duplicate post titles; of course we put 2-3 labels for each post.

What I was looking for? A way to group the posts into several categories.



Finally
I decided to start learning about Yahoo Pipe. The starting point was a
widget from Bloggersentral that we can display all posts in alphabetical
or chronological order. Credit to GreenLava.
At the first place, If we can easily change the lists by changing the
variables from the code itself, it means some how filtering post labels
is possible.



Seemingly we won't anymore use Google/Blogger API but a web application from Yahoo, why?.

The purpose is to create new pages by aggregating RSS feeds from
different sources. Yahoo! Pipes has many modules which can be used
either to grab data from sources or to edit the data that is grabbed
from the sources.

I'm quite satisfied with the end result though it's a little bit slow to load.

View Demo

LET'S CREATE your own archive page. I assume here that you already have
created a static page for your archive. From the demo, you should see
two examples that we can achieve through CSS. By the way I would start
with the first format - using unordered list- to write these steps. The
list of posts for both formats is sorted chronologically in descending
order so that the newest posts will always be on top.

The CSS

First, add this code into your template in between b:skin. Save your template.

.post-archive {<br /> width: 100%;<br /> margin: 30px 0 60px;<br />}<br />.post-archive h4 {<br /> margin: 0 0 10px;<br />}<br />.post-archive ul {<br /> margin: 0;<br /> padding: 0;<br />}<br />.post-archive ul li {<br /> list-style: none;<br /> line-height: 1.4;<br /> margin: 0 0 20px;<br /> padding: 0;<br />}<br />.post-archive li a {<br /> margin: 0 20px 0 0;<br /> color:#09f;<br />}<br />.post-archive li a:hover {<br /> color:#000;<br />}<br />.post-archive li a:visited {<br /> color:#999;<br />}<br />.post-archive span {<br /> position: relative;<br /> color: #fff;<br /> background-color: #ccc;<br /> padding: 2px 10px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br />}<br />.post-archive span:after {<br /> content: "";<br /> position: absolute;<br /> width: 0;<br /> height: 0;<br /> left: 45%;<br /> bottom: -5px;<br /> border: 5px solid;<br /> border-color: #ccc transparent transparent #ccc;<br />}

The HTML

Now, you're going to edit your archive page in HTML mode (select Edit HTML). IMPORTANT, Here you need to set its setting to 'Show HTML literally' (Post Options > Compose Settings) and always keep staying in HTML mode.



Paste this code and straightly click Preview.



<div class="post-archive"><br /><noscript><span>Ooops! please enable JavaScript and try again...</span></noscript><br /><h4><br />Tips</h4><br /><script type="text/javascript"><br />function getYpipeTL(feed) {<br /> document.write('<ul>');<br /> var i;<br /> for (i = 0; i < feed.count; i++) {<br /> var postLink = "'" + feed.value.items[i].link + "'";<br /> var postTitle = feed.value.items[i].title;<br /> var numComment = "<span>" + feed.value.items[i].commentcount + "</span>";<br /> var postList = "<br /><li>" + "<a href=" + postLink + '" target="_blank">' + postTitle;<br /> document.write(postList + '</a>');<br /> document.write(numComment);<br /> document.write('</li><br />');<br /> }<br /> document.write('</ul><br />');<br />}<br /> </script><br /><br /><script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?<br /> &BlogUrl=http://mshihan.blogspot.com <br /> &PostLabel=tip<br /> &_id=a6552650eb15f4c3988fd62878a01820<br /> &_callback=getYpipeTL<br /> &_render=json"><br /></script><br /></div><br />





You should be able to see my posts which are posted in category 'tip'.
Those are mine. Now at least you know it's working. Then you have to
change the colored words and URL with yours and see the result again.
Keep in mind, post label is case sensitive.



How to add more categories? As you look at the HTML, we use a div
element with class name 'post-archive'. Meaning that it's reusable.
Just repeat pasting the code inside your post editor and change to any
intended label. Also remove <noscript> line from the second div onward.



Why do I prefer this method? It's easy to manage the archive. We
show what we want for visitors, right!. The only thing we should concern
about is labeling work. How a label differs your posts? and how many
labels do you have?



Now we have the ability to control them by grouping a few labels under one specific category. For instances;

• Tip - blogging, seo, and marketing


• Coding - css, html, and jquery

Okay, if you prefer your archive page in tabular form - similar to what I
have - here are the CSS and HTML code. Please change the code above
respectively.

The CSS

.post-archive {<br /> line-height: 1.2;<br /> text-align: center;<br /> width: 100%;<br /> margin: 30px 0 60px;<br />}<br />.post-archive h4 {<br /> text-align: left;<br /> margin:0 0 10px 2px;<br />}<br />.post-archive td {<br /> width: 31%;<br /> padding: 5px 2% 20px;<br /> background-color: #f3f3f3;<br />}<br />.post-archive h6 {<br /> margin: 0 0 5px;<br />}<br />.post-archive a:visited {<br /> color:#ccc;<br />}<br />.post-archive span {<br /> position: relative;<br /> color: #fff;<br /> background-color: #999;<br /> padding: 5px 15px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br />}<br />.post-archive span:after {<br /> content: '';<br /> position: absolute;<br /> width: 0;<br /> height: 0;<br /> left: 45%;<br /> bottom: -7px;<br /> border: 7px<br /> solid;<br /> border-color: #999 transparent transparent #999;<br />}

The HTML

<script type="text/javascript"><br />function getYpipeTL(feed) {<br /> document.write('<table><br /><tr>');<br /> var i;<br /> for (i = 0; i < feed.count; i++) {<br /> var postLink = "'" + feed.value.items[i].link + "'";<br /> var postTitle = feed.value.items[i].title;<br /> var numComment = "<span>" + feed.value.items[i].commentcount + "</span>";<br /> var postList = "<td><h6><br />" + "<a href=" + postLink + '" target="_blank">' + postTitle;<br /> document.write(postList + '</a></h6><br />');<br /> document.write(numComment);<br /> document.write('</td>');<br /> if (((i + 1) % 3) == 0) {<br /> document.write('</tr><br /><tr>');<br /> }<br /> }<br /> document.write('</tr><br /></table><br />');<br />}<br /> </script>

View Demo

Final words, It's better to move our archive to its own, a dedicated
page. As important as it is for a blog, placed the archive gadget on the
sidebar can also harm our blog after sometime, especially when we have
published a great number of posts.



So loading all the archive links on all pages is totally unnecessary. We
should move the archive to a separate page and link to it from our
menu. What is your opinion?

Click Here For Get More Blogger Tutorial

Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.