Blockquote Styles For Blogger
close
Blockquote Styles For Blogger

Blockquote Styles For Blogger

Blockquote Styles For Blogger

Hello friends today I am going to share with you simple Blockquote styles made with CSS. I know some of you like my website and the styles that are used and the customizations that I made and some of you ask for the theme which I am using.

Friends as I always say I download themes anywhere from internet and customise them according to my requirements.

I have created simple CSS3 Blockquote styles which I am using on my website as you can see below if you people want that styles you can get the code to make that kind of blockquotes.

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.
Disqus Codes

No comments

Notifications

Disqus Logo