Breaking News:

latest

Latest Blockquote Style In Blogger

Hello and Welcome to GetWebInfo.Com. Here in this post, you can be able to find Latest Article about Blockquote. The Blockquote displays in ...

Hello and Welcome to GetWebInfo.Com. Here in this post, you can be able to find Latest Article about Blockquote. The Blockquote displays in standards - Compliant browsers with the "big quotes before" effect and in IE with a thick left border and a light grey background. Unlike other blockquote techniques, this style does not require a nested block-level element (like P). As such it turns a paragraph into an inline-styled element to keep the content from dropping below the quote.





Here is the code of this Beautiful Blockquote.

 blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #f7d4de;
  padding: 1.7em 30px;
  position: relative;
  background-color: #fbeaee;
  border-radius: 5px;
  margin: 20px 0;
}
blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  padding: 5px 0 0 0;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  color: #B7234C;
  font: 2.45em/1.1em 'FontAwesome';
  text-align: center;
  border-radius: 50px;
  background-color: #f7d4de;
  box-shadow: 0 1px 5px #888888;
}
.cooked>blockquote,
.cooked>blockquote:first-child {
  margin-top: 20px;

How to use this Blockquote

Simply Login to your Blogger Blog and Simply click on  Theme> Edit HTML button and just paste this code just above </b:skin>






I hope this article is really helpful for you If you like this article so please share this article on Social Media thanks for reading...

No comments