HOW TO: Create Blockquote Using HTML Code
- Updated On 13/05/2011
- Author : Pradeep Kumar
- Topic : Design
- Short URL : https://hellboundbloggers.com/?p=2193
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.
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>
Coding For Blue :
<p style=”padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;”>Text Here</p>
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.
<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.
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.
YOU CAN ALSO SEARCH FOR YOUR DESIRED TOPICS:
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.
- Facebook Comments
34 CommentsFacebook Comments