Nokia: Left Sidebar

Nokia: Left Sidebar _Đây là Demo: Khung chứa Code.
Các bạn bấm Update bên dưới và scroll to bottom click Back to top để xem kết quả.

Source Code	Result
<!-- HTML Codes by Testtemplatekhoi.blogspot.com --> <!DOCTYPE html> <html> <head> <style> a:link {text-decoration: none} .button-steel { background: url("http://www.jotform.me/images/steel.png") repeat scroll 50% 50% #d4d4d4; border: 1px solid #999999 !important; border-radius: 3px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.4); color: #808080; cursor: pointer; font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold;outline:none; padding: 6px 18px; text-shadow: 0 1px 0 #ffffff; text-transform: uppercase; } .button-steel:hover { background: url("http://www.jotform.me/images/steel.png") repeat scroll 50% 50% #d4d4d4;color:#555 } pre{display:block;font:normal 12px Monaco,"Courier New",Courier,monospace !important;padding:0.5em 0.5em 0.5em 1em;background-color:#fff;border-left:4px solid #268bd2!important;position:relative;overflow:auto;border:1px solid #268bd2;white-space:pre;word-wrap:normal !important;color:#000} pre[data-codetype]{padding:29px 1em 7px 1em} pre[data-codetype]:before{content:attr(data-codetype);display:block;position:absolute;top:0;right:0;left:0;background-color:#666;padding:0 7px;color:white} pre[data-codetype="HTML"]{border-color:#0B7E88;color:#333} pre[data-codetype="CSS"]{border-color:#7B990C;color:#333} pre[data-codetype="JavaScript"]{border-color:#545448;color:#333} pre[data-codetype="JQuery"]{border-color:#395540;color:#333} pre[data-codetype="PHP"]{border-color:#F90;color:#333} pre[data-codetype="XML"]{border-color:#FF0C39;color:#333} pre[data-codetype="Kết Quả"]{border-color:#999;color:#333} pre[data-codetype="HTML"]:before{background-color:#0B7E88} pre[data-codetype="CSS"]:before{background-color:#7B990C} pre[data-codetype="JavaScript"]:before{background-color:#545448} pre[data-codetype="JQuery"]:before{background-color:#395540} pre[data-codetype="PHP"]:before{background-color:#F90} pre[data-codetype="XML"]:before{background-color:#FF0C39} pre[data-codetype="Kết Quả"]:before{background-color:#999} pre .the-num{display:none} pre .bracket{color:darkpink} pre .tag,pre .tag .keyword,pre .tag .attribute{color:blue} pre .selector{color:blue} pre .attribute,pre .regexp{color:darkorange} pre .str{color:green} pre .tag .str{color:brown} pre .keyword{color:darkgreen} pre .comment{font-style:italic;color:#999} pre .num,pre .hex{color:darkviolet} pre .name,pre .important,pre .array{color:red} pre .important{background-color:yellow} pre .doctype{color:magenta} </style> </head> <body> <h1 class="center"> Khung chứa Code theo mục lục</h1> <p class="center"> CSS, JS ,HTML, KẾT QUẢ.</p> <span class="button-steel">Demo</span><br/><br/> <button class="button-steel">Submit</button><br/><br/> <a class="button-steel" href="#">Download</a><br/><br/> <input type="button" class="button-steel" value="Button name"/> <pre data-codetype="JQuery"> content here </pre> </body> </html>

Source Code

Result

<!DOCTYPE html>
<html>
 <head>
  <style>
a:link {text-decoration: none}
.button-steel {
    background: url("http://www.jotform.me/images/steel.png") repeat scroll 50% 50% #d4d4d4;
    border: 1px solid #999999 !important;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    color: #808080;
    cursor: pointer;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;outline:none;
    padding: 6px 18px;
    text-shadow: 0 1px 0 #ffffff;
    text-transform: uppercase;
}
.button-steel:hover {
    background: url("http://www.jotform.me/images/steel.png") repeat scroll 50% 50% #d4d4d4;color:#555
}
pre{display:block;font:normal 12px Monaco,"Courier New",Courier,monospace !important;padding:0.5em 0.5em 0.5em 1em;background-color:#fff;border-left:4px solid #268bd2!important;position:relative;overflow:auto;border:1px solid #268bd2;white-space:pre;word-wrap:normal !important;color:#000}
pre[data-codetype]{padding:29px 1em 7px 1em}
pre[data-codetype]:before{content:attr(data-codetype);display:block;position:absolute;top:0;right:0;left:0;background-color:#666;padding:0 7px;color:white}
pre[data-codetype="HTML"]{border-color:#0B7E88;color:#333}
pre[data-codetype="CSS"]{border-color:#7B990C;color:#333}
pre[data-codetype="JavaScript"]{border-color:#545448;color:#333}
pre[data-codetype="JQuery"]{border-color:#395540;color:#333}
pre[data-codetype="PHP"]{border-color:#F90;color:#333}
pre[data-codetype="XML"]{border-color:#FF0C39;color:#333}
pre[data-codetype="Kết Quả"]{border-color:#999;color:#333}
pre[data-codetype="HTML"]:before{background-color:#0B7E88}
pre[data-codetype="CSS"]:before{background-color:#7B990C}
pre[data-codetype="JavaScript"]:before{background-color:#545448}
pre[data-codetype="JQuery"]:before{background-color:#395540}
pre[data-codetype="PHP"]:before{background-color:#F90}
pre[data-codetype="XML"]:before{background-color:#FF0C39}
pre[data-codetype="Kết Quả"]:before{background-color:#999}
pre .the-num{display:none}
pre .bracket{color:darkpink}
pre .tag,pre .tag .keyword,pre .tag .attribute{color:blue}
pre .selector{color:blue}
pre .attribute,pre .regexp{color:darkorange}
pre .str{color:green}
pre .tag .str{color:brown}
pre .keyword{color:darkgreen}
pre .comment{font-style:italic;color:#999}
pre .num,pre .hex{color:darkviolet}
pre .name,pre .important,pre .array{color:red}
pre .important{background-color:yellow}
pre .doctype{color:magenta} 
  </style>
 </head>
<body>

<h1 class="center">
      Khung chứa Code theo mục lục</h1>
<p class="center">
CSS, JS ,HTML, KẾT QUẢ.</p>
<span class="button-steel">Demo</span><br/><br/>
     <button class="button-steel">Submit</button><br/><br/>
     <a class="button-steel" href="#">Download</a><br/><br/>
     <input type="button" class="button-steel" value="Button name"/>
<pre data-codetype="JQuery">
content here
</pre>
</body>
</html>