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
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 without using .CSS.
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.
Most Related Stories
You can also use our Archives to get your required article or use this search form.
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.
Hey nice dude.. I like Squidoo ! Maybe I can share some doubts with you !
This tutorial is triggered by Squidoo !
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
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 !
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
Thanks for detailed explanation buddy !
I thought of making this tutorial as simple as possible.. thats why…
Once again thanks for your participation !
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.
Mark @ Cheap Web Hosting recently posted..Cheap Dedicated Hosting & Dedicated Servers
Thank you Pradeep.
Hey thanks for that dude !
Wow, that’s a great alternative. Thanks for sharing.
You are welcome Fatin !
Glad it is helpful to you ! …
It is really helpful. I can try different colors and styles.
Yeah.. simple and sensitive tutorial !
Glad it is helpful to you…
Nice info dude…I too use it..
Thanks Sham !
Glad you liked it ! …
Nice sharing dude. I use it using css, but it will come in handy
Glad this is useful for Ricky ! Cheers !
good article. so can we use this for Share this and put our soucial icons in it. within the quoates.
Thanks SriGanesh, Glad you liked it !
Great ways to do such a “required” thing.I found this really useful.Thanks indeed.Probably I needed this stuff really,thanks !
this is a very well writen article but i don`t understand why not use css
Using CSS is the best and good practice.. but this article focussed for handy purposes !
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???
Sunny, you need to use img src tag and attribute for that..
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.
Yup.. exactly… but both comes handy!
i am trying to customize blockquotes with best colors:)
Now i know that block quotes is one of the blog’s beauty…You can see the example in my blog
nice article. Do you have coding for more colors ?
Money from blogging | SEO for blogger’s last blog…Ten Tips To Making Blogging = Money
Thanks for the nice tutorial, it is a nice way of using blockquote without CSS.
I hope this article will encourage more bloggers to turn there blog into a do follow to increase the traffic of there blogs.