Oct 9, 2016

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 Blogger.com >> 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.

Scrollable Blockquote By MyBloggerGuides.com
.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;}
Double-Click Select Scrollable Blockquote By MyBloggerGuides.com
.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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.