How To: Design Your Blog
I thought I would do a post on designing your blog, as I have had a lot of people asking me how I designed and set mine up. If I'm honest, I'm still not 100% happy with my blog design, however I am really happy with some aspects of it... so I am going to share with you, how I did these aspects of my blog. 

Header 

The first thing I wanted to change was my header! I hated the fact that it was on the left of the page and also I wanted to have my own 'logo'/ brand image as my header. So I used http://www.picmonkey.com/ to create a header. This website is by far the best for editing, making blog buttons etc. and it is so easy to use and very self explanatory.  


  • Once you have made your header, you go onto the 'Layout' Page on Blogger and click on the 'edit button on the header... 



  • Then click on the 'Choose File' button to upload your header. Then click where you want your header to be and then click save :) It's as simple as that!  
If you want your header to be in the centre then follow the next steps: 

  • Click on the 'Template' button on Blogger, then click 'Customise'. 

  • Then click 'Advanced' and scroll down to 'Add CSS'.



  • Now to make your header go in the centre add the following html into this space. 
#header-inner {
background-position: center !important; 
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

  • If you want your image on the right and the title on the left, then add this html code instead: 
 #header-inner {
background-position: right !important; 
width: 100% !important;
} 
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

  • If you want your image on the left and text on the right, then add this html code:
#header-inner {
background-position: left !important; 
width: 100% !important;
} 
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}



  • Once you have added the html code you want and you're happy with your header, click 'Apply to blog'. 


Aligning your pages

  • If you want your pages centred like mine, all you have to do is go to 'Add CSS' again and add the following html code: 
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

  • Then click apply to blog again :)
Social media buttons


  • If you want social media buttons like mine, then you need to visit this amazing blog: http://www.carrieloves.com/2012/12/free-social-media-icons-updated
  • Everything you need to know is over on her blog and I found it so easy to use.... her blog was a lifesaver for me because she explained everything so clearly, which made it easier for someone who is not very good at technology! Thank you Carrie! 
I hope some of these little tutorials helped! I would love to try and help more but I need to learn all the skills for myself haha :) 

Comment below telling me if you want more posts like this, and what you would like to see on them :) 

Comments

Post a comment

Back to Top