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.

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.

Other Interesting Articles From Design

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.

  • Comments
  • Facebook Comments
  • Comments

    Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    34 Comments

    • Plessey @ Barcode Generator

      You are right Pradeep – you made it very simple! This is very easy to understand for beginners… I only have question about using the colors for background : If I understand correctly, #FFFF99 is code for yellow color. Now, where can I find codes for other colors than blue and yellow?

    • Gulam Ali

      Thanks for the effort you took to expand upon this post so thoroughly.
      Why valid html code is important to your web site’s search engine optimization efforts and consequent high rankings! Such invalid html codes… A single missing bracket in your html code can be the cause your web page cannot be found in search engines… Providentially, there are free services that allow you to check and fix the validity of your html codes.

    • Domain name registration

      I hope this article will encourage more bloggers to turn there blog into a do follow to increase the traffic of there blogs.

    • Domain name registration

      Thanks for the nice tutorial, it is a nice way of using blockquote without CSS.

    • Money from blogging | SEO for blogger

      nice article. Do you have coding for more colors ?
      .-= Money from blogging | SEO for blogger’s last blog…Ten Tips To Making Blogging = Money =-.

    • Anup@Hack Tutors

      Now i know that block quotes is one of the blog’s beauty…You can see the example in my blog 😉

    • Anup

      i am trying to customize blockquotes with best colors:)

    • Senthil Ramesh

      I like the second point. The first point is like not-a-so-cool technique. But the second one resembles as such the Block Quote comes with many themes.

    • Sunny Bhasin

      Thanks Pradeep 🙂
      I had a question in the second method of creating block quote 🙂
      Text Here
      As the above code will generate the normal block quote with it’s default image i.e. a Straight vertical bar then the text ,What if i want some other image instead of the black vertical bar???

    • SEO Tips for Blogger

      this is a very well writen article but i don`t understand why not use css

    • Garry

      Great ways to do such a “required” thing.I found this really useful.Thanks indeed.Probably I needed this stuff really,thanks !

    • SriGanesh

      good article. so can we use this for Share this and put our soucial icons in it. within the quoates. 😆

    • Ricky

      Nice sharing dude. I use it using css, but it will come in handy

    • sham

      Nice info dude…I too use it..

    • ViewCheapest

      It is really helpful. I can try different colors and styles.

    • Fatin Pauzi

      Wow, that’s a great alternative. Thanks for sharing. 🙂

    • Surender Sharma

      Thank you Pradeep.

    • Suneel

      Hey this style is pretty much similar to what a squidoo lens requires.

      I had worked on a few lenses earlier this year and found them to be highly effective.

      Great post.

      • S.Pradeep Kumar

        Hey nice dude.. I like Squidoo ! Maybe I can share some doubts with you ! 😉

        This tutorial is triggered by Squidoo ! 😀

        • Keith Dsouza

          The title of the post is wrong.

          The style tag is basically part of CSS itself, so technically you are still using CSS to display the content, the only difference is that you are doing it within the HTML code.

          You can find more info about CSS and style tags here http://www.w3.org/TR/css-style-attr/

          • S.Pradeep Kumar

            Keith, I really appreciate for your participation in this article. But I wrote this article in my point of view,

            Create block quote without using CSS.

            I meant the style sheet here, which has .css extension. This tutorial helps you create block quotes without using that style sheet ! You don’t need to touch them, you can simply copy and paste the code in the editor and publish.

            And I really sorry for the title thing ! I was in a hurry ! 😀

            • Keith Dsouza

              Well agreed that you had this in mind, but why be repetitive, i mean using CSS styles does not require you to add it to the CSS, you can easily add it to the HTML page itself using tags, so instead of assigning the CSS directly to elements you could do this.

              .bquoteyellow {padding: 5px; background-color: #FFFF99; border: dotted 2px #FF9900;}
              .bquoteblue {padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;}
              .bquotenocolor {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;}

              and then use it as Text here

              This way you do not have to keep remembering those styles, you just add the classname to the paras

              • S.Pradeep Kumar

                Thanks for detailed explanation buddy ! 😉

                I thought of making this tutorial as simple as possible.. thats why…

                Once again thanks for your participation ! 🙂

              • Mark @ Cheap Web Hosting

                Another technique we have seen on popular sites is to create a couple images of really large quote marks, then wrap them around the quote box.

  • Facebook Comments