How to... Add a Background to your Book Synopsis in Blogger!

5:32 PM

I've been pretty uninspired to write a blog post recently, hence why my last two posts have just been book reviews, which of course there is nothing wrong with that, but I wanted to write a post that my readers may actually benefit from, that they may learn something from. I was hacking my brain thinking what could I do and I remembered that it took me a while to find out how to add the rounded sort of shadow background to the little synopsis that I leave when writing book review posts, if you're not sure what I'm talking about I mean this:
This little square that is usually filled with the blurb/synopsis of a book. You may not have even noticed it that much or questioned how it got there, but if you want to spice up your review posts this may be a good way to do it.
I know that a lot of people may think its easy and know how to do it straight away but as I am a bit of a newbie when it comes to things like coding, I had to do some extensive research to find this out. I also want you to note that this is a tutorial for blogger so it might not help you if you are on another platform though you may still be able to get some tips. Please also note that this may not be the only way to do it this is just the way that I grasped easily.

First off, what you want to do is go to your blogger homepage and click on template which can be found down the left hand side.


Next you will be greeted with this screen and you want to click customise underneath the "Live on Blog" square.


Next you will be taken to the screen where you are able to edit how your blog looks. Now you want to go to the top of the page where all the tabs and such are, and click on Advanced.

You will then be greeted with a number of options which you can play around with if you wish, but what we want to do is scroll right down to the bottom and click on Add CSS.

This will lead you to an empty white box which you are able to add CSS to, obviously mine is not always empty but for the purpose of this tutorial I emptied it.


What you want to do is add in this code:

blockquote
{
  background-color:#BDBDBD;
  border-radius: 10px; #000000;
padding: 5px;
}

For the purpose of this tutorial I have put the background colour as a light grey. This is the colour that you want the box to be. Incase you are unfamilar with HTML colour codes, this website may be helpful to you as it allows you to chose any colour and gives you the code for it which you then should insert into this code and replace the "#BDBDBD"

In terms of the rest of the code, the padding is the number of pixels you want the text to be away from the edges, you'd really need to play around with this to see what you like best but I have left in the values that I use for mine. (please note that the css will not work unless you press enter and then save)

Now you probably want to know how you actually get to use the box, its very simple. When you create a blog post there is the "blockquote" button, as shown in the image below, you press that and start typing, when you want to stop the text from being in the blockquote press enter.

Hope this tutorial helped in some way and I hope that it was clear and simple enough to follow! Happy blogging!

You Might Also Like

2 comments

  1. Thank you for putting this up, ive been looking everywhere for how to do this and its just confused me. x

    ReplyDelete
    Replies
    1. No problem! I hope you understand it, I tried to make it as simple as possible for newbies ^^

      Delete

Readers

Subscribe