Create a Personal Blog Skin

Blog skins, also called blog themes or blog templates, provide the look and feel for your blog. Most blogging software comes with a library of pre-built skins that you can choose from, and an online search will uncover more that were created and distributed independently. Creating your own skin can be difficult, especially when you're starting out, but with some patience and the help of pre-existing skins, you'll be able to create a design for your website that is both striking and unique.

1. Step 1

   Select a blog skin from existing options. You'll use this as your \"base\" template, for two important reasons. First, examining it will teach you a lot about how your blogging software's skins are designed, which will allow you to tweak them more easily. Second, blog skins usually require a fair amount of underlying code built in. Using a pre-existing template as a base will allow you to avoid worrying about the foundation and just concentrate on the design.

2. Step 2

   Examine the code your blog skin is built with. If you're using Blogger, you can check out the template by logging into your dashboard, selecting \"Layout,\" and then selecting \"Edit HTML.\" With WordPress, log into your dashboard, select \"Appearance,\" and then select \"Editor.\" (Note that this is only available if your WordPress blog is on your own domain; if you're using wordpress.com, you must choose from existing themes.) On Tumblr, click \"Theme\" and then select the \"Use custom HTML\" option. On TypePad, select \"Design\" and then select \"Change Layout.\"

4. Step 3

   Edit the style sheet inside the HTML code to design your own skin. Style sheets exist inside the <style> and </style> tags and usually take up most of the top half of the document. (In WordPress, style sheets exist in their own document, called \"style.css\".) Style sheets are written using CSS, a language closely related to HTML. CSS is simple and intuitive, but it takes some getting used to. Basically, CSS allows you to write certain rules (like \"font-family:Arial;\" or \"background-color:blue;\") for different sections of your site. The existing style sheet should provide you with plenty of clues about how to format your rules. Try making small changes to see what works. For example, change all instances of one font with another, save the document, and check out your blog to see how it looks.

5. Step 4

   Change the background of your blog. This is relatively simple and usually requires you to only change one line of code, and goes a long way in making your blog look unique. First, find an image that you want to use as your background and upload it to an image hosting site such as Photobucket (see Resources below). Write down the URL address of the image. Then, in your style sheet, one of the very first sections should be labeled \"body {\". Underneath it, one of the rules listed should be \"background-image\" or \"background-color\". Delete that rule and instead write: background-image:URL('yourimageURL') GO Replace \"yourimageURL\" with the actual address of the image. Then save the document and refresh your blog to see how it looks.

6. Step 5

   Keep experimenting with the style sheet to find new and creative designs for your blog! To learn more about CSS and style sheets, see Resources below.

Posted in: Blogging