Sideblogging, across the universe..
Hi all,
Okay the title is a bit a bit dodgy (from "Startrecking", by The Firm), but what the hey..
As you may have seen, I stuck a side blog thingy on here a few days ago. Now I'm not entirely sure to what purpose it will serve yet, but that shouldn't stop me.
I've seen more than a few comments regarding sideblogs. One that appears often is the fact that once you sign up, it states that..
.. check out the last line??? "Do what with classes in my what??" Hands up, if you got that far and decided, "well it works, and I can always add a bit of HTML to make it pretty".
Of course most people who blog through a purpose built medium such as blogspot do so because all they need is to be able to type, and can run a blog without knowing anymore than the basic layout of a keyboard, let alone how to code web pages.
Well to demonstrate the relative ease with which you can do this, I've "Created classes" in my CSS to show you how it's done. Below is the code that I've used for my own sideblog.
To begin with, CSS stands for "Cascading Style Sheet". This is basically a site wide standard that keeps all your text, layout etc. the same over the whole site. When you type your posts to your own blogs, I'm sure that you've used the HTML codes to bold your text, or to change the size of a word or two. What css does is to cut out many of these local commands by adding them to the styling of the page. Right click on your own blog, and you will find the css code between the {style type="text/css"} and {/style} tags.
As a side note, and a handy hint, when adding your own custom styling, look for the closing style tag (/style) and put your styling immediately above it. This way, you'll find it again quickly if you wish to change anything. Also, you can see that I've inserted an opening and closing note to it, so I know when I've found it. To put invisible comments in your styles, just..
*/put your text inside an asterix and a forward slash*/
.. and then close with the same.
It's a simple enough task to add the areas to be formatted, to your css and then just insert any styling that you want. The corresponding formatting has already been added to your sideblog template (where you fill in your sideblog text, title etc.) but you can't see it. Don't worry about it.. :)
The first one you add will be the ".sideblog" class. This is where you can control the overall size, shape colour etc of your sideblog area. You start by typing..
.sideblog
then you insert as few or as many styling commands as you want to. The formatting is surrounded by curly brackets {}. Inside these you can describe background color (this stays transparent if you don't mention otherwise, keeping your original background color), borders size etc. You can see that I've designated the height of the sideblog area. I've then put in an overflow command. This means that I can add lots of text, and if it becomes too large to fit in the box, it will automatically create a scroll bar. This keeps the size to what ever you want it to be, to fit with your overall design.
The next three classes are all designed to control the formatting of the text that you actually see. Although it is probably obvious, these are for the title of your post, ".sideblogtitle" The date and time ".sideblogdatetime" and the body of text that makes up your post ".sideblogpost".
You do exactly the same as above, except that this time your are defining the text colour, it's size, font and weight. There are many things you can do to text to make it stand out. At the bottom I have placed a couple of links to help you with all this, but I'm happy to answer any questions you may have. I'm not an expert at this, but I have been at it long enough to find most of the info I need.. :)
CSS Tutorial Site. This will explain just about everything you need to know about Cascading Style Sheets. Follow the links in the left hand menu to check out all the various aspects of styling.
Colour Chart. All colours are written in hexadecimal form (although for the basic ones you can just write the color) and as you can see from my own example are always prefixed by a #.
So, what are you waiting for.. lets see those pretty sideblogs come to life. Leave a link in the comments so I can check them out. I might nick your ideas. :)
And please don't be afraid to ask for help, that way I'll get better at this by looking stuff up occasionally.
Cheers
Liam
Disclaimer. The above works, but please copy and save your template, just in case you go wrong somewhere. And don't be scared off by this comment, you can't really go wrong, it just covers my bottom from hoards of bloggers with broken sites, kicking my door down in the middle of the night..
Okay the title is a bit a bit dodgy (from "Startrecking", by The Firm), but what the hey..
As you may have seen, I stuck a side blog thingy on here a few days ago. Now I'm not entirely sure to what purpose it will serve yet, but that shouldn't stop me.
I've seen more than a few comments regarding sideblogs. One that appears often is the fact that once you sign up, it states that..
Your Sideblog will be wrapped in 4 tags:
1. DIV class='sideblog' for overall styles
2. SPAN class='sideblogtitle' for post titles
3. SPAN class='sideblogdatetime' for the date/time
4. SPAN class='sideblogpost' for the post body
Create classes in your CSS and you're off and running!
.. check out the last line??? "Do what with classes in my what??" Hands up, if you got that far and decided, "well it works, and I can always add a bit of HTML to make it pretty".
Of course most people who blog through a purpose built medium such as blogspot do so because all they need is to be able to type, and can run a blog without knowing anymore than the basic layout of a keyboard, let alone how to code web pages.
Well to demonstrate the relative ease with which you can do this, I've "Created classes" in my CSS to show you how it's done. Below is the code that I've used for my own sideblog.
/* Start of Sideblog Styling ----------------------------------------------- */ .sideblog { background-color:#FFFFFF; border-style: outset; padding: 5px; height: 320px; overflow: auto; margin-bottom: 20px; } .sideblogtitle { text-transform: capitalize; font: bold; font-size: 85%; color: #ee0000; } .sideblogdatetime { color: #0000ee; font-style: italic; font-size:62%; } .sideblogpost { font-family:"times new roman"; font-size:90%; } /* End of Sideblog Styling ----------------------------------------------- */ |
To begin with, CSS stands for "Cascading Style Sheet". This is basically a site wide standard that keeps all your text, layout etc. the same over the whole site. When you type your posts to your own blogs, I'm sure that you've used the HTML codes to bold your text, or to change the size of a word or two. What css does is to cut out many of these local commands by adding them to the styling of the page. Right click on your own blog, and you will find the css code between the {style type="text/css"} and {/style} tags.
As a side note, and a handy hint, when adding your own custom styling, look for the closing style tag (/style) and put your styling immediately above it. This way, you'll find it again quickly if you wish to change anything. Also, you can see that I've inserted an opening and closing note to it, so I know when I've found it. To put invisible comments in your styles, just..
*/put your text inside an asterix and a forward slash*/
.. and then close with the same.
It's a simple enough task to add the areas to be formatted, to your css and then just insert any styling that you want. The corresponding formatting has already been added to your sideblog template (where you fill in your sideblog text, title etc.) but you can't see it. Don't worry about it.. :)
The first one you add will be the ".sideblog" class. This is where you can control the overall size, shape colour etc of your sideblog area. You start by typing..
.sideblog
then you insert as few or as many styling commands as you want to. The formatting is surrounded by curly brackets {}. Inside these you can describe background color (this stays transparent if you don't mention otherwise, keeping your original background color), borders size etc. You can see that I've designated the height of the sideblog area. I've then put in an overflow command. This means that I can add lots of text, and if it becomes too large to fit in the box, it will automatically create a scroll bar. This keeps the size to what ever you want it to be, to fit with your overall design.
The next three classes are all designed to control the formatting of the text that you actually see. Although it is probably obvious, these are for the title of your post, ".sideblogtitle" The date and time ".sideblogdatetime" and the body of text that makes up your post ".sideblogpost".
You do exactly the same as above, except that this time your are defining the text colour, it's size, font and weight. There are many things you can do to text to make it stand out. At the bottom I have placed a couple of links to help you with all this, but I'm happy to answer any questions you may have. I'm not an expert at this, but I have been at it long enough to find most of the info I need.. :)
CSS Tutorial Site. This will explain just about everything you need to know about Cascading Style Sheets. Follow the links in the left hand menu to check out all the various aspects of styling.
Colour Chart. All colours are written in hexadecimal form (although for the basic ones you can just write the color) and as you can see from my own example are always prefixed by a #.
So, what are you waiting for.. lets see those pretty sideblogs come to life. Leave a link in the comments so I can check them out. I might nick your ideas. :)
And please don't be afraid to ask for help, that way I'll get better at this by looking stuff up occasionally.
Cheers
Liam
Disclaimer. The above works, but please copy and save your template, just in case you go wrong somewhere. And don't be scared off by this comment, you can't really go wrong, it just covers my bottom from hoards of bloggers with broken sites, kicking my door down in the middle of the night..
posted by Liam | 12:40 PM
<< Home