How to Add Scroll Bars on Blogger Blockquote
How to Add Scroll Bars on Blogger Blockquote
The usage of blockquote is to quote an important word, sentence or paragraph. While in my blog I'm using blockquote for html or JavaScript codes. This tutorial will show you on how you can add scroll bars with fixed height in a way that is easy to understand. Many bloggers want to do it in order to make their article look a bit shorter. This is also helpful if you have a long codes inside the blockquote and you want to make it more shorter.
You don't like the introduction? So let's start the tutorial! The code for making a scroll bar appear on your blockquote is very short and simple just follow my instruction below.
Step 1: Go to Blogger --> Template --> Edit HTML
And look for this code ]]></b:skin> You can easily find it by clicking inside the code area and press Ctrl+F and type ]]></b:skin> in the search box and hit enter to search it.
Once you successfully found it, simply copy the code below and pate it just above the ]]></b:skin> and don't forget to save your Template.
You might also notice that you have two scroll bars inside your blockquote in the right corner and in the bottom. Just in case you want to have only one scroll bar see the code below
Use the code below, for having only scroll bar at the right corner.
That scroll bars in your blogger blocquote will surely add some awesomeness. I hope that you've learned something new in blogger designing! If you have questions you are free to ask me in the comment area, thank you!
You don't like the introduction? So let's start the tutorial! The code for making a scroll bar appear on your blockquote is very short and simple just follow my instruction below.
Step 1: Go to Blogger --> Template --> Edit HTML
And look for this code ]]></b:skin> You can easily find it by clicking inside the code area and press Ctrl+F and type ]]></b:skin> in the search box and hit enter to search it.
Once you successfully found it, simply copy the code below and pate it just above the ]]></b:skin> and don't forget to save your Template.
blockquote {height: 300px;overflow:scroll;}The overflow:scroll line is responsible for having a scroll bars inside your blockquote. You might have notice that I have also added a fixed height to the blocquote height: 300px. That's because you need to set first the fixed height of the blockquote. So when the contents inside your blockquote exceeds the scroll bars will appear like a magic you know hahahahahaha! :D
You might also notice that you have two scroll bars inside your blockquote in the right corner and in the bottom. Just in case you want to have only one scroll bar see the code below
Use the code below, for having only scroll bar at the right corner.
blockquote {height: 300px;overflow-y:scroll;}Use the code below, for having only scroll bar at the bottom.
blockquote {height: 300px;overflow-x:scroll;}You can change the fixed height of your blockquote by changing the 300 in the height:300px; Change it according to your taste! :D
Also Read: Floating Social Media Button for Blogger
Final WordsThat scroll bars in your blogger blocquote will surely add some awesomeness. I hope that you've learned something new in blogger designing! If you have questions you are free to ask me in the comment area, thank you!
Comments
Post a Comment