Reaistic Notepad with Lined Paper Text Box for Blogger




Apple iPhone 7 Plus (256 GB):
for Best Commentators

Winner will be announced on 30 January 2017.


Realistic Notepad with Lined Paper Text Box
Wanna highlight your HTML, CSS, or JavaScript codes or Blockquotes in a notepad style text box. Yeah..It’s possible now. I’ve 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, It’s created in PSD and just succeeded to blogorize it for blogspot platform. So, before we dive into this tutorial, I’ve 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



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 Chrome’s latest version (Version 28.0.1500.72 m) or Apple’s Safari (Version 5.1.7).


   Notepad Heading & Lined Paper with CSS Style Sheets

Due to Blogger’s tweak in Blogger template HTML editor, become more advanced for developers. So if you’re a novice Blogger, it’ll 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 you’re 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 ]]> [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..it’s easy to customize beyond that I mentioned above but only if you know a little bit of CSS. Nonetheless, if you can’t, never be indecisive to mention your precious needs via comment.


Now click Save template and you’ve 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.



"notepad">

"notepad-heading">

2>LABSTRIKE - Technology Blog2>

Your Text Here


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
tag
to have new line. Also if you’re 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 htmlentities.net.

via Blogger http://www.droidadda.org/2017/01/reaistic-notepad-with-lined-paper-text.html https://mtkdr0id.files.wordpress.com/2017/01/a793e-css-notepad-style-box.png?w=174

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s