home Twitter RSS feeds

Tutorial: How to code Classic Blogger layout - Part 3

Blogged by: Kitty on Wednesday, October 12, 2011  
Commentators: Anonymous Chazz, Blogger Unknown, Blogger Kitty, Blogger 小玛丽 , Blogger Kitty, Blogger The Lollapalooza Shoppe, Blogger Kitty, Blogger Nadya Nyobi, Blogger Kitty, Blogger , Blogger Nadya Nyobi, Anonymous Anonymous, Anonymous Anonymous, Blogger Unknown, Anonymous Anonymous, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Unknown, Blogger Kitty, Blogger Unknown, Blogger Kitty, Blogger Veeyah, Blogger Kitty,
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!
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

Labels: ,


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 =.=

Anonymous Anonymous said on April 23, 2013 at 5:30 PM
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 :)

Will this work for the newer blogger site set up? You can add pages now and write code for these pages.

Anonymous Anonymous said on July 8, 2013 at 1:51 AM
I feel silly XP I figured it out thanks!

Hi Kitty, thank you for this tutorial-series! It helped me a lot!
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!

@Dorok, to display the labels as a list, you can find the tutorial here http://www.codeislove.net/2014/01/displaying-list-of-labels-on-your-blog.html

@Kitty: Thank you - but I think I didn´t phrase my comment correctly :)
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!

@Dorok, ah my mistake. Yes you could hide the labels beneath the post by adding the Css code. This code goes just above the </style>
.blogger-labels {display: hidden;}

@Kitty - Thank you sooo much!! :)

@Kitty: somehow it doesn´t work with my code. Thank you anyway :)
PS - you don´t have to "approve" this comment :) just wanted to let you know :)

@Dorok, sorry, my mistake once again. The code shouldn't be display: hidden; it should be display: none;

I'm so sorry about that. Cheers

@Kitty - you are amazing! Thanks again!! I will link to your website on my blog :)

kak, macam mana nak letak list untuk tag/label ya untuk classic template?
saya guna template yg ini:
http://www.blogskins.com/download.php?sid=404476

saya dh cuba coding, tapi tak menjadi :(

@Hm Amethyst, dah cuba tutorial ni? http://www.codeislove.net/2014/01/displaying-list-of-labels-on-your-blog.html

Copy and paste codes from tutorial tu into wherever you want the labels to appear. :)

Helo, Your blog is very usefull.
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

@Satoe, for Classic Blogger, there is no option for pages.

Hello!

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.

@Veeyah, please email me the screenshot or copy of the codes so I can take a look where it went wrong.

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.

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  
Commentators: Anonymous Chazz, Blogger Unknown, Blogger Kitty, Blogger 小玛丽 , Blogger Kitty, Blogger The Lollapalooza Shoppe, Blogger Kitty, Blogger Nadya Nyobi, Blogger Kitty, Blogger , Blogger Nadya Nyobi, Anonymous Anonymous, Anonymous Anonymous, Blogger Unknown, Anonymous Anonymous, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Unknown, Blogger Kitty, Blogger Unknown, Blogger Kitty, Blogger Veeyah, Blogger Kitty,
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!
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

Labels: ,



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 =.=

Anonymous Anonymous said on April 23, 2013 at 5:30 PM
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 :)

Will this work for the newer blogger site set up? You can add pages now and write code for these pages.

Anonymous Anonymous said on July 8, 2013 at 1:51 AM
I feel silly XP I figured it out thanks!

Hi Kitty, thank you for this tutorial-series! It helped me a lot!
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!

@Dorok, to display the labels as a list, you can find the tutorial here http://www.codeislove.net/2014/01/displaying-list-of-labels-on-your-blog.html

@Kitty: Thank you - but I think I didn´t phrase my comment correctly :)
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!

@Dorok, ah my mistake. Yes you could hide the labels beneath the post by adding the Css code. This code goes just above the </style>
.blogger-labels {display: hidden;}

@Kitty - Thank you sooo much!! :)

@Kitty: somehow it doesn´t work with my code. Thank you anyway :)
PS - you don´t have to "approve" this comment :) just wanted to let you know :)

@Dorok, sorry, my mistake once again. The code shouldn't be display: hidden; it should be display: none;

I'm so sorry about that. Cheers

@Kitty - you are amazing! Thanks again!! I will link to your website on my blog :)

kak, macam mana nak letak list untuk tag/label ya untuk classic template?
saya guna template yg ini:
http://www.blogskins.com/download.php?sid=404476

saya dh cuba coding, tapi tak menjadi :(

@Hm Amethyst, dah cuba tutorial ni? http://www.codeislove.net/2014/01/displaying-list-of-labels-on-your-blog.html

Copy and paste codes from tutorial tu into wherever you want the labels to appear. :)

Helo, Your blog is very usefull.
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

@Satoe, for Classic Blogger, there is no option for pages.

Hello!

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.

@Veeyah, please email me the screenshot or copy of the codes so I can take a look where it went wrong.

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.

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, or Moneybookers.

However, if you choose to pay via (international) bank transfer, be 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

Kitty. 29. Blogger, web design hobbyist, compulsive shopper and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.

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.

Categories/Labels

Past layouts

These are the layouts that have been used on Codeislove.net previously.

Wooden board

Layout #1

Dark chic

Layout #2

Royal crimson

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.

Blog Advertising - Advertise on blogs with SponsoredReviews.com

Business 2 Blogger

banner

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

Related Posts Plugin for WordPress, Blogger...