- Blog
- Website
- Articles / Tutorials
- Links
- Hire me
- Contact / Requests
- Advertise
- Review
Tutorial: How to code Classic Blogger layout - Part 3
Blogged by:
Kitty on
Wednesday, October 12, 2011
Facebook comments: comments
I apologise for the delay in posting this tutorial. I actually meant to post it right after the Part 2 but somehow I never got around to do it.
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!
Labels: Classic Blogger layout, tutorial
Related Posts:
Comments to Tutorial: How to code Classic Blogger layout - Part 3:
ahhhh, you hide them! no wonder I can't see the link when I hover your navigation area XD indeed, family is more important! kekeke~ don't be jealous! I'm sure you got loadsa them there in Brunei.. we only have one shop selling those cute things and I always end up spending my money buying them which is obviously NOT in my shopping list XD
kaka boleh minta themplate blog ini ga saya minta yah tolong ini alamat email ku indra.doank03@gmail.com
@Doank, sorry but my blog layout is not for grabs.
Sorry can i ask how to make a menu tab on a classical template?? :)
@мs .ιпsапз cici 痴痴, you can use horizontal navigation menu for that. I haven't wrote the tutorial for that yet, but here are some resources which can help you out:
http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/
http://www.w3schools.com/css/css_navbar.asp
hey, how do you have that thing where you press the button and it goes directly to the content you want but without changing the sidebar? Like, for example, i press "tutorial" and it leads me to the page with all the tutorials.. :/ im going to open a blogshop so i need to know how to do that so my customers can navigate freely.. THANKS!! :D:D
@The Lollapalooza Shoppe, I use overlapping div layers which are hidden using Javascript. You can create them by following the tutorial above.
still it doesn't work!! can you show an example of the overall text? >.<
@Nadya, I don't have the complete template because if I provide that, people will simply download that and don't bother to learn the codes. I suggest you follow the tutorial from start (Part 1). I provide a basic HTML template which you can use.
I changed one it to [li][span onClick="changeNavigation('content')"]Blog[/span][/li]
but when I click the other div layer and click back onto the blog one, it doesn't appear. :( Could you help me? Thankyou!
oh okay, finally it did. i did some tweaking too. thanks :)
I was so excited to find this article- the javascript and pseudo tables are exactly what I've been wanting to do with the design of my layout but I didn't even know they existed!
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 =.=
hi , how to show up the link ?
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 :)
Facebook comments to Tutorial: How to code Classic Blogger layout - Part 3:
Tutorial: How to code Classic Blogger layout - Part 3
Blogged by:
Kitty on
Wednesday, October 12, 2011
Facebook comments: comments
I apologise for the delay in posting this tutorial. I actually meant to post it right after the Part 2 but somehow I never got around to do it.
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!
Labels: Classic Blogger layout, tutorial
Related Posts:
Comments to Tutorial: How to code Classic Blogger layout - Part 3:
ahhhh, you hide them! no wonder I can't see the link when I hover your navigation area XD indeed, family is more important! kekeke~ don't be jealous! I'm sure you got loadsa them there in Brunei.. we only have one shop selling those cute things and I always end up spending my money buying them which is obviously NOT in my shopping list XD
kaka boleh minta themplate blog ini ga saya minta yah tolong ini alamat email ku indra.doank03@gmail.com
@Doank, sorry but my blog layout is not for grabs.
Sorry can i ask how to make a menu tab on a classical template?? :)
@мs .ιпsапз cici 痴痴, you can use horizontal navigation menu for that. I haven't wrote the tutorial for that yet, but here are some resources which can help you out:
http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/
http://www.w3schools.com/css/css_navbar.asp
hey, how do you have that thing where you press the button and it goes directly to the content you want but without changing the sidebar? Like, for example, i press "tutorial" and it leads me to the page with all the tutorials.. :/ im going to open a blogshop so i need to know how to do that so my customers can navigate freely.. THANKS!! :D:D
@The Lollapalooza Shoppe, I use overlapping div layers which are hidden using Javascript. You can create them by following the tutorial above.
still it doesn't work!! can you show an example of the overall text? >.<
@Nadya, I don't have the complete template because if I provide that, people will simply download that and don't bother to learn the codes. I suggest you follow the tutorial from start (Part 1). I provide a basic HTML template which you can use.
I changed one it to [li][span onClick="changeNavigation('content')"]Blog[/span][/li]
but when I click the other div layer and click back onto the blog one, it doesn't appear. :( Could you help me? Thankyou!
oh okay, finally it did. i did some tweaking too. thanks :)
I was so excited to find this article- the javascript and pseudo tables are exactly what I've been wanting to do with the design of my layout but I didn't even know they existed!
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 =.=
hi , how to show up the link ?
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 :)
Facebook comments to Tutorial: How to code Classic Blogger layout - Part 3:
Hire me to design your blog!
I offer designing and re-designing of Classic Blogger templates. Examples of my design can be found on my portfolio website.
The basic rate for a design starts from $25 USD. The rate is based on the complexity of the design. The more elaborate the design is, the higher the price is.
How to place your order
Send me an email via the contact form and state clearly how you want your design to be. This includes colour scheme, layout (with or without sidebar, number of columns, etc), any extra features, etc.
Your email should be in this format:
Name:
Design: Please give detailed explanation on how you want your template to look like
Preferred payment method: Paypal/Moneybookers/Payza/Bank transfer to Baiduri bank
I shall respond to your email within 3 (three) days. Your order will be placed into a Waiting Queue as orders are processed on a first come, first serve basis.
Payment methods
Payment has to be made to either by PayPal, AlertPay/Payza or Moneybookers.
However, if you choose to pay via (international) bank transfer, you are aware that you may be charged for the transfer service.
Other important information
Throughout the designing process, I may need to refer back to you for questions/opinions so do check your email frequently. This is to ensure the design can be done as soon as possible.
Depending on the design, your template make take up to over 1 (one) week to finish. You will be informed once the template is done.
I will send you an email requesting for the payment after the template is done. Once the payment is received, I will email you the complete template along with the necessary files.
All of my designs/templates will come with a credit section. This section must be left intact and you may not remove nor alter them. Resources that come with the designs/templates may not be redistributed or reproduced.
The designer
Kitty. 25. Blogger, web designer, procrastinator and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.
Among the interwebs community, I am generally known as Kitty. I hold a bachelor degree in Social Science Education, majoring in History and currently I am pursuing a Masters degree in South East Asian Studies. I enjoy talking to my online friends. You could say I have more friends in the cyberworld than in real life. Because it is easier for me to talk to people without looking at them in the face; I'm a shy person and I'm very self-conscious on how I look. I don't know what people think about me so I'd leave that to you to figure out yourself.
I've been blogging since 2005 (or earlier) though my experience with the internet started back in 2000. My main interest is in web design and development. Other times you can see me wrapped around a book or glued to Astronomy and web design magazines.
The website
This website was created in January 2011 and the domain was purchased by me in late December 2010. Initially the website was intended to house tutorials for Classic Blogger/Blogspot only however over the time it has developed into what you see today.
Several of the tutorials and articles can also be found on Nekonette.com, which is the my main website where I mostly blog about my personal life. Also some of the tutorials here have been moved to that website.
Past layouts
These are the layouts that have been used on Codeislove.net previously.
Layout #1
Layout #2
Layout #3
Articles, Tutorials and Contests
Articles
Please do not copy the articles verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.
Tutorials
Please do not copy the tutorials verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.
Popular tutorials:
Converting HTML layout to Wordpress series:
How to code Classic Blogger template series:
Other tutorials:
Contests
Linkages
On-site navigation
Network
Looking for money-making opportunities? Check out these websites.
Contact the webmistress
You can email me your messages/tutorial requests using the contact form:
Advertising
Codeislove: Geek Is Chic is a blog which houses various articles, tips and tutorials on web design as well as a mix of personal insights published by the website owner.
Simple site statistics:
Monthly Unique Visitors: 5000+
Monthly page views: 7,000 ~ 9,000
Also, if you think that you have a good advertisement offer to discuss with me, do contact me and let's discuss about it.
Get reviewed
You can have your website/blog reviewed here on Codeislove. Alternatively, you can also apply to get your website/blog reviewed on my other website, Amalina.org. You can request your review to be public or private. If you choose to have it public, it will be posted here on Codeislove. Similarly, if you want it to be private, I will send the review to you via email.
Please send an email to me in this format and I will get back to you as soon as I can:
Name:
Email:
Website/blog:
Do you want the review to be public/private?
Websites/blogs currently being reviewed:
Aroha - Ashleenah
Twinkle Toes - Eryn - completed
Gadis bermata cokelat - Nurul Nabila - completed
Chazz, 
Doank, 
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.