How to frame text or scripts with scroll bar on blogpost

Using a div with scrollbars is an easy way to put a lot of information within a limited space, something you might typically want to do in a sidebar.

HTML is really much easier than it looks. Ok, let me re-state that: when publishing a blog, the groundwork is already done for us, we are left to play with the goodies: fiddling around with the text and images. And fiddling we do!
Someone asked me how to put a text within a scroll bar so he can easily copy the text or code.

Here we go:

The HTML code for the scroll bar above is:

<div style="text-align: center;">
<b><span style="background-color: white;">CODE</span></b></div>
<div style="text-align: center;">
<textarea onclick="this.focus();this.select()" readonly="readonly" style="height: 300px; width: 500px;">  

YOUR TEXT OR CODE  HERE    

</textarea></div>
<div dir="ltr" style="text-align: left;">
<div style="text-align: center;">
<span style="background-color: white; line-height: 20px;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>

OR

CODE

<div style="text-align: center;"> <b><span style="background-color: white;">CODE</span></b></div> <div style="text-align: center;"> <textarea onclick="this.focus();this.select()" readonly="readonly" style="height: 300px; width: 500px;"> YOUR TEXT OR CODE HERE <//textarea><//div> remove extra slash here

Edit the width and height at your choice..

Other sample :

CODE

<!-- facebook --> <div id="fb-root"> </div> <script> window.fbAsyncInit = function() { FB.init({ appId : '107963722663354', // App ID xfbml : true, // parse XFBML version : 'v2.3' // sdk version }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- /facebook -->