Sunday, 6 July 2014

CODE OR TEXT WRITING BOX

CODE WRITING BOX

CODE WRITING BOX



--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN HTML
----------------------------------------------------------------------------------------------------------

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<br /></div>
</div>
========================================================================
http://emuzonebd.blogspot.co.uk/2015/03/get-try-my-code-offline-version-of.html
http://www.sitepoint.com/everything-need-know-html-pre-element/

Pre Tags Styling Tutorials & Resources

posted by Audee Mirza | Monday, June 14, 2010




The ‹pre› tag is used to display preformatted text or code snippet to a web page. Some web design related blogs would use simple plugin that easily post syntax-highlighted code with its complete functionality (ie: view source, copy to clipboard, print). However, you can style this ‹pre› element to appear neat, stylish and usable by having deep understanding of how this web element works especially in different browsers. Here are some tutorials and resources about ‹pre› Tags Styling to get you start with.


Styling Code Snippets with CSS by Soh Tanaka





Read More
========================================================================
PRE TAG CODE:
========================================================================

<html>
<!--
http://jsfiddle.net/9mcn7/
view-source:http://fiddle.jshell.net/9mCN7/show/
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - jsFiddle demo</title>
<style type='text/css'>
pre {
white-space: pre-wrap;
background: #a8e
}
code {
background: #ae8;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
});//]]>
</script>
</head>
<body>
This line uses the <code>&lt;code&gt;</code> element.
<div style="width:300px; border: 1px solid blue; margin: 2em;">
And here's some random HTML code:
<pre>
-- if class slot unavailable, check super class
-- if applied to argument, pass it to the class method new      
setmetatable(class, {
__index = function(self,key) return self.super[key] end,
__call  = function(self,...) return self.new(self,unpack(arg)) end
})
-- if instance method unavailable, check method slot in super class  
setmetatable(class.methods, {
__index = function(self,key) return class.super.methods[key] end
})
return class</pre>
</div>
Notice that it wraps, while still preserving the original whitespace as much as possible.
</body>
</html>

========================================================================
READ MORE:
http://www.html.am/html-codes/image-codes/
http://fbgadgets.blogspot.co.uk/2014/07/basic-text-or-scroll-box-or-image-src.html
http://labstrikes.blogspot.co.uk/2013/07/notepad-with-css.html
LINED PAPER IN TEXT BOX
======================================================================

Realistic Notepad with Lined Paper Text Box for Blogger

Posted On : 12:31 AM  Post Author : Aakanksha Saathvik Categories: Blogger Widgets,Box Text,Css,Css Box,Css Notepad,Css Text Box,Notepad Css,Notepad Text Style,Notepad Write Css
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

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 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

?
1
]]></b:skin>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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 notepad’s 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.

?
1
2
3
4
5
<div class="notepad">
<div class="notepad-heading">
<h2>LABSTRIKE - Technology Blog</h2>
</div>
<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 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.

» LS Text Box Series: Professional CSS Text Box | CSS Box with Hover & Active Effects | Box for HTML/JavaScript Coding
- See more at: http://labstrikes.blogspot.co.uk/2013/07/notepad-with-css.html#sthash.oAikjtt6.dpuf

========================================================================
OR THIS CODE
view-source:http://fiddle.jshell.net/chriscoyier/KVjFQ/1/show/
======================================================================

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - jsFiddle demo by chriscoyier</title>
<style type='text/css'>
body {
background-color :#f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}
h4 {
color: #cd0000;
font-size: 42px;
letter-spacing: -2px;
text-align: left;
}
.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}
.list li:hover {
background-color: #f0f0f0;
-webkit-transition: all 0.2s;
-moz-transition:    all 0.2s;
-ms-transition:     all 0.2s;
-o-transition:      all 0.2s;
}
.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}
</style>
</head>
<body>
<h4>Notes</h4>
<div class="lines"></div>
<ul class="list">
<li>Eat Breakfeast</li>
<li>Feed Pugsly, the cow</li>
<li>Sit Down</li>
<li>Eat lunch</li>
<li>Call mom</li>
<li>Tweet about feeding my cow, pugsly</li>
<li>Join a hangout in google+</li>
<li>Prepare Dinner</li>
<li>Eat Dinner</li>
<li>Get ready for bed</li>
<li>Go to bed</li>
</ul>

</body>
</html>


Posted by on Sunday, 6 July 2014 at 13:19
Labels: , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets