Blockquote Styles For Blogger

Below are the blackquotes designs provided with the CSS and HTML code also with the preview.

Blockquote Simple - Style 1:

This is simple Black coat design without any class.
Preview

Example Tags blockquote , html block , css quotes , abbr html , html quotation marks , block quote in word , html block comment , blockquote styles , q html , caption tag in html.

code:
HTML

<blockquote>
Place Your Content Here.
</blockquote>

Blockquote Tip - Style 2:

This is a block code to give tip to your visitor.
Preview

Example Tags blockquote , html block , css quotes , abbr html , html quotation marks , block quote in word , html block comment , blockquote styles , q html , caption tag in html.

code:
HTML

<blockquote class='tip'>
Place Your Content Here.
</blockquote>

HTML

Blockquote Warning - Style 3:

This is a block code to give warning to your visitor.
Preview

Example Tags blockquote , html block , css quotes , abbr html , html quotation marks , block quote in word , html block comment , blockquote styles , q html , caption tag in html.

code:
HTML

<blockquote class='warning'>
Place Your Content Here.
</blockquote>

Blockquote Success - Style 4:

This is a block code to give success messege to your visitors.
Preview

Example Tags blockquote , html block , css quotes , abbr html , html quotation marks , block quote in word , html block comment , blockquote styles , q html , caption tag in html.

code:
HTML

<blockquote class='success'>
Place Your Content Here.
</blockquote>

CSS Code For All Blockquote Styles:

CSS Code for all blockquote styles is provided below:

blockquote{border: 1px solid;border-color: #8050ff;background: #eeeafb;color: #4a318a;font-size: 15px;line-height: 1.4;border-radius:5px;padding: 1.2em 2em;margin-bottom: 1.5em;word-break: break-word;}
blockquote.tip{border-color: #a2def5;background: #e3f7ff;color: #435f69;}
blockquote.warning{border-color: #f7f0b8;background: #ffffe0;color: #75752f;}
blockquote.success{border-color: #3dd07d;background: #ccffe2;color: #00a046;}

Conclusion:

So the blockquote style which you want to add into your post you simply have to copy the blockquote HTML code d paste it to your post where you want to show blockquote and then copy the CSS code and paste it.

This was a simple CSS tutorial I think you might like it and if you did make sure to subscribe to the newsletters of this blog.

Source: softwebtuts.com