How To Customize And Make Blockquote Scrollable In Blogger

Hello, guys. Today, I’m once again here with another template customization tutorial or you can say recommended blogger widget for all of you. In previous, I’ve shared 25+ customizable blockquotes styles for blogger, but I’ve not added any scrollable blockquote style. So, that’s why The scrollable blockquote for the blogger is here to publish.
Make Scrollable Blockquote, Customize Blockquote
One of my readers asks me via contact form gadget, How to make blockquote scrollable in blogger? So, first I’ve helped him, and after that, I’m here to publish this excellent scrollable blockquote style with all of you.

Scrollable blockquote helps you to prevent and transform long CSS/HTML/JS codes in a short blockquote section. I don’t want to get you bore, but before making any change in template code area, I must recommend you to download a backup copy to save yourself from the biggest problem, If any happened after template customization.

How To Customize & Make Blockquote Scrollable in Blogger?

I’ve designed two blockquote styles; One has only scrollable feature and the second one has the scroll, double-click selection function, and advance look. So before adding check below screenshots and choose for your Blogspot blog.
Scrolled blockquote, customize blockquote
customize blockquote in blogspot, make blockquote scrollable in blogger

Steps To Make Blockquote Scrollable

STEP 1] Go To >> Click On Template >> Now Click On Edit HTML Button.

STEP 2] Now using CTRL+F search for ]]></b:skin> tag and paste below Blockquote CSS code just above of it.

CSS For Only Scrollable

Scrollable Blockquote By
.post blockquote{ background:#222; color:#fff; border:5px solid #ff0!important; text-align:left!important;font-family:’Roboto Condensed’,Helvetica,sans-serif;line-height:25px;position:relative;padding:10px; margin:0px 15px 0px 30px;overflow:auto; width:90%; min-height:20px; max-height:200px;}

CSS For Scrollable Blockquotes with Double-Click to Auto Select

Double-Click Select Scrollable Blockquote By
.post blockquote{ background:#111; border-left: 7px solid #ff0!important;text-align:left!important;font-family:’Roboto Condensed’,Helvetica,sans-serif;color:#fff;line-height:25px;position:relative;padding:55px 20px 20px 20px; margin:0px 10px 0px 30px;overflow:auto; width:85%; min-height:20px; max-height:200px;}
.post blockquote:before {position:absolute;content:’f121”Script’;border-bottom: 2px solid #ff0!important;right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-size:120%;color:#fff; font-family:FontAwesome;font-weight:normal; font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}
.post blockquote:after {content:”Double click to selection | Use Ctrl+C to Copy”;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:14px;color:#ff0;line-height:24px;transition:all 0.3s ease-in-out }
.post-body blockquote:hover:after{opacity:0;top:-8px;visibility:visible}

STEP 3] Now, If you’ve chosen Double-Click selection Scrollable Blockquote, then paste below code just above of </body> tag otherwise skip and head over to the next one.

<script type=’text/javascript’>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
pres[i].addEventListener(&quot;dblclick&quot;, function () {
var selection = getSelection();
var range = document.createRange();
}, false);

Note: If you want to make only-scrollable blockquote double click selective, then read this guide – How To Make Blockquote Code Auto-Select On Single/Double Click in Blogger?

STEP 4] Now, Search for old blockquote CSS code and remove that code to make this code working correctly. Code must start from blockquote or .post blockquote, so search for using this hint.

STEP 5] Now, Hit on Save Template button.

That’s it. Now open that blog post in which you’ve used blockquote tag and see it live on your BlogSpot blog.


So above guide is about “How To Customize And Make Blockquote Scrollable In Blogger?” I’ve tried my best to make this tutorial as easy as possible, but in any case, you’re facing any issue, then let me know via using the comment box. I’ll be happy to assist you guys.

Did you like this tutorial? If yes, then share with your friends because this is the first article on the internet to make blockquote scrollable in blogger.

If you like this article, then subscribe us to get latest updates direct into your mailbox for free.

Thank You!
Stay Blessed and Stay Happy!


Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging for 2 years, and here on My Blogger Guides, I'm sharing my what I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: