Adding a scroll bar to your blogger blockquote section means you are one step ahead of giving your blog a professional look. Today I'm here to show you how you can implement scroll bars on your blogger blockquote.
It can simply make our post shorter and nicer with professional look.
Important: Always keep a backup of your template before proceed to editing.
Step 2: In your blogger template editor search for blockquote {
Step 3: After finding above code paste the below code just under/below it ( blockquote { ).
Step 4: After pasting the above CSS code hit the Save Template button.
You can do few customization with this scrollbars. Showing them below.
You can simply change the value 400px to as you wish.
Adding a scroll bar to your blogger blockquote section means you are one step ahead of giving your blog a professional look. Today I'm here to show you how you can implement scroll bars on your blogger blockquote.About Scroll Bars:
As I told above this post is about appearing scroll bars on blogger blockquote area. This is very important to use for those blogger, who blog about blogging and coding. Sometime we need to share a pretty long junk of code on our blog page and it make the post too long to scroll. When we usually use BLOCKQUOTE area in blogger blog to share any type of code, then why we are not adding a scroll bar on our blog's blockquote section/area.It can simply make our post shorter and nicer with professional look.
.::LIVE DEMO OF SCROLL BAR ON BLOCKQUOTE::.
Live Demo
Live Demo
How To Add Scrollbars on Blogger Blockquote:
Step 1: Log in to your blogger account, select Template from blogger menu then click on Edit HTML.Important: Always keep a backup of your template before proceed to editing.
Step 2: In your blogger template editor search for blockquote {
Step 3: After finding above code paste the below code just under/below it ( blockquote { ).
height: 400px;
overflow:scroll;
}
Step 4: After pasting the above CSS code hit the Save Template button.
Customization:
If you did above 4 simple steps correctly then you should see scroll bars on your blogger blogquote section. You might also notice, you are having two scrollbars one at the right corner and one at the bottom.You can do few customization with this scrollbars. Showing them below.
TO SHOW THE SCROLL BAR ONLY AT RIGHT SIGHT
If you want to show the scroll bar only at right side instead of having both. Then use the below code instead of above piece.height: 400px;
overflow-y:scroll;
}
TO SHOW THE SCROLL BAR ONLY AT BOTTOM
If you want to show the scroll bars only at bottom side instead of having both of them. Then you have to use below code instead of first piece (under "How To Add Scrollbars on Blogger Blockquote" section) of code.height: 400px;
overflow-x:scroll;
}
TO INCREASE & DECREASE THE HEIGHT
You have also noticed that I have added a fixed height (height: 400px;) to call the scroll bar. This means the scroll bar will show when the code will exceed the fixed height.You can simply change the value 400px to as you wish.
Upcoming Search Tags:
how to add scrollbar to blogger blockquote, how to change scrollbar on blogger, vertical scrollbar css, vertical scrollbar html, vertical scrollbar in div, having scroll bars on blogger blockquote, how to change scrollbar on blogger, how to change scrollbar in our website, scrollbar styles css, html scrolling box, make a scroll box html, scroll box html codes, change scrollbar color firefox, change scrollbar color chrome, change scrollbar position
About Scroll Bars:
As I told above this post is about appearing scroll bars on blogger blockquote area. This is very important to use for those blogger, who blog about blogging and coding. Sometime we need to share a pretty long junk of code on our blog page and it make the post too long to scroll. When we usually use BLOCKQUOTE area in blogger blog to share any type of code, then why we are not adding a scroll bar on our blog's blockquote section/area.It can simply make our post shorter and nicer with professional look.
.::LIVE DEMO OF SCROLL BAR ON BLOCKQUOTE::.
Live Demo
Live Demo
How To Add Scrollbars on Blogger Blockquote:
Step 1: Log in to your blogger account, select Template from blogger menu then click on Edit HTML.Important: Always keep a backup of your template before proceed to editing.
Step 2: In your blogger template editor search for blockquote {
Step 3: After finding above code paste the below code just under/below it ( blockquote { ).
height: 400px;
overflow:scroll;
}
Step 4: After pasting the above CSS code hit the Save Template button.
Customization:
If you did above 4 simple steps correctly then you should see scroll bars on your blogger blogquote section. You might also notice, you are having two scrollbars one at the right corner and one at the bottom.You can do few customization with this scrollbars. Showing them below.
TO SHOW THE SCROLL BAR ONLY AT RIGHT SIGHT
If you want to show the scroll bar only at right side instead of having both. Then use the below code instead of above piece.height: 400px;
overflow-y:scroll;
}
TO SHOW THE SCROLL BAR ONLY AT BOTTOM
If you want to show the scroll bars only at bottom side instead of having both of them. Then you have to use below code instead of first piece (under "How To Add Scrollbars on Blogger Blockquote" section) of code.height: 400px;
overflow-x:scroll;
}
TO INCREASE & DECREASE THE HEIGHT
You have also noticed that I have added a fixed height (height: 400px;) to call the scroll bar. This means the scroll bar will show when the code will exceed the fixed height.You can simply change the value 400px to as you wish.
Upcoming Search Tags:
how to add scrollbar to blogger blockquote, how to change scrollbar on blogger, vertical scrollbar css, vertical scrollbar html, vertical scrollbar in div, having scroll bars on blogger blockquote, how to change scrollbar on blogger, how to change scrollbar in our website, scrollbar styles css, html scrolling box, make a scroll box html, scroll box html codes, change scrollbar color firefox, change scrollbar color chrome, change scrollbar position
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment