Latest Blockquote Style In Blogger

Hello and Welcome to GetWebInfo.Com. Here on 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 Loginto your Blogger Bloge 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....

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.


No comments:

Post a Comment