Creating a Separate Archive Page or Labels Page for blogger

Many bloggers dont prefer to display the blog archive and the labels on each and every page of their site. They may wish to create a separate page for the Blog Archives. I have made one such implementation of a blog archive here . You can also check out my label cloud page .

So i think you guys understood what i am trying to explain.

Ok lets get into the details of doing this. Blogger allows little bit of programming.Those who have coded using C or any simple programming language might surely have used the conditional if statements. The same thing is there for the blogger template also.learn about these conditional tags over here and come back..

So how are we going to do this..First we will make a blank post with an appropriate title.In this case i have made a post with title "Label Cloud" .Also make sure that you have disabled comments on this post .You can do that from the Post Options in your Post Editor. When making the post set the post date to a little earlier date so that this post wont reflect in your feed.(You can do that in the post options in your post editor).Now we have created a page where we want to display our blog label cloud. Note that url. We will need it

Now we are going to make a new label gadget.For this goto Blogger > Template > Page Elements and add a Label gadget.Drag it just below the blog post gadget.

Ok now we will get a label gadget on every page of our blog.(If you want you can convert the label widget into a cloud)Now we want to hide the blogpost widget on this particular label page.For this we use conditional tags..
I placed the following code just below ]]></b:skin>

<b:if cond='data:blog.canonicalUrl == &quot;http://www.bloggerplugins.org/2005/06/label-cloud_06.html&quot;'>
<style>
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>


Now the Blog Post widget will be hidden in the Label Cloud Post Page.The label cloud appears on every blog page.Now we have to make it invisible on other pages(pages other than the cloud page).To make a widget invisible we have to wrap conditional tags within the main b:includable of the widget.Other B;includables needn't be wrapped as they are called from the main includable(This can be compared to main function and other functions in C. If the main function is disabled,the program wont work.Similarly if the main includable is disabled,then the widget will be hidden).The general structure of a any widget looks like
<b:widget id='something' locked='false' title='something' type='something'>
<b:includable id='main'>
----
----
----
</b:includable>
Other includables //Not Present in Label Widget </b:widget>
Now we have to impose the conditions within the widget which will make the structure to

<b:widget id='something' locked='false' title='something' type='something'>
<b:includable id='main'>
<b:if cond='data:blog.canonicalUrl == &quot;http://www.bloggerplugins.org/2005/06/label-cloud_06.html&quot;'>
----
----
----
</b:if>
</b:includable>
Other includables //Not Present in Label Widget </b:widget>

Similarly we can create a separate archive page also..
Remember that the Archive widget has more than one b:includables..You just need to hide the main includable..
. Note:In this tutorial you will have to modify the URLS properly.I have used my blog urls for explanation.This method doesn't cause problems with rearranging of Widgets in the Page Elements Tab.
Permalink:Creating a Separate Archive Page or Labels Page for blogger

40 comments :

  1. this execllet you know where blogger exactly lacks.........

    ReplyDelete
  2. well won't you think instead of

    http://www.bloggerplugins.org/2005/06/blog-archive.html

    we need to add our blog archive post url??

    ReplyDelete
  3. This is an a great idea and an excellent guide on how to accomplish this. I will be implementing this on my blog, joshgard.com. Thanks Aneesh!

    ReplyDelete
  4. It's an excellent post, very useful, I 've been searching for such widget for a long time ! I appreciate it ! thanks :)

    ReplyDelete
  5. I really liked your instructions and I thought I followed them perfectly. The archive page works great, but now when I try to rearrange my sidebar, I get this error:
    bX-6sfqob
    Additional information
    blogID: 415944303613394026
    host: www.blogger.com
    uri: /rearrange

    Any thoughts? It's on the Summer at Grandma's House blog.

    ReplyDelete
  6. I've got the same problem Kris mentioned. What's up?

    ReplyDelete
  7. yea you will get problem in rearranging the template.. Normally this error occurs when the template gets corrupted..

    when a widget id moved,what actually happens is that the widget code as a whole will be relocated to the new position.. Now when we modify the template like this,blogger may get confused regarding where to move the widget to.. as there are multiple sections of main class..(this might be the problem.. only google can be sure of it)..

    So if you are using this selective display and you want to move widget,then you can use this procedure..

    Just Goto Template>Edit Html .Don't expand your widget templates.. and then each widget can be seen in the template as a single line code..

    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

    you can move this singe line widget codes here and there to move the widget..

    ReplyDelete
  8. @Kris and Summer i have modified the post with another simpler technique.. This wont wont make problems in rearranging widgets..

    ReplyDelete
  9. Eurgh. I really need to relearn how to use Blogger so I can update my page. This is an excellent feature and I want to try it so much! Thanks for sharing.

    ReplyDelete
  10. i need some help..

    i already done all things exactly you teach ,but once i hide the blog archive on the other pages,the blog archive that i want to show also gone.
    how i gonna do to make it show again?

    ReplyDelete
  11. @kathie did you replace my urls with that of yours??

    and show me your archive page too.. :)

    ReplyDelete
  12. thanks for your well formed instructions... it works perfect!

    ReplyDelete
  13. OK, I'm an idiot. I can't figure out how to do that last part. I keep getting the following error:
    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "DIV" must be terminated by the matching end-tag ""

    ReplyDelete
  14. @Ancilla Indigna,
    i have replied to your email.I hope that helps.

    ReplyDelete
  15. I can't quite figure out this last bit. Most of the code is fine until the last bit, where I get the following messages:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:
    The element type "b:includable" must be terminated by the matching end-tag "".
    OR
    "b:section" must be terminated by the matching end-tag "".
    Am I putting the code in the following code (with tags)in right place?
    b:if
    b:includable
    Other includables //Not Present in Label Widget b:widget
    IF I leave it alone then I keep getting the archives on all pages at bottom of posts. See site
    http://otiumsanctum.blogspot.com
    The other problem is that this totally does away with a blog archive widget in the side bar - it seems its either one or the other - very frustrating

    ReplyDelete
  16. did you place the code properly..?
    <b:includable id='main'>
    You will find a line like this within your archive widget code. Just place the opening b:if tag just below this line.. and place the closing b:if tag just above the </b:includable> of the widget..

    I used hyphens to denote that something is already there.. BTW if you cant figure it out,download an upload your template somewhere and contact me @ the forums.. I will edit it for you..

    ReplyDelete
  17. emm...
    sorry
    i would like to ask paste the code??
    The third colume code


    emm..
    and i like to noe how to make something like
    eg:
    http://XXX.blogspot.com/2009/07/07-ghost.html

    i saw ppl after pressing the title in label
    they will appear a new url and behind it got www...........html
    yr page too...how to do it??

    ReplyDelete
  18. I'm stuck on the 2nd and 3rd blue codes, where do i paste them?

    ReplyDelete
  19. hi,
    i wanna know where i can get an html/jascript code that i can display the labels as a separate post in my blog.i want to paste the code into the blog post body and get displayed in the post.hope you may help.

    for eg: http://pixelshots.blogspot.com/2009/05/quality-backlinks-to-pixelshots.html
    i have posted the gadgets and like things into this post.i wanna display the labels also like this in another post..

    thankyou
    pixelshots@gmail.com

    ReplyDelete
  20. @PixelShots - you wont get an HTML/Javascript version of the Label Gadget. You have to follow the method specified in this post.

    ReplyDelete
  21. Hi Aneesh,
    Thanks for this great tutorial.
    I made everything (almost) as you said:
    instead of your first code I used a higher level like this:

    <b:if cond='data:blog.url == &quot;http://myblog.blogspot.com/2009/12/blog-archive.html&quot;'>
    #Blog1 {display:none;}
    </b:if>

    and so I could make everything disappear: linkwithin widget, ads, post footer,...Of course, the post title disappeared too but the widget has its own title anyway.

    It looks good (not nice) so far but now I wonder, is there any reason I should not use this method?
    Is there anything I overlooked?
    When and if you have the time, could you please have a look and advice me?
    This is the page. Many thanks in advance.

    ReplyDelete
  22. Thanks.. :D It does great..

    ReplyDelete
  23. Hi,i want to create a new archive page and put the archive gadget in the post body of the archive page instead of side bar. please help me.

    ReplyDelete
  24. I made the Archive appear only on the page I specified. Yet it appears on the sidebar and not on the post. What should I do?

    ReplyDelete
  25. sorry,but thi sisnt working.I dont have this at all in my code

    can u help me???

    ReplyDelete
  26. @priti - expand your widget templates and look for
    <b:widget id='Archive1

    you will find out some similar code

    ReplyDelete
  27. Absolutely brilliant!
    BUT...can you help iron out one small niggle please?
    On my Archive page (http://www.dpfinnie.com/2004/08/blog-post_01.html) the share buttons etc appear above the Archive list. However this is not the case in my Labels Page. I'd like to lose the share buttons from the Archive but can't figure it out.
    Your help would be greatly appreciated!
    Thanks
    Dino

    ReplyDelete
  28. Me again...
    I was being a bit doff!
    I had completely missed the fact that as I'm doing this for the Archive AND Labels then I needed to post the first bit of code below the tag TWICE but changing the URL for each page.
    Now it's working seamlessly.
    Thanks.
    Dino

    ReplyDelete
  29. HELLO

    thank you for this, it's really cool, but I have a problem. I can't make invisible the Labels Cloud below the blog posts. why it is?? please, help me. thank you!

    ReplyDelete
  30. Hello!

    Is it possible for this to work for a custom-made template with no widgets? Because I have no widgets or ...... coding (because I coded my layout myself).

    Please get back to me ASAP, and thank you!

    ReplyDelete
  31. Hi Aneesh

    Thanks.This hack worked beautifully for me to create a blog archive page.
    I also want labels to appear on that same page below the blog archive.

    I tried adding a label widget and then hiding the main-includable within the label widget. (exactly the same way as i did for the blog archive widget).

    I can't get the label widget to appear in any page including the archive page. Any suggestions ?

    ReplyDelete
  32. thank you for this, it's really cool

    ReplyDelete
  33. i got this error....... Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "".

    i think am not understand last 2 blue code. please tell me where that code place in blog,, plz replyy m waiting

    ReplyDelete
  34. i am not understand last 2 blue code.. and where to place in blog please explain.....reply m waiting

    ReplyDelete
  35. God bless you for such simple and helpful way resolving the issue.

    many labels or keywords create a very long column here: http://electricianintorontoelectrician.blogspot.com/p/keywords.html

    Q: is there a way to rearrange labels into two columns?

    Thx

    ReplyDelete