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.
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:
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.
For Having Scroll Bar Only In The Bottom
Simply use the code given below for having scrollbar only at the bottom.
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.
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.
Recommended: Display Blogger Posts In Grid View With Thumbnails
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.
Read Also: How To Make Blogger Blog Date Header Stylish
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;}
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.
No comments