New : Download Free:Ebook | FREE : [ Limited Copies ] Premium Blogger Template : Grab Now!!! | Like Us :

Sunday, 2 June 2013

Customize your Blockquote | Make it Cool & Professional

blockquote tag specifies a section that is quoted from another source. blockquote tag is supported in all major browsers.

Today we will tell you how you can customize your blockquote tag.

Steps to Customize your blockquote:-
1.Go to "Template".
2.Search for "post blockquote".If it is already there remove this code.
3. Now copy and paste the below code in the css section of the template.


.post blockquote {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background 200ms linear;
-moz-transition: background 200ms linear;
transition: background 200ms linear;
-webkit-backface-visibility: hidden;
background: none repeat scroll 0 0 #EEEEEE;
font: 12px/1.5 Monaco, "Courier New", Courier, monospace;
margin-bottom: 15px;
padding: 20px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.post blockquote:hover {
background:#999;
}


4.Save the template.
5. Now you can use the Customized blockquote tag.
6. You can change the color before and after hovering by changing the code in red part above.

DEMO:
This is the example of Customized Blockquote. Try it now.

6 comments:

  1. good article but one thing is missing you have not shared how to add image in block quote as you did. hope so will get update soon.
    career and tricks

    ReplyDelete
    Replies
    1. ok the next post will be about that

      Delete
  2. me gusta mucho este articulo
    muchas gracias por la informacion ;)
    http://dolcevirginia.bogspot.com.es

    ReplyDelete
  3. Excellent post but I was wanting to know if you could write a little more on this subject? I'd be very thankful if you could elaborate a little bit further.
    website design

    ReplyDelete
  4. For Lingerie Shopping online at amazing offer & top popular brands visit on : http://www.fabsdeal.com/

    ReplyDelete
  5. nice artikel
    http://www.kangalip.com/

    ReplyDelete

 

About The Author








I am a B.Tech Computer Science Student. I love Programming and blogging. I am Oracle certified Java Professional. My Profile

DMCA.com

Technology Blogs

Education Blogs

Twitter Facebook RSS YouTube Google

All Rights Reserved ©Indian Blogger Community 2013

© 2013 Designed by Indian Blogger Community