Sunday, January 13, 2013

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.


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 }


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 :)


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.


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; }


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 



Kristina Torrejon said...

Love the new look!! You're so creative! :) I pinned this post to refer back to...I'm the same way as far as needing to switch things up every couple of months! :) xoxo

Sheri said...

Great post! I too plug away on blogger, trying to find some new, fresh ideas. It isn't easy! Thank you for sharing all of your research and hints with us. Awesome!!!

Sarah said...

This is great! I'm sure there was a learning curve, but you have really mastered this. I have been wanting to remove the border around photos since I started blogging...and with your help I did in about 30 seconds. Thanks! Any book recommendations? I would love to do this for myself (I have blog design ADD, too) but don't know where to begin.

Gina said...

such great tips...I have been wondering how to remove that border from photos. thanks!

Kylie Kreikemeier said...

Love the new look, Lish!! Hope you're doing well!! I am working on a post just like this!

Chris said...

Hi Lish, just stopping by to say how delightful your blog is. Thanks so much for sharing. I have recently found your blog and am now following you, and will visit often. Please stop by my blog and perhaps you would like to follow me also. Have a wonderful day. Hugs, Chris

Amour Mah-Meneses said...

This is great - thank u! We found you via The Foley Fam Sunday Funday. Share the love <3 and check us out too. we are now following you via bloglovin

Debi and Charly @ Adorned From Above said...

Hi Lish,
We just wanted to let you know that this post is being featured at this week at Wednesday's Adorned from Above Blog Hop. Thanks so much for sharing with everyone. We really appreciate it.
Have a great week.
Debi and Charly

Fully Help said...

Excellent blog!. I was looking for html tutorials and I landed your website through google search. I found your blog very interesting.