Make Money Online Queries? Struggling To Get Traffic To Your Blog? Sign Up On (HBB) Forum Now!

HOW TO: Create Blockquote Using HTML Code

CONNECT WITH HBB ON SOCIAL MEDIA

I hope you are familiar with block quotes. They are nothing but some sections of texts used for highlighting quotes from other sources. They are mostly indented from the blog post and they have different background color or text size and color.

Blockquotes

Blockquotes

Why Should I Use Blockquote In My Blog Articles?

If you are quoting about some matter from another blog, then it should be different. Your readers should feel the different.

  • Quotations can be easily recognized from the main section of your posts.
  • They can enrich and complement your theme.
  • Your readers will get to know that those are special lines.

How To Design My Own Block quotes?

Most of the wordpress themes have cool block quotes, but for some it just indents the quote and changes the font size and color.

In this tutorial we are going to create blockquote using HTML code alone, without messing the stylesheet.

Actually this tutorial is quite simple and of course, the blockquotes are also simple but effective, because Simplicity is Essential.

1. Changing the Background color with some text formatting

Coding For Yellow :

<p style=”padding: 5px; background-color: #FFFF99; border: dotted 2px #FF9900;”> Text Here</p>

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

READ
Win $60 In Cash By Participating In The Contest At Technogati

Coding For Blue :

<p style=”padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;”>Text Here</p>

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

2. Without Changing The Background Color With Text Formatting

This is a cool alternative for above mentioned block quote. This creates indent from the main blog post. This one uses no image but satisfies the look of an image.

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

Coding :

<b style=”float: left; font-weight: normal; font: 14px/22px arial; margin-top 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #666666;”>Text Here</b>

Note : This Tutorial is compatible with Blogger and WordPress blogs. If you are familiar with HTML you can use your own codings to edit and customize.



By

CEO and Founder of Slashsquare, Indian Blog Network and Web Consulting Media. HBB is a part of Slashsquare Network. I'm a Tech Blogger, Striving Entrepreneur, Atheist, and Proud Indian. Catch me on Facebook and Twitter.

  • My Website

Want to discuss your queries and interact with experts? You can connect with HellBound Bloggers (HBB) Facebook group for free!

Join HellBound Bloggers (HBB) and get Instant Updates. We'll also notify you with Great Deals, Discounts and other Interesting Tips. We won't SPAM or SHARE your Email Address with anyone.

Thank you for reading! We welcome and appreciate your comments, but at the same time, make sure you are adding something valuable to this article. If you have any serious queries, suggestions or anything related to this article, feel free to share them, we really appreciate that.

But, if your blog comments are a random "Thank you", "Useful Post", or anything that doesn't actually upscale the article, then we'll be removing them and it won't be appeared below. Thanks for understanding and thanks for connecting with us. If you want to give us any feedback or report any errors, you can kindly contact us and we'll revert back soon.

  • Comments
  • Facebook Comments
  • Comments

    Do you have any queries? Want to share something?

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    34 Comments

  • Facebook Comments