Sunday, September 9, 2012

How I finally made my blog design reflect ME: tweaks and tips!

So, you may have noticed that I have a new design? It might have been the post about it and the unsubtle tweeting about it that clued you in. Maybe. When I was a new(er) blogger (read last September) my design skills were zero.  I stared at other people's blog design and wondered how they managed to create the artistic wizardry I saw on my screen. Want proof? Check out my first blog here. This was what I would define as 'limited' knowledge.

I'm not an expert (yet....), but I learnt a whole lot about design tweaking from googling for tutorials. I thought some of you might want to know the process I went through to make up my new design. 

I haven't included links for how to make buttons or social media icons, because i already know how to do that. There are plenty of great tutorials out there, most of which were found by my blogging buddy Anja.  She compiled an epic post with lots of starter information in. Find that gold dust here.

So how did I start?

Step one:  Colouring in!
Well, in all honesty I wasn't happy with my original colour scheme. So that was where I had to start. I actually went to my wardrobe first and looked at some of my signature colours. Hey, a blog is meant to reflect YOU right? Well, I figured what I put on my body should be a big clue. Learn more about my random dress sense here.
(My brother is a photo genius....can you spot my blog colours?)
I went to Colour Lovers to decide on a palette. You can make your own, but I didn't. as someone else already had one with the perfect colours. The best thing about this is that you can get the hex codes for the exact shades. Note these bad boys down and then you can just type these into the colour palatte of Picmonkey or whatever design suite you are using. (In Picmonkey just click on the codes and then you can type over them.)
 (|Source)
 Step two:The integrated header.
I have always wanted an integrated header. I like that my social media buttons are in the header now as part of the design feature. It has also meant my link bar is straight. Thanks to Something Swanky I was able to design a blog header using Image Maps. She has a fantastic tutorial on this and other blog design tweaks, like making seperators for your post.

Tip: Make sure you create your image as a PNG (unless a photograph) and check how wide your blog will be before making the image. If you want to play around with widths, then do this before you start. You could end up with a wonky header otherwise.

Warning: One downside I have noticed with this, is if your url for your page link changes then you need to go back and remake your image map. If you have your social media buttons/links seperate from your header, it's a bit less of a hassle to change it all up. If anyone has any advice on this it would be awesome.

Step three: Of course the header installation didn't work.

In blogger you can only install an image as a header. You cannot put in html without tweaking your template code a bit.

Make sure you back up your template before playing with the code.

A blog appropriately called Online Solution, provided a very simple tutorial for how to find and amend the code for your header so that you can put html there instead.
 
Step four:Tidying up my sidebars.
In a wonderful T.V moment I want you to imagine that I have sorted out my sidebars, made my intro pic, section labels and installed all of my widgets. You will also need to imagine that not one of those suckers, despite being the same size, want to sit in a line properly. They were also way too spaced out from each other. Thank goodness the Snap Conference and Southern Speakers had the idea to write tutorials on centring all of the sidebar widgets and how to reduce the gap in between them too. You will need to do a tiny bit of CSS coding here - but don't worry, it's really addictive!

(Source)
 
Step five:A sexy new signature!
 I had a brain-wave while using Image Maps that I could finally have a signature with my social media buttons in it. I found out the width of my post and played around in Picmonkey. No matter how hard I tried, I couldn't get the image map to work in my post template. It just wasn't interactive. After a bit of research I found out that image maps doesn't function in post signatures.
 
If I have saved you nothing else it will be the hours of trying to do this repeatedly. So how did I finally sort out my signature. Well, I chopped it up into it's componant parts and then uploaded it to Photobucket. I then copied and pasted the html code in of the signature in order of the componant parts. When it came to adding the social media buttons, I used the same code as you would installing them in your sidebar. And what do you know? It worked!
 
You don't even really need to fiddle with template codes. If you go to Settings/Posts and Comments, it  is possible to add in code which will then appear in all of your blog posts. Awesome huh?
 
I hope this has helped you out!
 What are your favourite design tips? Have you ever had a design disaster? Do you have a favourite blog designer or prefer a DIY approach? I would love to hear your tips...especially if you know how to make scalloped edges down the side of your main posting area. 

Photobucket Photobucket PhotobucketPhotobucketPhotobucketPhotobucketPhotobucket

12 comments:

Megan said...

Thanks for this post! I had no idea what I was doing either when I first set up my blog...still don't really. It took me forever to set up what I do have. I plan on redesigning my blog in a few weeks so I will be pinning this post for later! :)

Breenah said...

I will definitely bookmark this for later :D

Bethany Lee said...

Thanks for sharing all these tips! :)

meet.make.laugh. said...

Great tips Rosie! Thanks for sharing! I bookmarked a few for later :)

Stone Cottage Adventures said...

Thank you! -Marci

Alyx said...

Isn't teaching yourself this stuff such a pain, but then so worth it once you finally get it?! I remember being SOOO frustrated when I first started!

Looks great, Rosie!

A Proverbs 31 Wife said...

I love how it all looks Rosie!
I remember once I was trying to change something and I must have deleted the wrong code (WordPress) and it broke my site! Nothing came up and I was in such a panic! Fortunately a call to the host fixed that problem. :)

Evani Gatsby said...

Love the new design and the idea of learning from each others journeys! Great tips Rosie! :)

Cocalores said...

Wowza, that sounds like a lot of work! Kudos for figuring it out! I know I wouldn't have been able to - my brain cells are scrambled just by reading this ;-) But I really, really love that design and especially the signature =)
And thanks for the shout out, you're awesome! xo

Jess @ Spool and Spoon said...

I wish I had the same dedication and ability in regard to my blog design. While I did mine completely on my own, it's still so basic. You've inspired me to try out creating a signature. Thanks for so many useful tips.

Carol said...

I have just found your blog via Cocalores. And looking into it I keep finding things that I like! I still have no idea what to do with my blog….. but I´m happy to find blogs like Anja´s and yours. I struggled with my design that I sort of gave up. This gives me new inspiration to maybe start over. Thanks!

风骚达哥 said...

20160425 junda
ray ban sunglasses outlet
vans sk8 hi
coach outlet
under armour shoes
levis jeans
ray ban sunglasses
oakley sunglasses
polo outlet
fitflops outlet
fitflops
valentino shoes
lululemon sale
converse sneakers
fitflops
cheap nhl jerseys
ferragamo shoes
rolex watches
canada goose outlet
nike air max
toms outlet
cheap jerseys wholesale
cartier watches
supra for sale
sac longchamp pliage
hollister clothing
vans shoes
adidas nmd
gucci outlet
coach outlet
cheap oakley sunglasses
coach purses
calvin klein underwear
christian louboutin
nike air max shoes
coach factory outlet
chaussure louboutin
gucci borse
nike cortez
oakley sunglasses
michael kors outlet

LinkWithin

Related Posts Plugin for WordPress, Blogger...