Friday, September 25, 2020
Home Blogging Tips & Tweaks Adding a Customized Blockquote to a Blogger Blog

Adding a Customized Blockquote to a Blogger Blog

Blockquotes are basically used to add effect to stuffs (e.g. scripts, CSS codes, HTML codes, a quote, etc.) on your post to help differentiate certain texts in the post which you want to lay more emphasis on from the others. It is used in some tech blogs to enclose certain codes and scripts while in other blogs, it is sometimes used to display quotes from favorite authors or a sentence copied from another web page or article.

I guess you might have seen it in action in most of the tech blogs but don’t know how to make use of it in your own blog. Today I am going to show you guys how to create a custom blockquote which will be unique to your blog. All you need to do is follow the steps below;

  • Login to your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for ]]></b:skin> using Ctrl + F.
  • Copy the below CSS code and paste just above ]]></b:skin>.
.post-body blockquote {

line-height: 1.3em;

}


.post blockquote {

background: #F2F1F1 url(BLOCKQUOTE BACKGROUND IMAGE URL);

background-position:;

background-repeat:repeat-y;

margin: 0 20px;

border-top: 1px solid #DDD;

border-right: 1px solid #666;

border-left: 1px solid #DDD;

border-bottom: 1px solid #666;

padding: 20px 20px 20px 50px;

color:#000000;

font: normal 0.9em "Consolas", "Courier New", Courier, mono, serif;;

-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

}

.post blockquote:hover {

background: #F9F9F9 url(BLOCKQUOTE BACKGROUND IMAGE URL);

background-repeat:repeat-y;

color:#000000;

box-shadow: -1px -1px 12px 2px gainsboro;

border-radius: 15px;

}

.post blockquote p {

margin: 0;

padding-top: 10px;

}

Changes to Make:

To make sure that the blockquote will be unique to your blog alone, create a unique image which you want to use as the background image for the blockquote and upload to blogger or host it on any other image hosting site, then copy the URL and paste in the CSS code above to replace BLOCKQUOTE BACKGROUND IMAGE URL.

  • Finally Save Template and you are done.

Note: To use the blockquote in your post, just switch to the HTML mode when composing the post and add <blockquote> at the start of the texts/codes you wish to enclose inside the blockquote and finally add </blockquote> at the end of the texts/codes.

The blockquote here can be used on any Blogger blog but if you are running a tech blog that and need a numbered blockquote to use in sharing CSS, HTML, and other scripts, then you should check my post titled Simple Numbered Blockquote For Blogger and Website.

For further customization, feel free to contact me by using the contact form in the Contact Us page or just leave your comment in the comment section below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments