iBlogged: Changes in the blog & CSS

There are new accessories on the blog. See the change?, Ok lemme give you a tour. :)

Looking good?

Above the post, below the title is my fish tank. Yes, a fish tank, play with then, feed them by clicking. :)

I learned how to show just excerpts for posts on the home page, and now you will have to click on the post's title to view the whole post. :)

I added Facebook Like and
Share buttons to every post, both above and below the post. (Had a lot of trouble doing that, but loved what I learnt from it). Once you like the post, a pop up from the like button itself lets you share the post on Facebook, try it.

I also added the Floating share buttons for twitter and Facebook. Look at the left bottom. It was easy after the experience with the previous like buttons.

If you need any help in adding any of these to your blog or website, just comment, I will be more than happy to help.

Well, the tutorials are always available, but I like to learn more & tweak around, and thats what took me so much of time. And all of these requires changes to be made to the template of the blog, & there came the CSS.

Why can't things be simple?

I have always been kinda scared of CSS(Cascading Style Sheets). I knew syntax and stuff, but lazy that I am, I chose to edit directly through HTML tags. Since all the websites I ever had to write had on average 5 pages & didnt require any fancy stuff, it was never much of a trouble.

Ok for those who have no Idea at all, When you write webpages plainly in HTML, you need to write code for every individual formatting change you make. So, lets say you have a you want to change font for a part of the text and switch back to the old font after that, the code will look somewhat like this:

This is how you change font in HTML 
Now the font is changed 
I chaged the font back to arial

The result would look like this:

This is how you change font in HTML

Now the font is changed

I chaged the font back to arial

So on a large scale this becomes tedious, and then to make the whole of the website look the same, you need to remember every change you made, and every font, so that when you change it looks uniform and not like some browser circus. :P

CSS lets you define different format settings, and then you just need to use those predefined settings to format the pages. Lets see how this works for the same example.

The code would be:

<style type="text/css">/
p.text1{font-family:"arial";}
p.text2{font-family:"courier"}
</style>

The above code will reside between <head> & </head>

And then,

This is how you can change font with CSSNow the font is changedI changed the font back to arial

The result would be the same as the first example.

This is how you change font in HTML

Now the font is changed

I chaged the font back to arial

Here the 'text1' and 'text2' can be looked upon as variables which stored values of font, when the HTML code was processed it referred to the style sheet and showed the text in the font defined there.

The real usability is in context of maintenance, or when you are reformatting your webpage which has lots of pages (and still don't want them to look like 'Browser Circus' :P). You can make a separate CSS file and link them to the pages, so just one change in the CSS file will be reflected by all the pages. Saves a lot of time, believe me I have spent whole nights just to reformat 3~4 webpages with HTML formatting.

Or like blogpost, you can make templates for the webpage using CSS.

You can find a great CSS tutorial here at w3schools.

CSS is a very powerful tool if you spend a few hours to learn how it works. I was just lazy to keep avoiding it.

Now you get it??

Changes in the blog & CSS

5 comments: