Realistic Notepad with Lined Paper Text Box for Blogger

Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.

Realistic Notepad with Lined Paper Text Box
Wanna highlight your HTML, CSS, or JavaScript codes or Blockquotes in a notepad style text box. Yeah..Its possible now. Ive already shared three different styles of CSS text or code boxes for blogspot users. But, I hope this realistic notepad with lined paper style text box is completely different from others. Because each part, including lines of this notepad is created using linear gradients, creating the content absolutely versatile in dimensions and having the mark-up clean.

Also includes a stitched heading style to highlight the text title. Its original PSD is created by Mathieu Berenguer. This notepad style text box is too awesome in looks. As I mentioned, Its created in PSD and just succeeded to blogorize it for blogspot platform. So, before we dive into this tutorial, Ive already bought a demo of this widget. Slightly visit our LS Demo Blog and see a sneak peek of the finished result.

Realistic Notepad with Lined Paper – Live Demo

Realistic Notepad with Lined Paper

Please note: This notepad style CSS text box works perfectly with Chrome 14 (and above) Firefox 4, Apple safari 4, Opera 10 and Internet Explorer 8 and above. More over, for your desired satisfaction I recommend you try this widget on Chromes latest version (Version 28.0.1500.72 m) or Apples Safari (Version 5.1.7).

   Notepad Heading & Lined Paper with CSS Style Sheets

Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a novice Blogger, itll be a little bit complicated. Therefore, follow each steps provided below very carefully and in advance, backup your template before you dive into the template HTML editor.

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below


Now copy & paste the below code just above/before ]]></b:skin> [use Ctrl+F to find the code].

body {
    font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
.notepad, .notepad:before, .notepad:after {
    background-color: white;
    background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-
gradient(#e8e8e8 1px, transparent 1px);
    background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient
(#e8e8e8 1px, transparent 1px);
    background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e8 
1px, transparent 1px);
    background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px,
transparent 1px);
    background-size: 1px 1px, 1px 1px, 23px 23px;
    background-repeat: repeat-y, repeat-y, repeat;
    background-position: 22px 0, 24px 0, 0 50px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
.notepad {
    position: relative;
    margin: 5px auto;
    padding: 0 23px 14px 35px;
    width: 300px;
    line-height: 23px;
    font-size: 11px;
    color: #666;
.notepad p, .notepad blockquote {
    margin-bottom: 23px;
.notepad :last-child {
    margin-bottom: 0;
.notepad:before, .notepad:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 3px;
    right: 3px;
    margin-top: -2px;
    height: 4px;
    background-size: 1px 1px, 1px 1px, 0 0;
.notepad:before {
    z-index: -2;
    left: 6px;
    right: 6px;
    height: 6px;
    background-color: #eee;
.notepad-heading {
    position: relative;
    margin: 0 -23px 14px -35px;
    height: 38px;
    background: #14466a;
    border-radius: 2px 2px 0 0;
    background-image: -webkit-linear-gradient(top, #226797, #0c3452);
    background-image: -moz-linear-gradient(top, #226797, #0c3452);
    background-image: -o-linear-gradient(top, #226797, #0c3452);
    background-image: linear-gradient(to bottom, #226797, #0c3452);
    -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
    box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
.notepad-heading > h2 {
    line-height: 36px;
    font-size: 14px;
    color: white;
    text-align: center;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
.notepad-heading:before, .notepad-heading:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 1px;
    right: 1px;
    height: 0;
    border-top: 1px dashed #617c90;
    border-color: rgba(255, 255, 255, 0.35);
.notepad-heading:after {
    bottom: 3px;
    border-color: #071c2c;
    border-color: rgba(0, 0, 0, 0.5);

   » Basic CSS Code Customizations

   - Replace Lucida Grande', Verdana, sans-serif with your desired font family.
   - Replace Width: 300px to adjust your notepads width.
   - Replace line-height: 23px with your desired line paper height you prefer.
   - Replace 11px & #666 [both line no: 27 & 28] with desired font size & color.
   - Number 68 - 71 are the customization related to notepad heading.

I assume you already know how to deal with basic needs you prefer on this widget. Yeah..its easy to customize beyond that I mentioned above but only if you know a little bit of CSS. Nonetheless, if you cant, never be indecisive to mention your precious needs via comment.

Now click Save template and youve added the CSS Style Sheets in your Blogger template successfully. You can use the following HTML code snippet to add this notepad style text box to your blog or blog post [in Edit HTML section] to see the sneak peek of the finished widget.

<div class="notepad">
<div class="notepad-heading">
<h2>LABSTRIKE - Technology Blog</h2>
<blockquote>Your Text Here</blockquote>

HTML Customizations: Replace LABSTRIKE - Technology Blog with your heading text and you can highlight your texts only between blockquote tags and you can use the <br /> tag to have new line. Also if youre using this text box to display CSS, HTML, or JavaScript code snippets, do encode your code snippets before using. To encode or phrase your Code snippets, vist

» LS Text Box Series: Professional CSS Text Box | CSS Box with Hover & Active Effects | Box for HTML/JavaScript Coding