Monday, 3 August 2015

Customising Your Blog

Recently I decided I wanted to give my blog a makeover however I was adamant that I wanted to do this myself, with the help of various tutorials and resources I have been able to transform my blog. All of the resources I used were free and the majority provided by other bloggers. Therefore, I thought I'd create this post as a shoutout to the kind individuals who shared these tips and tricks, but also as a guide for any of you looking to customise your blog.


Before starting the post I want to say that I would recommend backing up your template before making any changes, in case it does not work correctly.


1.   CHANGING FONTS

I really wanted to change the font of my blog to make it look tidier. I wasn't a massive fan of the preset fonts, so I used a tutorial by helplogger to change the fonts on my template. It covers how to use both google fonts and other font files, but there are so many google fonts to choose from that I went ahead and used this method. I'm currently using Martel for my blog headers and Lato for the main text.

2.   CUSTOMISING THE HEADER

To create my blogger header I found a pattern on google images that I liked. I then used a photoshop tutorial to turn that image into text. The font of the header can be downloaded from here. When I opened the image on photoshop I simply clicked image - image size. I then changed the pixel dimensions to 736 x 200 so that it would be the correct size. Once the image was created I then went onto blogger clicked layout - edit header and uploaded the image instead of the title and description.

3.   THE TOOLBAR

To create the menu at the top of my blog I used a tutorial by xomisse. She has a ton of easy to follow blogger tutorials for pretty much anything you could want to customise. I used this tutorial for the drop down menu. I then used this to add the search bar, and this to add the social media icons. I customised the search bar myself using the code in the tutorial. The social media icons I'm using I also created myself, however I will place some links later on in this post to some lovely free icons.

4.   REMOVING SIDEBAR FROM BLOGGER PAGES

This customisation goes hand in hand with the toolbar at the top of my blog.  When clicking through to the about me page I didn't want viewers to see the sidebar, instead I wanted the page to be full width as I felt it looked neater, to do this I used this code by Blogger Tips Pro.

5.   STOPPING THE 'DISPLAYING POSTS WITH...' MESSAGE FROM APPEARING AT THE TOP OF SEARCH RESULTS

Another customisation that links to the menu bar was editing the template so that the search bar and drop down categories wouldn't display the preset message, and instead the page would look cleaner and fit within my theme. To do this I used another tutorial by xomisse. Which also tells you how to change the message or edit the style of it.

6.   THE SIDEBAR

The sidebar on my blog has undergone a big transformation. I used a tutorial by Brenda to add the dotted line in between widgets. Then this one by Code it Pretty to create my Pinterest widget. The Instagram widget can be found here. Finally I used a tutorial by Bloomin' Rouge to edit the thumbnail size on the popular posts widget.

7.   SCROLL UP ICON

For the back to top button in the right hand corner of my blog I used a tutorial by Carrie. However I customised it slightly and switched the free icon she provides with this one here. This was probably the simplest out of all the customisations and makes my blog much easier to navigate.

8.   REMOVING THE 'SUBSCRIBE TO: POSTS (ATOM)' AND 'HOME' LINKS FROM THE BOTTOM OF THE BLOG

Now this isn't a necessary customisation, but one I wanted to do to improve the overall appearance of my template. To remove the subscribe link I followed another helplogger tutorial. For the home link I used this. I then added a home link to my footer instead.

9.   PIN IT BUTTON

I created the pin it button myself on photoshop, however this tutorial by Spearmint Baby is helpful if you wish to add a custom one to your blog, they also provide some free buttons for you to choose from. On a side note the tutorial says to upload the image to picmonkey. I find it easier to upload the image to a draft post on blogger, change from 'compose' to 'html' and copy the image link that way.


10.   SOCIAL MEDIA ICONS

As promised here are the links to social media icons. Carrie provides simple icons in a variety of colours and sizes and also has a tutorial on adding them to your blog. Geek Fairy provide minimal black circle icons.  Hopeful Honey has beautiful watercolour icons as well as many others, and there's some colourful ones available at Beautiful Dawn. However a quick search on google should bring up a variety of free icons available to use.

Let me know if you have any problems with any of the customisations and I will do my best to help you. I hope this post was useful, feel free to tell me your thoughts on it.

Katie x

Follow me on Bloglovin' | Follow me on Blogger


17 comments:

  1. Some really good tips here, thanks for sharing!

    http://heart-autumn.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Thank you, it's no problem at all. Have a lovely day :-)

      Delete
  2. These are such great tips. Need to keep these in mind!

    Jenn | Jennifer Jayne

    ReplyDelete
    Replies
    1. Thanks! I hope they work well for you if you try them. Enjoy your day :-)

      Delete
  3. Thanks for these tips, they are very helpful!
    Elle x :)
    http://elleandherbeautyblog.blogspot.co.uk/

    ReplyDelete
    Replies
    1. It's no problem at all. I'm glad you've found them useful! Have a great day :-)

      Delete
  4. Lovely pics! I love your blog:)

    www.bloglovin.com/blogs/printed-sea-3880191

    ReplyDelete
  5. Very helpful post, I'm about to try some of these customization now, a quick question first, how did you do the copy right image thing?
    http://officialtashika.blogspot.co.uk/

    ReplyDelete
  6. And another, hoe did you customer the comment section?
    http://officialtashika.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Thanks, in response to your earlier comment if you're talking about the notice that appears when you right click on an image, the tutorial for that can be found at http://www.bloggersentral.com/2012/05/disable-right-click-on-images.html. I simply changed the message to suit my blog.
      As for customising the comments section it was already built into the coding of the template I was using, the only aspect of the comments I have changed has been the font and sizing of the fonts, which you should be able to change by following step one in this post. I hope this helps you

      Delete
  7. Replies
    1. Thanks, I'm glad you find it useful :-)

      Delete
  8. Love this post!

    p.s I absolutely love your blog design :)
    Rachel Coco

    ReplyDelete
    Replies
    1. Thanks so much, your blog is beautiful :-)

      Delete
  9. Great post! Really useful :D I already have some of them but have been looking for something to create a menu. Thanks for sharing!

    http://amarinar.blogspot.com/

    ReplyDelete
    Replies
    1. Thanks, it's no problem at all, I'm glad I could help! :-)

      Delete