Tutorial: How to code Classic Blogger layout - Part 3
Blogged by: Kitty onLabels: Classic Blogger layout, tutorial
In this Part 3, I will be showing you how to add 'pages' to Classic Blogger layout using the overlay div technique. This technique is basically having multiple divs layered on top of
one another and setting them to remain hidden until a function is triggered.
Step 1
Let's say we want to create two more div layers to make About and Visitor pages. So below the <div id="content"> </div> (you could also put them before the </body> tag), we add these lines:
<div id="about">
CONTENT FOR ABOUT ME
</div>
<div id="visitor">
CONTENT FOR VISITORS
</div>
You can add more layers if you want, but for the sake of this tutorial we just create two layers here.
Step 2
We now have two divs for the About and Visitors pages but if we simply leave them like that, they will be visible to the visitors so we need to hide them until they're needed.
Go to the CSS section and add these:
#about, #visitor {display:none;}
Display: none will keep those layers hidden by default. And again, if you have more layers, remember to include them here as well.
Step 3
In the Part 2 of this series, we looked at how to add in the navigation links. So now we are going to modify those links a little bit.
This is what we have in Part 2
<ul id="navigation">
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul>
Now, in order for the links to work with the div layers we just created, we need to change the modify the codes above to:
<ul id="navigation">
<li><span onClick="changeNavigation('name of div here')">Link 1</span></li>
<li><span onclick="changeNavigation('about')">About</span></li>
<li><span onclick="changeNavigation('visitor')">Visitor</span></li>
<li><span onclick="changeNavigation('link3')">Link 3</span></li>
</ul>
We cannot use the href attribute because that doesn't work with div layers so that's why we need to use the onclick function instead. Remember that the "name of div" here be changed to the name of the corresponding div layers that you want the link to open when you click on them.
Step 4
Next, in order for the onclick function to work, we need to add Javascript to the template. This piece of script should be placed within the <head></head> section, preferably just before the closing </head> tag.
<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('div of main content here').innerHTML=document.getElementById(id).innerHTML}
</script>
Look at the script above and see the text in bold. The text in bold must be changed to the name of the div that you want to be displayed the moment the website is opened. In this example, that would be the #content div layer (refer to Part 1 of this series). So we replace the text in bold with content.
Save your file and it's done.
So this is the end of the How to code Classic Blogger template series. I hope you enjoyed following the tutorials as much as I enjoyed writing them. If you have any questions, feel free to post them below.
// Please leave a link back to Codeislove if you have followed this tutorial so that I can see what you have achieved from this tutorial. Thank you. //
Buy a domain for your website!
Comments to Tutorial: How to code Classic Blogger layout - Part 3:
http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/
http://www.w3schools.com/css/css_navbar.asp
but when I click the other div layer and click back onto the blog one, it doesn't appear. :( Could you help me? Thankyou!
My domain is hosted by blogger- I find the new templates constricting so I switched to the classic template and tried to re-code.
The javascript won't work- I've tried everything. I'm fairly good with css and html but the script- I can't hack it.
You seem to have a very unique article here- I can't find anything like it in the search engine!
Is there anything you'd suggest I do? The links don't show up no matter what I do- just plain text. Very frustrating =.=
as i have tried a lot of times but the links doesn't work as like what you mentioned on above we have to change it to onclick instead of href ..
but without the a href how doesn't the link work ??
can you teach me ? thank :)
I still have a question - something that "bothers" me with my layout. I would like to assign labels to my posts but not have them show up underneath the post itself. However I would like to have a list of labels (for example "DIY") in my sidebar so that people can click on the label and have a list of all my posts with the label "DIY". How do I do this? I have tried a few things already - but I can´t seem to get it right.
Thanks again for everything you do!
What I meant was - is there a way to not show the labels underneath my blogpost while still having the label-list? I know how to make the label list - just not how to hide the labels underneath the post itself :)
And if that is not possible - am I correct that the only way to edit the appearance of the label-links would be through the "head" section of my coding where I define the link-appearance?
And one last thing - you seem to have managed somehow to get the word "Labels" smaller than the rest of your text - did you do that with the "body" code in the "head" section?
Sorry for asking so many questions :) I want to start blogging again but also want a layout I like :)
Thank you again for all your help!
.blogger-labels {display: hidden;}
PS - you don´t have to "approve" this comment :) just wanted to let you know :)
I'm so sorry about that. Cheers
saya guna template yg ini:
http://www.blogskins.com/download.php?sid=404476
saya dh cuba coding, tapi tak menjadi :(
Copy and paste codes from tutorial tu into wherever you want the labels to appear. :)
May I ask, is in the classic template can show the pages? instead of posting. example: ennodr.blogspot.com/p/about-me.html
If there is a way, would you to share it here.
many thanks
I recently tried doing this to my blog (reverted to classic template) but this won't work at all. I don't know what's missing. I followed the instructions word for word. It's coming out as plain text and the styling I applied to my navi doesn't cover the for this.
Post a Comment
Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.