Blog Design From Start To Finish 'The Modern Fairy'

Hey there lovelies! Even though we might not want to admit it, the blogging world has a habit of judging a book by its cover - so the appearance of your blog is very important. Coming up with the design of your blog can be a very stressful process, so hopefully this tutorial will give you some design tips and pointers. I created a blog purely for this tutorial, called 'The Modern Fairy' to illustrate the idea of the blog - in this case a cute and playful look. The changes I made to the blog are very simple and easy but they help to make the blog more appealing without having to buy a theme or play around too much with HTML. Here's a step by step transformation, starting off with Blogger's Simple Blog template:  

TEMPLATE ADJUSTMENTS

1 - First off go to Template > Customise >Adjust Widths. As it stands the blog width is too small so change it to 1050px, and then change the sidebar width to 300px.

2 - Go to Advanced > Page Text and change the font to Josefin Sans and change the size to 14px. 

3 - Next change the link colour to #ff9bb1 (pink) and the visited colour to #080808 (black) and finally the hover colour to #ffffaf (yellow). 

4 - Change the post title font to Covered By Your Grace and change the size to 36px.

5 - Change the Date Header colour to #0c0c0c (black) and the background colour to transparent. 

6 - Change the gadget font to Covered By Your Grace and change the title colour to #ff9bb1 (pink), and the font size to 16px. 

7 - Go to Post Footer and make the Background and Shadow Colour transparent.

LAYOUT ADJUSTMENTS/ADDING GADGETS

1 - Add the pages gadget and bring it below your header, to centre your page list, use the code here [x] and to get rid of the grey border, use the code here [x]. Go to Template > Customise > Tabs Background and change the Selected Colour to #fff2cc (yellow). 

2 - Add a picture of yourself (optional) with the image gadget, and place it at the top of your sidebar. You have to add a title for the image, so I suggest something like 'Vicky, 18, London' - that instantly introduces you to your reader.

3 - Add other gadgets (as many as you want) but don't make things too cluttered!

CREATING A HEADER

1 - I created the header for this design in Polyvore using the Neue Helvetica Ultra Light Font and adding paint splashes (found in Effect and Textures) in pastel colours. Then I zoomed out and screen-shotted to create a header. Polyvore is a great way to make your header if you don't have any design software of your own. You can bring your header to the centre with this code [x]. This header is pretty simple and only took a few minutes to make.

ADDING SOCIAL MEDIA ICONS

1 - For this design we'll be using the free social media icons from HopefulHoney that can be found here [x]. Read her tutorial here [x] to see how to instal them. In the html code, I suggest making the images smaller - I changed the width and height to 50 and placed the icons underneath the picture of myself.  

FINISHED LOOK

Hope you found this helpful! Comment below and tell me what you think. Would you want me to do another one of these posts? 

Also, make sure you check out hopefulhoney and icanbuildablog!