5.27.2011

Armchair BEA Day 5: Blogging about Blogging

In conjunction with the Book Blogger Convention that is being held in New York today, the focus of Armchair BEA is on the blogging part of book blogging. I took one look at the list of ideas for today's post, and immediately knew which one I would be doing:

Today, I'm going Techie on you!

So I'm not the most knowledgeable person on the planet, but I sure know my way around Google. I can search for answers to blogging's most difficult questions, and almost always find what I need. Add to that, the years I spent on Myspace as a teenager (before Facebook was cool), and my obsession with tinkering with my blogs, and I know way more about HTML and internet lingo than I should. If that makes you see me as even a little qualified to teach techie things, then good! That's what I'm going for.

I'm not doing a lot here, but I just want to show you one basic thing that you can use in a post:

Quote Boxes

I've had a lot of people ask how to use these, so I figured this would be helpful.
These are also known as "block quotes," and they are the boxes surrounding text that you see in a lot of book reviews. They are a good way to break up the page, and make things look a little neater. This is an example of how I use them:
The blue box is the quote box, and I have used it to surround the book's description, marking it as separate from my review. It's really easy to do this using HTML code, once you understand what it all means. This is the exact code I use:
<blockquote style="background-color: lightcyan; border: 2px solid #666; padding: 10px;">Your Text Here</blockquote>

Quick guide to creating a quote box:
1.) Highlight everything inside the quote box above and Press Ctrl+C to copy.
2.) In Blogger (not sure how to get there in wordpress. Sorry), create a new post and click "Edit HTML" right next to "Compose."
3.) Press Ctrl+V to paste it.
4.) Click "Compose," and you should have a blue quote box.

If you have questions, ask in the comments and I may be able to help you out.


To change the look of the quote box: 
The first thing to understand is to be careful when you change something; all the colons, semi-colons, quotation marks, slashes, and arrows need to stay in the same places. Only the words and numbers should change.

This picture below shows the exact same code as above, broken up into lines.

You don't need to worry about the beginning and end; they will stay the same. Everything else in the code is changeable, and affects some part of the quote box; background-color affects the box color, and border affects the border thickness, etc..


Color
So if you want to change the background color of the quote box, you simply change the color that comes after background-color. In the code I use, the color is lightcyan. You can put any color you want here. For a list of HTML colors, click here and copy the name of one you like.
Edit: You can also use code for the color you want, instead of the color name. Just be sure to include the number sign. Example: #150517
<blockquote style="background-color: lightcyan; border: 2px solid #666; padding: 10px;">Your Text Here</blockquote>
Change only the words in red, and leave anything that isn't red (notice the little semi-colon there?) alone. Replace lightcyan with the color of your choice, which should result in this:
The color I used is green.
<blockquote style="background-color: green; border: 2px solid #666; padding: 10px;">Your Text Here</blockquote>
...or this:
The color I used is white.
<blockquote style="background-color: white; border: 2px solid #666; padding: 10px;">Your Text Here</blockquote>


Borders
Getting a different border is easy, too! Just a change the letter or word that comes after border, and you are set. In the code I use, my border is 2px solid. In other words, it is 2 pixels thick, and a solid line.

I think it might be easier to show you what I mean. The parts in red in each box are the parts I have changed. You can see by the borders how each words affects the border. If you want to change your own border, pick how you want it to look, and use the same word or letter.

And if you have any questions, leave them in the comments and I'll help with what I can.

<blockquote style="background-color: lightcyan; border: 2px solid #666; padding: 10px;">Your Text Here</blockquote>

This is a dotted border.
<blockquote style="background-color: lightcyan; border: 2px dotted #666; padding: 10px;">Your Text Here</blockquote>

This is a dashed border.
<blockquote style="background-color: lightcyan; border: 2px dashed #666; padding: 10px;">Your Text Here</blockquote>

This is with no border.
<blockquote style="background-color: lightcyan; border: none #666; padding: 10px;">Your Text Here</blockquote>

This border is 1px thick.
<blockquote style="background-color: lightcyan; border: 1px solid #666; padding: 10px;">Your Text Here</blockquote>

This border is 4px thick.
<blockquote style="background-color: lightcyan; border: 4px solid #666; padding: 10px;">Your Text Here</blockquote>


One Final Tip:
Once you have your quote box just the way you like it, create a notepad file with the code on it, and save it. This way you don't ever have to deal with this HTML stuff again! Whenever I need my code, I open my file, copy and paste it, and then move on with my post. As they say: Life's too short.... :)


Hopefully this post was at least a little helpful! If you run into any problems, I may be able to help, so just ask and I'll see what I can do.

And finally: Thanks for joining me for Armchair BEA! This week has been so fun, and I met so many amazing people. I'm sad it's over!

19 comments:

  1. This is really helpful! I am seriously having a hard time tweaking mine esp. with the new blogger template. Thanks a lot for posting this! <3

    ReplyDelete
  2. Did you know there is html you can add in your css code in template designer, that when you select block quote while your writing a new post, it will automatically add the quote box?

    I'm saving this though, just in case I ever want to use one that's different from the one I have as a standard for the blog! I didn't think about doing it this way as well!

    ReplyDelete
  3. HTML is not my friend but I'm slowly getting there (very slowly).

    Thanks for the tips!

    ReplyDelete
  4. How do you change the alignment of the book cover to display in the upper left hand corner with the title and publisher information outside of the box? This placement is much more attractive than having everything run vertically.

    ReplyDelete
  5. Great post! You did a wonderful job in explaining how to use quote boxes. I used quote boxes for my armchair BEA tables. It was the first time I used the quote feature and there were things I wanted to tweak, but didn't know how. Now I do and will probably use them more in the future. Thanks!

    Girl Who Reads

    ReplyDelete
  6. SWEEEEET! This is a great and helpful post. I really appreciate this, since I know very little about the technical aspects of formatting, and I rarely have the patience to google-search how to do something (I'm also frequently squeezing reviews in between running off to various assignments).

    Thank you so much!
    PS--I meant to say this yesterday (if I did just ignore me), but I really love the Reading Fever symptoms list at the top :)

    ReplyDelete
  7. Thanks for this! I've been thinking about doing blockquotes for a while, so this is definitely helpful. =)

    ReplyDelete
  8. Great tutorial. Mine is in my template so I don't actually know how to do it this way. This was very helpful.

    ReplyDelete
  9. Um, I abso-freaking-lutlely love this! Thank you so much. I'm totally starring this post. I've always loved the look of these boxes but have never used them. Thanks again!

    Here is my post about blogging!

    ReplyDelete
  10. This is a wonderful post! I love the tips and tricks that I am discovering.

    ReplyDelete
  11. Code libraries whether there's in a notepad file or stored somewhere else are a blogger's recipe book. Great post!

    To blog well you need to know: your topic, your audience and your voice. Come learn more.

    ReplyDelete
  12. This is the question I am asked the most since I use text boxes. You explained it better than I ever could!

    ReplyDelete
  13. You have just solved a blogger mystery for me! Thanks for this post. :)

    ReplyDelete
  14. This is awesome! I've been looking for a guide to block quotes and summaries for ages and you just answered all my questions in one post. You're officially bookmarked for all my future reviews. Thank you so much!

    ReplyDelete
  15. Great tutorial! I use blockquotes quite often but never thought of tweaking the code. Thanks!

    ReplyDelete
  16. Mia: Yeah, the new blogger coding and templates seriously threw me for a loop, too. Glad I could help!

    Jacinda: I had no idea! That will be the next thing I find out how to do. Thanks for letting me know! :)

    LRAtRandom: You're welcome! :)

    Evie: I sent you an email with instructions on how to do this a few days ago. Hope it helps!

    Donna: I'm glad to hear it! I hope you do use them more in the future.

    Birdie: So glad I could help! I totally understand about squeezing reviews in when you have time...I do it too, and it makes it really hard to use up that time doing other research. Thanks for your compliment as well! :)

    Ashley: Glad I could help! Thanks for stopping by!

    Alexis: I'm going to find out how to do that next. I'm really curious about it!

    Jen: You're welcome! Thanks for commenting!

    Kaitlyn: I LOVE your enthusiasm! ...and I'm so glad I could help. :)

    Kristi: Thank you, and thanks for visiting!

    Pussreboots: I totally agree!

    Nise: Glad to know I'm not the only one who gets asked this question a lot. Thanks for commenting!

    Kathy: SO glad I could solve this mystery for you. :)

    Laura: Aw, thank you! I'm glad this helped! :)

    Juju: I do, too. They're so fun to use and they make posts look a lot nicer (IMO).

    Chrisbookaram: You're welcome! I'm glad I could help. :)

    ReplyDelete
  17. Thanks for the informative post...I was able to create the quote box and even change the line style around the box, but for some reason I am not able to change the color inside the box - it just stays white. Any ideas on what I might be doing wrong?

    Thanks!

    ReplyDelete

Thanks for commenting! I read each and every one, and reply as soon as I can :)

Please note: The Reading Fever is an award-free zone. I am very flattered, but comments are all the thanks I need.

LinkWithin

Related Posts Plugin for WordPress, Blogger...