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

Comments