HOW TO: Design A Custom Blockquote For Your Blog

Recently, a friend asked me how to put a border around text in the post. There are two ways to do this. One gives you the ability to have different text in different styles of borders and backgrounds, all in one post. And one creates a standard which can be applied to text with one click. The first one is less convenient, though it does give you more freedom, and I have decided to give a tutorial for the second. 
Probably there will be a tutorial for the first method someday, I am just not in the mood at the moment.





HOW TO MAKE A BLOCKQUOTE FOR YOUR BLOG

You may have noticed this little button up there in your post editor:

That, my fine feathered friend, is the blockquote button. On default, it just turns this:



Into this.









Its a subtle difference, usually used if you are quoting something (blockquote) and want it to stand out a teeny bit.

But you could turn that boring text into whatever you want.
Since I do a lot of design tutorials which use code, I use my own blockquote as a syntax highlighter.

Turning this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo sit amet libero viverra fermentum a vel arcu. Fusce id ipsum a orci lacinia auctor. Nullam vel nunc tellus. Maecenas congue tristique neque, id iaculis nibh viverra ut. Donec porta libero dictum, convallis velit mollis, fermentum dui. Vivamus mattis libero eget orci dictum, ac cursus arcu bibendum. Fusce libero mi, tempus nec mattis sit amet, commodo et augue. In bibendum lectus in efficitur ullamcorper. Ut volutpat ac ligula ac pulvinar. Nulla in tincidunt massa. Sed turpis arcu, vulputate non enim id, blandit tristique orci. Fusce tempor gravida sapien rhoncus pharetra. Fusce euismod metus lectus, eu tempus tortor sodales ac.



Into this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo sit amet libero viverra fermentum a vel arcu. Fusce id ipsum a orci lacinia auctor. Nullam vel nunc tellus. Maecenas congue tristique neque, id iaculis nibh viverra ut. Donec porta libero dictum, convallis velit mollis, fermentum dui. Vivamus mattis libero eget orci dictum, ac cursus arcu bibendum. Fusce libero mi, tempus nec mattis sit amet, commodo et augue. In bibendum lectus in efficitur ullamcorper. Ut volutpat ac ligula ac pulvinar. Nulla in tincidunt massa. Sed turpis arcu, vulputate non enim id, blandit tristique orci. Fusce tempor gravida sapien rhoncus pharetra. Fusce euismod metus lectus, eu tempus tortor sodales ac.


But I also use it for quotes, and just text that I want to stand out.


So, to start with, you need to go to your blogger Dashboard>>Template>>Edit HTML
Click in the text editor and press Ctr+f on windows Command+f on mac, to bring up a search box.
Use the search box to find the following code:
]]></b:skin>
Directly ABOVE it, paste the following code:

.post blockquote {
That is the base code. All the styling for the blockquote, is going to go under that. First of all, we can add a border:
.post blockquote {
border: 1px solid #000000;
}
That is going to give you a solid black border, 1px thick:
Now your text is really close to the edges, so we are going to throw some padding in like so:
.post blockquote {
border: 1px dashed #000000;
padding: 5px;
}
And that is going to pull the text away from it a little. I have given it five pixels, and if you decrease the number, the text will move closer to the edges, and if you increase it, the text will move farther away.

Now I am going to do the three basic text formats: font, size, and color.
.post blockquote {
border: 1px solid #000000;
padding: 5px;
font-family: 'times';
font-size: 13px;
color: #ff0000
}

And now we have Font: Times, Size: 13, Color: Red or #ff0000
Now, last but not least, we can put a background on it.
.post blockquote {
border: 1px solid #000000;
padding: 5px;
font-family: 'times';
font-size: 13px;
color: #ff0000;
background: #75a8ae
}
Which gives me this rather hideous combination of red and #75a8ae. I trust you won't create anything as disgusting as this.
So there you have it. As you can see, the border is growing rather hard to see, so if you are doing a darker color for a background, you would want to make it more than 1px. Also, if you change the border style from solid to double, you will need to make it at least 3px wide to look like anything.
If you are not sure of the color you want, or its hex code, I recommend http://www.color-hex.com/ for that sort of thing.
Another thing you might not know the code names for, are different border styles.
For a list of Border Styles, look HERE

That concludes things. To use the blockquote, when you are writing your post, just select the text you want to put in the block, and click this button right here:


Do Enjoy!




 photo theauthor_zps8356b86b.png

FACEBOOK   GOOGLEPLUS   PINTEREST   TWITTER

No comments:

Post a Comment

I should be most pleased if you would leave a comment. I do so love reading them and hearing what you think.
(all of it, I want to know everything you think about....wait no, that's creepy)