Skip to main content

Modernizing Your BlockQuotes -9 unique styles

Block quotes are a  selection of text that is pulled out and quoted in a larger typeface. They are a great way to attract attention to a particular point, especially in long articles.Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. HTML provides us with the perfect element for such a task, the

The tag blockquote in html has a special beauty than any other tags by default. And when you use blockquote in your post, it gets more meaning than merely a text.

Hope You would also like to Read :
Increase your text size Widget
First letter of your post Big and Unique
Google friend connect in Various Forms 

Here i am collecting some of the best blockquote designs which i have found over the web ! Hope You like them :

Basics And Specification
W3C: Blockquote specs
Wikipedia: Blockquote
W3 Schools: Blockquote

#blockquote1 {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 120% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;

#blockquote2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;

#blockquote3 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(;
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.5em;

#blockquote4 {
width: 20em;
background: url( top left no-repeat;
color: #030;
font-size: 2em;
line-height: 0.9;
font-style: italic;
padding: 0.5em;
margin: 0;

#blockquote5 {
background: #ffffcc;
border: 5px double gold;
border-width: 5px 0;
color: #CC6600;
font: bold 150% Arial, Helvetica, sans-serif;
  padding: 0.5em 0.75em;
text-align: right;

.blockquote6 {
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
color: green;

blockquote7 {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;

blockquote8 {
color: #fff;
background-color: #111;
font-size: 0.9em;
padding: 10px 20px 20px 20px;
blockquote p {
margin: 0;

#blockquote9 {
font-family:Courier New;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url( left top;
Now adding to your Blogger :
  • Chose Any of the above blockquote :
  • Search for post.blockquote or some thing with blockquote in your Edit HTML tab.
  • IT will be Like this :
#post.blockquote{  //starting bracket
-- your blockquote css is here --

}  //closing bracket

  • Suppose you have chooses second block quote  (#blockquote2)
  • Copy only css parts which is inside the opening and closing brackets like shown in image below :

And replace it with your original block quote css  in this way it will not interfere with existing post.blockquote in our template.


Popular posts from this blog

Best DoFollow Blog directories list for seo

List of Dofollow Blog directories,
Note: some items have profile information some do not, doesn’t matter, they’re all DoFollow Blog directories so submit your blogs to them all.
Year Site Created: 2000
Indexed Pages in Google: 103,000
Backlinks in Yahoo: 542,700
PageRank: 6
Link Status: Dofollow
Quantcast Rank: 200,223
Editorial Policy: Yes
Spam in index: No
Submission rules: From the website:
We will reject: Spam blogs, hate blogs, stolen blogs, links to non-blog websites, links to illegal or illicit topics like child pornography. Blogs with under 5 posts are no longer accepted, but they might be waitlisted for later review if they look cool.
Commercial blogs are fine, but they must be “fun and useful.” Because of the huge amount of robot-generated blogs being submitted, blogs with the following will not be approved for listing: Acne, Mesothelioma, Real Estate, Lawsuits, Insurance, Gambling, SEO, Web Marketing, Medical Procedures and En…

Get ip-address widget for your blogger

Here is a unique collection of  IP address widgets which shows your visitors their Ip address,operating system,country,browser and the version of the browser.It is cool thing to display  ip address to your visitor's specially if you have TECH related blog.
Now you can get these any of these widgets and add these to your blogs by following these steps -

Get Ip Address Widget for your blog

1 .Choose any widget they are in different size and shapes,choose any according to your blog requirement.
2. Login to blogger dashboard ,and the click on Layout - > page Elements .
3. ADD a new HTML/Javascript gadget anywhere in your blog.
4. Copy any code from below(all are working) and paste in to HTML / Javascript gadget and then save your gadget.
5 Done,Your widget is Now live

1 .Square Ip Address Widget (Height=125px, Width=125px)<!--Ip Address Widget Starts--><span style="display: block; text-align: center;"><a href="">…

Add a reply option to blogger comments like Wordpress

If you Are using blogger platform for your blog than during some stage of your blogger life you must have noticed that blogger does not have Reply option to it comments.This is one of the major reason why people migrate towards Disqus or IntenseDebate comment Platform.
I suggest you to read this - Readers can't comment on your blog - Tip For You

With a very little change to your template you can add this hack to your blog.
This hack was originally posted on thisischen

ScreenShot :
Update - Previous Reply code was not working for some blogger templates.This is an updated version and work well with all templates
Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.

Step[2] Find the following code in your blogs Html : <data:commentPostedByMsg/> 

Step[3]. Paste the following code Directly Below/After <data:commentPostedByMsg/>  

<span class='comment-reply'…