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.