How To Add Scrollbars To Blogger Blockquote

{tocify} $title={Table of Contents}

The use of blockquote is to highlight important word or a sentence. But many bloggers use it for displaying code on their blog. I also use it on my blog. This tutorial is how can we add scrollbars to blogger blockquote.

Sometimes we need to share a long code to our visitors and there we need to use blockquote to display that code. It makes our post a bit smaller and also stylish. Visitors can easily copy codes from blockquote. So, blockquote is important to improve our user experience. Let's kick introduction and move towards next steps.

Add Scroll Bars On Blogger Blockquote

Step 1: Log in to your Blogger Dashboard.

Step 2: Then click on Template >> Edit HTML.

Step 4: Press Ctrl+F keys together and search for the code ]]></b:skin> tag.

Step 5: When you find the code, just above it paste the code given below:

blockquote { height: 300px;overflow:scroll;}

Step 7: And click Save Template.

The overflow:scroll puts the scroll bar inside your blockquote. You might have noticed that I have added a fixed height i.e. height:300px to the blockquote. This why because if the content inside the blockquote will exceed the height then the scrollbar will start appearing. You can also change the height of your blockquote by replacing 300px with your own height.

You might also have noticed that there are two scroll bars inside your blockquote. One in the right corner and one at the bottom. In case if you want to display only one scrollbar follow the steps given below.

For Having Scroll Bar Only In The Right Corner

Use the code below for having scrollbar only in the right corner.

blockquote { height: 300px;overflow-y:scroll;}

For Having Scroll Bar Only In The Bottom

Simply use the code given below for having scrollbar only at the bottom.

blockquote { height: 300px;overflow-x:scroll;}

Final Words

This scrollbar will make your blog look attractive. And I hope you liked this post. And any problem related to this content comment down and don't forget to share this post with your friends.

Tags: Blockquote blogger blogger widget blogging tips tutorial