Blog Design-HTML Tutorials & How to's

Do you guys change your blog design up every so often or am I the only one that gets bored about every 2 months or so, LOL? It's been about a week since I implemented my newest design...what do you think? The New Year was calling to me and said it was time for a fresh new look :)

I've mentioned before that I would love to pay someone to do it for me, but in reality I don't have the cash and I would probably be the worst client ever. I would change my mind constantly and they would fire me! Haha! So alas I do it myself.. grunting and groaning through html and using my good pal GOOGLE! But it's a great learning experience, you just need the time and patience!

So for those of you that would like to give your blog a little pizazz, I've rounded up some tips and info to help you out...easier then spending 2 hours researching everything or paying $200 on a design!

First things first, I am self taught in this whole area and while the following methods worked for me, they may not be technically right, but they worked, so who am to complain :) I also am using the Simple Template on Blogger, while researching I noticed that many codes differed slightly with different templates. Also, when working with html, holding down the CTRL key and F key at the same time will bring up a shortcut for finding specific parts of code! All graphics used on my site are designed by me on Photoshop, although similar types of images could be made using other photo/paint type programs!

For a handy list of basic HTML knowledge, check out this post.


REMOVING YOUR HEADER

In your blogger dashboard, go to the TEMPLATE -HTML {back up your blog first!} Use CTRL + F keys and type in ".header-outer", to search for the following code...

/* Header ----------------------------------------------- */ .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; }

Next, add the following code before the closing }

display:none; 

Instead of the top header look, I choose to use a lower header, aligning it with the top of my sidebar, like this...

To add that, go into Layout, and add gadget. Choose the HTML gadget and insert image HTML. Move above your blog post area :)

CHANGING SIDEBAR BACKGROUND COLOR

I used this tutorial to change my sidebar color...have fun with a million color combos :) For a full list of html color codes, go here. For a seamless look, when you are designing your images to place onto your sidebar, make sure the background color is the exact color of your sidebar background.

REMOVE BORDER/SHADOW FROM IN POST PHOTOS

In your blogger dashboard, go to the TEMPLATE-CUSTOMIZE-ADVANCED-ADD CSS. Paste the following code, pressing enter after the last line. 

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { padding: none !important; border: none !important; background: none !important; -moz-box-shadow: 0px 0px 0px transparent !important; -webkit-box-shadow: 0px 0px 0px transparent !important; box-shadow: 0px 0px 0px transparent !important; }

CREATING ROLLOVER IMAGES

A rollover image is an image that changes when the mouse/cursor hovers over it. I used rollover images on all my FIND IT buttons on my sidebar. Head on over HERE to grab the cod. Go ahead and hover over the image below to see it in action...

So that's a wrap...I hope I inspired you to roll up your sleeves and get creative with your blog design, or to perhaps start to think about making some pretty changes :) One thing that I absolutely believe in, is that first impressions do count! 

linking up with 52 Mantels, Live Laugh Rowe, The Foley Fam {Unedited},Adorned From Above