Right,

its my district

fashion

welcome to my blog.
if you stumbled upon this you are invited to stay
if you don't want to, click that cute red 'x' in the corner
have a good day.

how.to//blog.skin

Monday, July 19, 2010

How to create a blog skin: a 12-step guide.
Step 1: Choose between a geek and a nerd. Yeah yeah, this thing again. If you chose a geek then you are probably well versed in coding and you will use Notepad (or any text editor). If you chose a nerd you probably know lots of stuff but nothing computer related. So you probably can't create a blog skin cuz Dreamweaver does not have most of the required elements. Adios.
Step 2: Decide on your layout: what you are gonna have on the screen. You could draw up a design plan on a sheet of paper first. How are you going to sort the information? Tabs or no tabs? Any images? Here are a few common/simple layouts:

Step 3: Choose a theme. Although grabbing a theme isn't strictly necessary, it will help you to get hold of ideas more easily. You can choose something as specific as cake, watermelons or muffins, or something as generic as blue, flight or ambience. Always keep your theme in mind.
Step 4: Create a background. If you are planning something complex on the foreground, choose a really simple one, like a pattern or a gradient. If you have something simple on the foreground you can experiment more here.

Step 5: Create any other images you might need. This includes images for the tag board, for the title, a decorative border et cetera. Make sure they fit into your layout.
Step 6: Build your code: Part 1. Code in your structure. All tab bars, nav bars, and div/span blocs are to be put in at this stage. This forms the base where you can build stuff up. Test your site to see if it fits your supposed layout. However, resist the temptation to style your skin first, as we have to add in all the other content stuff first. If you style your skin now and something messes up later, you are in deep sh1t.
Step 7: Build your code: Part 2. Grab all of Blogger's defined elements:

<$BlogItemTitle$>
<$BlogDateHeaderDate$>
<$BlogItemBody$>
<$BlogDateHeaderTime$>
<$BlogArchiveURL$>
<$BlogArchiveName$>

Make sure you know how to use these. Check out somebody's blog skin to see how they are used.
Step 8: Build your code: Part 3. Upload all your images to a reliable source (such as flickr or photobucket, or even tinypic as a last resort). Put in all the images into your code and be sure to test it out. If any of the links are wrong, change them at this stage before cramming in all the other stuff.
Step 9: Build your code: Part 4. Style your skin. Yes, go crazy. Do not use external style sheets, however, because it would be troublesome to upload, especially if you are thinking of sharing your skin on BlogSkins. Remember to repeatedly test your code out, and save multiple copies in case you mess something up seriously.
Step 10: Build your code: Part 5. Add in scripts. This is put for the last because it is the thing that most likely could utterly destroy your work, so SAVE MULTIPLE COPIES!!! If you do not need scripts, all the better.
Step 11: Upload this to a test blog. Try it out and see if the posts and images et cetera work out as they should. If not, try to identify the error and correct it. I find the Firebug addon for Firefox really helpful here cuz you can go to the faulty div itself and see what styling/scripting has been applied to it and made it messy.
Step 12: Once your code works, upload to BlogSkins.com. Share it with the community. Who knows. your skin may become popular! Use it on your blog also, to show off your own skin.

And that's how you create a blog skin.

Labels: How to

10:46 AM

profile

i'm alvin.
i come from hwa chong institution in singapore.
i'm in class 2i2. yes, i'm a sparkie.
i'm 14+ years old; celebrated my bdae on feb 12.
my hobbies r simple: reading, piano, com games.
i like animals, especially ~~cats~~ mudkipz.
enjoy my blog.
thx.

style

links

no links for you.
you cant run away nao.

gifts

gifts....nawt nao i guess. soon. i promise.