How to Add a Scroll Box inside blog post...
Scroll Box is a simple box which can be scrolled separately apart from page scrolling. This helps when a blogger wants to add content which is large in quantity. Example- HTML, CSS codes etc.
Follow these steps to add scroll box in blogger posts…
1- Open your Blogger account.
2- Click on New Post.
3- Switch the editing
tab form Compose to HTML.
4- Now paste this below code.
<center>
<div style="height: 100px; overflow: scroll; padding: 5px; text-align: left; width: 100%;">
Scroll Box By www.all-trending-topics.com
</div>
</center>
5- Once you paste the
code, change the editing tab from HTML
to Compose.
Now you will see the
Scroll box on your page.
If you want to change the height and width of Scroll Box then, just change these numbers according to your blog template size.
<div style="height: 100px; overflow: scroll; padding: 5px; text-align: left; width: 100%;">
|
Important Tip- If you keep the width 100% then it will fit in all device screens.
Change the Background Color of Scroll Box.
Follow these steps to
change the Background color of Scroll Box.
1- Open Blogger.com
and Login to your account.
2- Click on New Post.
3- Switch the post
editing tab form Compose to HTML.
4- Paste this code.
<center>
<div
style="height: 100px; overflow: auto; padding: 5px; text-align: left;
width: 100%;">
<div
class="MsoNormal" style="background: #000000;">
<span
style="color: white; font-family: Times New Roman;">Scroll Box By
www.all-trending-topics.com
</span></div>
</div>
</center>
If you do not like the
color (of above scroll box) then you can change it. Below there is a list of
color codes. Copy any color code and paste it in place of #000000.
<div
class="MsoNormal" style="background: #000000;">
|
Example...
<center>
<div style="height: 150px; overflow: auto; padding: 5px; text-align: left; width: 100%;">
<div class="MsoNormal" style="background: #00FF00;">
<span style="color: Black; font-family: Times New Roman;">Scroll Box By www.all-trending-topics.com
</span></div>
</div>
</center>
Color Code- #CC0033
<center>
<div
style="height: 100px; overflow: auto; padding: 5px; text-align: left;
width: 100%;">
<div
class="MsoNormal" style="background: #CC0033;">
<span
style="color: white; font-family: Times New Roman;">Scroll Box By
www.all-trending-topics.com
</span></div>
</div>
</center>
HTML color codes.
#003300
|
#003333
|
#003366
|
#006600
|
#006633
|
#006666
|
#009900
|
#009933
|
#009966
|
#00CC00
|
#00CC33
|
#00CC66
|
#00FF00
|
#00FF33
|
#00FF66
|
#330000
|
#330033
|
#330066
|
#333300
|
#333333
|
#333366
|
#336600
|
#336633
|
#336666
|
#339900
|
#339933
|
#339966
|
#33CC00
|
#33CC33
|
#33CC66
|
#33FF00
|
#33FF33
|
#33FF66
|
#660000
|
#660033
|
#660066
|
#663300
|
#663333
|
#663366
|
#666600
|
#666633
|
#666666
|
#669900
|
#669933
|
#669966
|
#66CC00
|
#66CC33
|
#66CC66
|
#66FF00
|
#66FF33
|
#66FF66
|
#990000
|
#990033
|
#990066
|
#993300
|
#993333
|
#993366
|
#996600
|
#996633
|
#996666
|
#999900
|
#999933
|
#999966
|
#99CC00
|
#99CC33
|
#99CC66
|
#99FF00
|
#99FF33
|
#99FF66
|
#CC0000
|
#CC0033
|
#CC0066
|
#CC3300
|
#CC3333
|
#CC3366
|
#CC6600
|
#CC6633
|
#CC6666
|
#CC9900
|
#CC9933
|
#CC9966
|
#CCCC00
|
#CCCC33
|
#CCCC66
|
#CCFF00
|
#CCFF33
|
#CCFF66
|
#FF0000
|
#FF0033
|
#FF0066
|
#FF3300
|
#FF3333
|
#FF3366
|
#FF6600
|
#FF6633
|
#FF6666
|
#FF9900
|
#FF9933
|
#FF9966
|
#FFCC00
|
#FFCC33
|
#FFCC66
|
#003399
|
#0033CC
|
#0033FF
|
#006699
|
#0066CC
|
#0066FF
|
#009999
|
#0099CC
|
#0099FF
|
#00CC99
|
#00CCCC
|
#00CCFF
|
#00FF99
|
#00FFCC
|
#00FFFF
|
#330099
|
#3300CC
|
#3300FF
|
#333399
|
#3333CC
|
#3333FF
|
#336699
|
#3366CC
|
#3366FF
|
#339999
|
#3399CC
|
#3399FF
|
#33CC99
|
#33CCCC
|
#33CCFF
|
#33FF99
|
#33FFCC
|
#33FFFF
|
#660099
|
#6600CC
|
#6600FF
|
#663399
|
#6633CC
|
#6633FF
|
#666699
|
#6666CC
|
#6666FF
|
#669999
|
#6699CC
|
#6699FF
|
#66CC99
|
#66CCCC
|
#66CCFF
|
#66FF99
|
#66FFCC
|
#66FFFF
|
#990099
|
#9900CC
|
#9900FF
|
#993399
|
#9933CC
|
#9933FF
|
#996699
|
#9966CC
|
#9966FF
|
#999999
|
#9999CC
|
#9999FF
|
#99CC99
|
#99CCCC
|
#99CCFF
|
#99FF99
|
#99FFCC
|
#99FFFF
|
#CC0099
|
#CC00CC
|
#CC00FF
|
#CC3399
|
#CC33CC
|
#CC33FF
|
#CC6699
|
#CC66CC
|
#CC66FF
|
#CC9999
|
#CC99CC
|
#CC99FF
|
#CCCC99
|
#CCCCCC
|
#CCCCFF
|
#CCFF99
|
#CCFFCC
|
#CCFFFF
|
#FF0099
|
#FF00CC
|
#FF00FF
|
#FF3399
|
#FF33CC
|
#FF33FF
|
#FF6699
|
#FF66CC
|
#FF66FF
|
#FF9999
|
#FF99CC
|
#FF99FF
|
#FFCC99
|
#FFCCCC
|
#FFCCFF
|
1 comment:
Shared! Shared! This is AWESOME stuff man! Thank you!
Youtube Videos
Post a Comment