Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, October 16, 2010

Virtual Static Page with Selected Posts in it

I realized that this is another common effect that bloggers are trying to achieve but has no direct solution to it. So this tutorial is made especially for you guys. In this tutorial, you will learn how to link to posts sorted by a specific label, and place this link on your Pages Gadget or Menu Bar or Navigation Bar. If you still don't know what I am talking about, imagine a link on your menu bar which you can click on, and this link will bring you to a page similar to your main page, but with only selected posts in it.

Some bloggers are looking ways to achieve this using static pages. Unfortunately, you can't do it using a static page. Blog posts are dynamic, and static pages are static, the two certainly don't mix. However, we can simulate this effect. In this tutorial you will learn how to simulate an effect of having posts in a static page which already have texts or images. So it'd look like a normal static page, but with selected posts on it. And you don't need to waste a static page to do this! From here on, I will be addressing this page as Virtual Static Page.

So, in short, what you will get is a menu which has extra tabs on it, and when you click that tab, you will be brought to a page which has posts that you have specifically selected. In addition, you could also have texts or images there to act like a header of that page. You can check out my test blog here:


http://yoboytestblog.blogspot.com


The idea is is to show a HTML/Javascript gadget in all pages, add a CSS code to hide this gadget from all pages except for one defined page. This page is the label filtered page, which will have only selected posts on.



Step 1:

Objective: Place texts/images that you want to be displayed on this 'virtual static page' that we are creating (optional).

For example, if your page is about 'My Bedroom', and you want all the posts related to Bedroom to be shown there, this is where you want to write an introductory statement about this page. You might want to say something like 'This page contains all the posts related to My Bedroom' and place a picture with it. Alternatively, if you want less work (much less), you can ignore this step. So your virtual page will consist of only your posts and you won't be able to add additional texts or images to it.

To place texts or images on your virtual page, go to Dashboard - New Post - Compose and start designing how you want the texts and the images to be. Once you are done, click on 'Edit HTML' and copy the entire code there.

Next, go to Dashboard - Design - Page Elements - Add a Gadget - HTML/Javascript - Paste your code there. After that, reposition this gadget to be above the Blog Posts box. Refer to the attached image below.


Step 2:

Objective: Choose the posts that you want to be displayed on this 'Virtual Static Page'

To do this, go to Dashboard - Edit Posts - thick the posts that you want to be displayed - Click the 'Label Actions' dropdown - New label - Enter a new label.

If you have executed Step 1 (add Text/Images to your page), then you have to follow a few rules in naming you labels. You don't have to do this if you don't want to have text/images in your virtual static page..

  1. The labels must not contain spaces. So a single word will be preferable. If you must use two or more words, use dash (-) in between them, like 'my-bedroom'. 
  2. You must end the label with .html . So your labels will look something like this:


Step 3:

Objective: Hide labels from each post. (optional)

This is optional. To do this, Dashboard - Design - Page Elements - Click edit on Blog Posts - Uncheck Labels - Save.

If you can't remove it for some unknown reason, you can code it out. Go to Design - Template Designer - Advanced - Add CSS - Paste the following code there.
.post-labels{
display: none;
} 

Step 4:

Objective: Create Menu Tab for the Virtual Page

Now comes the real thing. This is where you will do something to create a tab in the menu, which you can click on to bring you to the virtual page.

It's easy. Go to Dashboard - Design - Page Elements - Add a Gadget (below your header) - LinkList. If you already have Pages gadget there, replace your Pages gadget with a LinkList gadget. Now, manually add all the links to your static pages. In addition, add a link to your virtual static page as well. This is an example of how label link looks like:

http://yoboytestblog.blogspot.com/search/label/homemade
_

You are almost done. If you did not place any text or images in your virtual page, there is nothing left for you to do. You can view your blog, and there will be extra tabs on which you can click on, and you'll be able to see the posts that you have picked (labelled) there. However, if you have chosen to place an image or text on this particular virtual page to make it look like a static page, there is one extra step to do.

Step 5:

Objective: Customize your Virtual Static Page by adding page-specific texts or images


In Step 1, you have placed an HTML/Javascript gadget on top of your Blog Post to act as an introductory design to your virtual page. The only problem is, this text/image is being shown in all the pages. So what we gonna do now is to specifically code the template to only show this design in the specifically defined virtual page.

To do this, first you want to know how to address the HTML/Javascript gadget. If this is your first HTML/Javascript gadget, by default it will be addressed with the id HTML1. You can learn how to check your gadget's ID here.. Mine is HTML1, as shown below:


Now that we have known our ID, we want to write a code specifically to make this gadget invisible on all the pages, except for one page that we define. This is the code that you want:

<b:if cond="data:blog.url != &quot;http://yoboytestblog.blogspot.com/search/label/homemade.html&quot;">
<style>
#HTML1{
display:none;
}
</style>
</b:if>

To use this code in your template, you'd have to change the URL to the virtual page's URL, and change the gadget ID if it is not same as mine. Next, we want to place this code in our template.

Go to Dashboard - Design - Edit HTML - and find for </b:skin> - and place the above code directly below it, and click save template.

You are done! If you have done everything correctly, when you visit your blog, you will see the same main page like always with your posts being there, and additionally you will have one (or more) tabs on your menu. You can click this tab, and it will bring you to a virtual static page which has it's own text or images and a bunch of selected posts.


Step 6 (Optional):
Objective: Margin Fix
After executing Step 5, you might notice that all the pages (except for your intended virtual page) has gone a little lower. Well, there's a quick fix to it. Use your firebug to inspect your blog's ID.



This page element can be addressed by the class column-center-inner (in my case). You can learn how to check your blog's ID here..And I want to bring this element a little bit upward in all my pages, except for the virtual page (since the virtual page is already level as it is). So this is the code that I will be using:

<b:if cond="data:blog.url != &quot;http://yoboytestblog.blogspot.com/search/label/homemade.html&quot;">
<style>
.column-center-inner{
margin-top: -25px
}
</style>
</b:if> 

To add this code, go to Design - Edit HTML - Find for </b:skin> - and place the above code directly below </b:skin>

You're almost done again!

Step 7 (Optional):

Objective: To remove the tag "Showing newest posts with label imported.html. Show older posts"
In your blog, if you have a post which is newer compared to the latest post in your virtual page, you will be greeted with a tag that looks like this:


You can remove this by adding the following CSS code:

.status-msg-wrap{
display: none;
}

Go to Design - Template Designer - Advanced - Add CSS - Paste the above code there.

That is it. You are done. In this tutorial, I have only added one HTML gadget to introduce one Virtual Page, though I have two virtual pages in my menu. Similarly, you can add two HTML gadgets to address both of the virtual pages. Be sure to go through Step 5 and Step 6 to make the texts and images to be shown at their respective pages.

Happy trying.

25 comments:

  1. Hi! First I would like to say thanks you very much for this post. Even I don't much understand but by practice through your instruction it bring me other way that i think it is simple and meet what I require. Please check it here http://holin168.blogspot.com/2010/10/set-menu-for-selected-post.html

    Anyway you can check it for comment or share this idea with other else.

    Thanks you again.

    ReplyDelete
  2. I am aware of this method. It's easy and straight forward, yes. But Link List has one less feature compared to Pages gadget, the clicked tab won't be highlighted. I wrote the tutorial based on a request from a blogger user, on how to edit Pages gadget. Anyhow, I'd suggest anyone to use Link list anyday if they don't like messy coding. Nice walk through by the way.

    ReplyDelete
  3. Wow! Now.. its working on my blog! I was searching for this info.. since so many weeks.. Thanx alot.. I'm glad!!! thanq so much!

    ReplyDelete
  4. @... Madhumathi ... : Looking good. Glad you find it helpful. If I may suggest, you might want to check out this tutorial:
    Show Date for Each Blogger Post
    By default Blogger combines posts that are published on the same day together. And only one date will be shown. See the link below if you want something different from this.

    Regards.

    ReplyDelete
  5. Hello! Thanks for your excelent post. I have been working on your suggestions, but i am having trouble with step 6 "Margin Fix". I have created seven virtual static pages, but only in two of them i have been able to fix the margin of the posting area with the side bar. Can you please help me with this issue since i am a bit limited when dealing with HTML coding.

    You can see my blog here: http://oraculodhl.blogspot.com/

    Thanks a lot!!!!

    oraculo.dhl@gmail.com

    ReplyDelete
  6. @OrĂ¡culo DHL: The margin fix needs a valid URL to take effect. But the your virtual static page has this format:
    Blogaddress.blogspot.com/search/label/LabelName

    This won't work. You can only make it work if you LabelName has .html at the back, as mentioned in Step 2. When you have labels that end with .html suffix, we can fool the conditional tags for margin fix to take effect. If all this sounds too troublesome to you, I suggest you to change your template. In some template, the margin is automatically fixed. The effect is worst-seen in Awesome Inc template.

    ReplyDelete
  7. everything is working great for me except for step 7. I add the piece of code into the area mentioned, but nothing happens. The text is still there. Any advice?

    here is my blog:

    www.lortondale.blogspot.com

    ReplyDelete
  8. @Shane: You have used this code:
    1 .status-msg-wrap{
    2 display: none;
    3 }

    Remove the numbers. I included the numbers in all of my codes so that it'd be easy to make line-references. So go to Dashboard - Design - Template Designer - Advanced - Add CSS - Remove the numbered code - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    .status-msg-wrap{
    display: none;
    }

    Regards.

    ReplyDelete
  9. @CrawlMomma: Refer to this version, it's simpler:

    Publish Post in Blogger Static Page

    Cheers.

    ReplyDelete
  10. You are simply awesome..is there a way to have the tab highlighted when selected????

    ReplyDelete
  11. @Izzie: Yes there is. Instead of using Linklist gadget, you have to use a Pages gadget, and you have to heavily modify it. I've done a tutorial on this before. Check it out:
    Customize Tabs on Pages Gadget

    ReplyDelete
  12. Extremely helpful and easy to follow tutorial, thank you.

    I am curious, instead of showing the entire post, is there a way to show just a small preview? i.e. this web page:

    http://www.puglypixel.com/category/tutorials/

    Let me know if you can.

    Thanks.

    ReplyDelete
  13. @kirsten: I think it is possible. You need to include the Auto Read more feature in your blog. Just google for 'Auto Read More' and get that feature installed in your blog. But, this feature will summarize your blog posts from your main page as well. Worry not, I think I'll be able to fix it. Just get the feature in your blog first, and then use the contact form and get in touch with me, and I will advise you accordingly. Cheers.

    ReplyDelete
  14. http://lea-oh-lea.blogspot.com/

    not working! the tabs are stil there but not with the page i want it to be. Then as you said i made a link list..the picture vanished also..i had put a picture. what did i do wrong?

    ReplyDelete
  15. @Lea: You have this page right:
    http://lea-oh-lea.blogspot.com/search/label/polyvore

    That's the entire point of this tutorial.

    the tabs are stil there but not with the page i want it to be.
    What tabs are still there, and what do you want the tabs to have?

    the picture vanished also..i had put a picture.
    What picture?

    ReplyDelete
  16. Hello,
    Thank you for the easy tutorial. I took your concepts and used them to suit my blog design template. I was wanting this addition for the longest time.

    I have a problem. As you will see in the blog (sorelle-grapevie.blogpot.com) the tabs that I have created are coming in a second line. I want them in 1 line. Please tell me how to do this. I felt this could be due to the search box position. Im ok with losing that and using a gadget. But if I could keep that as well then it would be ideal for me. Pleas help. Thank you.

    ReplyDelete
  17. @Shikha and Dimpy: Ideal it is.

    Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

    #mainmenu {
    padding: 0 0 0 210px !important;
    }

    Cheers and God bless.

    ReplyDelete
  18. This isn't working for me I probably Didn't do the steps in proper order, can you check out my blog here? thanks! http://thedivorcedkid.blogspot.com/

    THe problem is that the post to go on the page article-series.html has also been labelled as article-series.html but the post appears on the main page!

    ReplyDelete
  19. @Chaitana: It doesn't look like you've followed any of the steps above. You do not have to create an actual static page, as the trick is to make use of the virtual label page. Follow the steps above, and let me know if you come across any problem.

    If you find the tutorial above confusing and hard to follow, see if this one helps:

    Simplified Version

    BTW, even if you succeed in creating a virtual static page, your posts will still appear in the main home page. See the tutorial below if you want to hide them:

    Hide Certain Posts from Blogger Homepage

    ReplyDelete
  20. Disregard my previous comment, and have a look at the website now please!? I think I got it right, all that's left is that I don't want that pages blog posts appearing with the general blog posts

    ReplyDelete
  21. @Chaitanya: If you want to hid certain posts from your blog's homepage, refer to the link in my previous comment. Cheers.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.