Our First Tutorial On Blog Designing


Before we begin our tutorial proper, let us learn more about these common blog-designing terms:

HTML, also known as Hypertext Markup Language is a language tool for web designers to author source codes to create web pages.

CSS or Cascading Style Sheets is a language tool for web designers on how the HTML is designed or formatted.

JAVASCRIPTS are scripts that enable web designers and authors to design interactive items for the site.

Tags are structured sources that show information about your HTML. Just like the human structure, tags comprise the head, body and foot. This is how the structured layout of your HTML works.




Kick Start


Sign in to your Blogspot Account! Once you have done so, you can proceed to carrying out the instructions below:

STEP 1 : Click on the template found on the navigation tab bar given above.

STEP 2 : Hover down to EDIT HTML on the template.

STEP 3 : Download your FULL Template as a backup to your desktop before making any changes to the HTML

STEP 4 : If there is any problem in the editing or modifications of the HTML, you can always upload it again.

STEP 5 : The Widget Templates Tick Box:

Checked: The expanded mode will appear (ie full view of your source codes)
Not Checked: The collapse mode will appear (ie brief vew of your source codes)



Step 6 : This is another way to clear your editing.

Step 7 : Preview your edit to the codes. DO NOT SAVE yet. If there is any error, blogspot will inform you. See error example.

Step 8 : Once, finalized you can save your template.




Designing And Formatting


Adding CSS To Blogspot

Step 1 : Expand your Widget Templates Tick Box

Step 2 : Search for the following tag in your HTML
or search using CTRL+F and paste the code shown above.

Step 3 : Place your CSS design codes right BEFORE the tag.




Adding Java Scripts To Blogspot


Step 1 : Expand your Widget Templates Tick Box

Step 2 : Search for the following tag:
or search using CTRL+F and paste the code shown above.

Step 3 : Place your JAVASCRIPTS codes design right AFTER the tag.



With that, you have now got to know all the basics.


Create Your Own Fav Icon


Now, let us try displaying a favicon in your blog!

Readers, look carefully at our address bar. Can you see a small icon situated next to the URL? This is how it looks like:



For your information, what you had just seen is not any ordinary icon. It is called a favicon!

Now readers, take note of the following instructions in adding your favicon:

 Select your most wanted favicon, and once you have accomplished that, save the selected favicon as an ‘ico’ file.

 Upload the saved file into a web storage space that CAN accepts ‘ico’ extensions.

 To insert the favicon on your web/blog, search for the head tags :

or search using CTRL+F and paste the code shown above.

 Once found, copy the code below and substitute "YOURBLOGURL" with the URL in your web space where the file is being saved, and place the above code IN BETWEEN THE HEAD TAGS of your blog.



 After copying the code, preview it to make sure the favicon is displayed, (give it a while till your entire page finish with the loading) once everything is set, save your template.

 If it still does not appear, clear your explorer brower’s cookies if you are not sure read more about our review on FREE CC cleaner here.

Are the instructions clear? So what are you waiting for?
Get your address bars decorated with favicons now!
Stay in touch with us for more tips on blog designing.


17 comments:

Apple said...

wow..this is handy for those who wants to start a blog. Thanks for sharing.

modulo6830 said...

modulo6830 was here....ve linked u in my blog.link me too?

NAFASG said...

Hello apple...

Glad u like it! That is wat we intended to do. To educate those who are keen on starting a blog. =)

Hi modulo...

Thanks for the link. will link u back! =)

Daniel Ted said...

Thanks for the tips.

Bobby said...

Thanks Nafa! Your blog is different now. Do you still have a shoutbox?
That is a very unusual side bar!

NAFASG said...

Hi Daniel...

No problem! Just want to share some useful information that would be beneficial for bloggers like us.

Hi Bobby!!

Good to see u here! Unusual? Hmm..yeah coz of the way it displays on our site. But it is good to be different right?

Our shoutbox is still alive. Just click on Our Discussion Board. hope u like our new look! =)

MakeTraffic said...

Hi Nafa,
You have been awarded yet again! Please come to http://projectheavytraffic.blogspot.com/2007/09/jumping-for-joy.html to collect your award. Cheers!

MakeTraffic

Celine said...

hi can you link exchange with me?
http://life-of-blog.blogspot.com/

Joyce said...

Oh gosh, i read your reply over my last comment.. I was getting all teary while reading it! Hehe That's really sweet of you, Nafa. :D TRUE, TRUE & TRUE. Actually i keep getting enlightned by the articles on the Love section. Since i ended up reading all of it, just now. Hihihi. Yeah, we're alright now. Still very much together. :)Awww, thanksss. I deeply appreciate it. Really. :)

LOVE YOU MUCH TOO, SIS! ;)

Alrighty, speak to you soon. Take good care. Nightie night! MUCH LOVE SIS! ^____^

NAFASG said...

Hello SIS!!

Thanks for coming here. Really love to hear the cheerful side of u. And it's so nice to hear your relationship working very well! We're proud of u for handling things maturely and for keeping yourself spirited even when things didn't seem to go your way. Glad to have u as our sis!!! =)

So u like our Love section huh? Ok will come up with more articles on love pretty soon yeah?

Ok talk to u again next time! Have a good night and a good week ahead. We love ya sis! =)

Famous Quotations said...

Your site has won a Blog of the Day Award (BOTDA)

Award Code

Thank you,

famous quotes

192.168.1.1 said...

Hi there! Tks for visiting my site. This is a great tutorial and I have referred quite a number of newbies to this page so they can learn the basics of setting up their own blogs. Thanks so much for sharing. You've been linked :)

Reeda
anakbrunei.org

NAFASG said...

Hello Famous Quotations...

Wow we won an award? Thank u so much! Thanks for having faith in us. =)

Hello Reeda...

Wow great to hear that u find this article so useful that u even referred some new bloggers to this page. So nice of u! Thanks for your support. =)

Sandy G. said...

Hi NAFASG. I love this post! I hope you do a lot more like it. I want to learn as much as I can about changing my blog and html.

Thank you for the nice compliment on my blog. There is still no news on my friend. I'm not discouraged though. I didn't expect anything right away.

~Sandy G.

NAFASG said...

Hello Sandy!

Nice to see u here! Glad that u find this article useful for u. Hope u can learn and apply all these concepts of blogging into your blog yeah? =)

Oh don't mention. We have been thinking a lot abt how u have been doing with your life and whether there are any updates on your friend. Just keep us updated ok? We will gladly help u out.

Til then, take care and have a great week ahead! =)

Mariuca said...

Nafa, I like ur blog layout! :):):) Thanks for this informative article!

NAFASG said...

Hey Marzie...

Thank u for the compliment. And glad u like the article too! =)