CREATE EFFECTIVE BLOCKQUOTE FOR YOUR BLOG WITH HOVER EFFECT

It is good blogging practice to use <blockquote> tag into post, to represent source code, script, program or notes.

Blockquote tag specifies a section that is quoted from another source.

Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets (CSS).




The <blockquote> tag is supported in all major browsers.

• Tag Syntax:

<blockquote>
Your text goes here
</blockquote>

• Example:

<blockquote>
This is text within blockquote.
</blockquote>

• Output:

This is text within blockquote.

•  How to insert text in blockquote in HTML code or in Blogger post/wordpress post:

1. To write content simply click on the icon in your blogger toolbox.......................................................
2. Write your text
3. Click again on blockquote sign.

That's is you have successfully created blockquote text.

• How to create unique, eye caching and effective CSS Code with hover effect for your blog:

1. Sign in to your blogger dashboard
2. Go to Template Menu
3. Click on Edit HTML button
4. Search for tag      .post  blockquote{}
5. Replace all CSS Code of all blockquote tags with following code and save your template!

/*****************************************
   BYBITZ  post blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: rgb(177, 221, 230);
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: rgb(145, 204, 161) ;
color: #000;
}
.post blockquote:active
{
background-color: rgb(207, 212, 218) ;
color: #000;
}