How to add scrolling text box in blog post?

To add scrolling text box in blog post, like wordpress and blogger, is super very easy, simple and is totally possible. You will be needed to add just a few lines of CSS and a simple HTML wrapper. You can also look at the preview that what will you now be going to create and how will it look like?

Add Scrolling Text Box To Blog Post

 

What is scrolling text box? In fact it is really box having a fixed height and width. You can add text into this box and in case the text you entered inside the box is longer and wider than the height and width, you’ve fixed, automatically a scrollbar gets added. It is available in different form and shapes. For example some text boxes are vertically created while others are created horizontally.

First of all add custom CSS to your blog/website:

To add scrolling text box in blog post, you have to add some style to your text box. First of all, you have to add custom CSS to be added to your blog or website. There are different ways to add custom CSS to blogger and wordpresss. Means that each of these two blogs has different methods on which we can add custom CSS to blogger and wordpress. If are using Blogger, you are needed to sign in to your blogger blog, and from the dashboard click on theme and then click on customize theme. Now at top you will see the option for custom CSS. Click on that option and add the CSS code given below.  If you’re in WordPress, it can be done in a few ways:

  1. If you are using wordpress, you probably noticed, during customization that most of the wordpress templates have a “Custom CSS” option in the settings panel. So you can copy and paste the code there.
  2. In case, if you are using Jetpack and installed it, you will have a section in Appearance » Edit CSS where you can copy & paste custom CSS code.
  3. You also have another option; and that is you can install and activate the Simple Custom CSS plugin. This CSS plugin will automatically add a new menu, under Appearance, to your desired custom CSS code.

The following CSS code you need to add:

.scroll-box {    height: 400px; /* maximum height of the box, feel free to change this! */    overflow-y: scroll;}

You can change the style of the text box according to your requirements and as you wish. For example you can add extra CSS styling code to add a background colour & border colour as you want. Below we have provided some example codes for extra styling. You can add it to your custom CSS area of your template.

.scroll-box {    background: #f4f4f4;    border: 2px solid rgba(0, 0, 0, 0.1);    height: 400px; /* maximum height of the box, feel free to change this! */    padding: 15px;    overflow-y: scroll;}

Now add the HTML code in your blog post

In the next step you will be required to add the HTML code in your blog post to add scrolling text box. Now you are able and in the position to add scrolling text box in blog post that you operate, so start now drafting your new blog post! One thing is very important and that is making it sure to change from visual editor to HTML view.  In this step you are not required to use the option of visual editor, now copy and paste the HTML code or you can also type manually the below HTML code:

<div class=”scroll-box”></div>

The above given HTML code is very simple, easy and short. Therefore, you have to memorize it or copy and paste it in the safe place because you may need this code any time, if you want to add text box again.

How to Use This Code: It is also very simple and easy to use this code. Just copy and paste it in your post where you want the text box to be appeared. Once you added it in to your blog post please enter your text excerpt, chapter reveal, HTML code, or anything you want to be shown inside your text box. Make sure to enter the text, you want to be shown inside the text box, between div tags. To easily understand the procedure, please look at the example below.

<div class=”scroll-box”><p>Enter your desired text here!</p></div>

Now we present you some more amazing and attractive scrolling text boxes with different background and borders for you. The first one is, a basic HTML scrolling box,  given below,

Basic and simple HTML Scrolingl Text Box

<div style=”height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;”>

This is an example text. Please enter your desired text here, in the scrolling text box, and look for the results. When you enter enough text in the scrolling text box, the box will grow scroll bars and that’s why it is knows as scrolling text box! Similarly you could also put an image into the scroll box.

</div>

Colored Scrolling Text Boxes

You can also add scrolling text box to blog post with color format.  In this example we have added some color to the scrolling text box. You have a large number of options available for selecting color for your scrolling text box.  Color selection totally depends upon you, therefore, select the best color and add it to your scroll text boxes!

<div style=”height:100px;width:140px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;”>This color HTML scrolling text, as we have added some color to it. You have a large number of options available for selecting color for your scrolling text box. You can also add colors to the background as well as to the scrolling bars of your scrolling text box.</div>

Let’s Customized The Scrollbars Of Your Scrolling Text Box

Did you know that you can also customize the scrolling bars of your scrolling text box? Yes! It possible and you can do it very easily. We always have solutions for your web problems. Today we also find out a solution for your problem. Just use this HTML code to customize your scrollbars. One advantage of this code is that it also works on the browser’s scrollbars. The code is given below,

<!DOCTYPE html>

<html>

<head>

<title>My Example</title>

<!– CSS –>

<style>

/* Force scrollbars onto browser window */

body {

margin-bottom: 200%;

}

/* Box styles */

.myBox {

border: none;

padding: 5px;

font: 24px/36px sans-serif;

width: 200px;

height: 200px;

overflow: scroll;

}

/* Scrollbar styles */

::-webkit-scrollbar {

width: 12px;

height: 12px;

}

::-webkit-scrollbar-track {

border: 1px solid yellowgreen;

border-radius: 10px;

}

::-webkit-scrollbar-thumb {

background: yellowgreen;

border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

background: #88ba1c;

}

</style>

</head>

<body>

<!– HTML –>

<div class=”myBox”>

Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.

</div>

</body>

</html>

Add Images To Scrolling Text Box

Now you will be thinking how to add images to your scrolling box. But don’t worry it is also possible, and you can also add your desired images to your scrolling box. You can add images to the background of your scrolling box or foreground of it. Please click on the link to add images to your scroll box!

<div style=”height:180px;width:180px;overflow:auto;”>

<img src=”/pix/samples/11m.jpg” alt=”Sample picture for scroll box”>

</div>

Add Borders To Your Scrolling Box:

You can also add scrolling box to blog post, with border added to it. When box added it will look more amazing & attractive. In the following sample of HTML code we have added border to the scrolling box Here’s an example of an HTML scroll box with a border added. Click on the link to add a border to your scrolling box!

<div style=”height:100px;width:140px;overflow:auto;border:8px solid yellowgreen;padding:2%”>In this scroll box we have added a border to it. Similarly, you can also add borders to anything by using HTML codes, including scroll boxes.</div>

 

Add Scrolling Text Box In Blog Post With Horizontal Preview:

You can also add scrolling text box to blog post with horizontal preview. In the below given example of HTML code, the scroll box will scroll horizontally. Now click on the link to add horizontal scrolling to your scroll box!

<div style=”border:1px solid black;height:100px;width:140px;overflow-y:hidden;overflow-x:scroll;”>

<p style=”width:250%;”>

With the help of overflow-x, we are able to create scroll bars, even though, when the contents size of this div are wider than the container. For example if the paragraph is set to 100 %, but it is 100 percent wider than the actual container. And as a result it creates an overflow.

</p>

</div>

 

Congratulations!

And you are done. We hope you will do it by yourself.

Not Interested In HTML and CSS coding, Download the free plugin!

Now ready for another most easy and simple method. If you are not interested in HTML and CSS coding, we have the solution for you. Just download the free scrolling text box plugin and install it on your wordpress blog. It doesn’t need any coding. Everything will be done by the plugin itself. One another advantage of this plugin is that you can work in visual editor and you will not be required to switch to HTML mode. Once it is installed on your local host or to online blog, you can now add scrolling text box in to your blog post. When you are creating new blog post, in the visual editor, you will see another option of text box, as shown below,

Add Scrolling Text Box To Blog Post

This is the simple free plugin as other wordpress plugin. The installation procedure is same as that of other plugins. After installation, you can customize its height, width, color, background color, border color etc from going to setting option. There are few easy and simple setting options that let you to change it according to your own requirements.

You can add anywhere in your blog post where you want. Just click on that option and a pop up box will opens with a text box. Now you can type or enter your desired text in this box, for assistance look at the picture below,

Scrolling Text Box Pop Up

And you are done.

It you like this article, please write a few lines in the comments box below and don’t forget to share it on social media.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top