Hey everyone! I talked about doing one of these posts a while ago and never got around to it.If you have a tutorial that you'd like me to cover, comment below or shoot me an email at lukesmommy85@gmail.com!
The most common question I get asked by blogging newbies is "How do you get those cool looking colored blocks?" Those blocks are called Block quotes and I LOVE THEM!!! I use them to highlight certain areas of text to make it look pretty. It also gives your posts a cohesive look and a pop of personality. I change mine to match my design which I'm constantly changing.
This is how a blockquote will look. You can code it different ways. I have my text italicized but you don't have to go that fancy.
They are super easy to use and easy to add to a Blogger or Wordpress blog. The only issue with the Wordpress one, from what I've seen, is that you need to have a purchased theme to make CSS changes. Don't know how true it is. Anywhoo....If you have a Blogger blog, you would follow these directions. (WP users, just shoot me an email)
Log into blogger
Click on Layout
Choose Template Designer below the Save Arrangement button
Click Advanced
Add CSS
You'll paste the code below into that box and hit Apply to Blog
blockquote {
background-color: #ff3333;
border: 5px solid #1d6724;
border-radius: 25px;
margin: 5px 5px 20px;
padding: 25px 30px 5px 70px;
}
These block quotes are highly customizable. I will break down the code and tell you what to do to change it. There are different borders styles to choose from as well from solid, dashed, rounded, border on certain sides...the possibilities are endless and I'll be here all day if I try to explain them all.
The code above is the code I used for my Christmas block quotes. It's red with a green, solid outline and the corners are rounded.
First thing you want to do is pick a background color. I use http://www.rapidtables.com/web/color/RGB_Color.htm. You pick your color and BAM the color is coded for you! You want to go ahead and chose code 6 digit code. Make sure you put the number # symbol in front of it or it wont work.
blockquote {
background-color: #ff5698; (this is a pink)
Then you can choose your border and color. I'm going to go with a dashed style on this one.
border: 5px dashed #6FA5C0;
Next you can choose your border radius. you don't have to use this if you want a square border. I'm gonna go with a slightly rounded edge.
border-radius: 5px;
Then you end it with your margins and padding. If you don't know what these do then don't ask questions...just do it LOL If you know code then you can go ahead and play around with it.
margin: 5px 5px 20px;
padding: 25px 30px 5px 70px;
}
The block quote I just created looks like this
Once you save the code to your CSS, you can go into your post and follow these directions. Click preview once your finished and your block quote should be there.
So there you have it! This is my first Make Your Blog Pretty post and there will be more to come. If you ever need assistance coding your block quotes or how to use them, shoot me an email or message me on Facebook. I am more than happy to help :)
