How To Make Text Box Copy All

In this good time I'll try to share about Text Box Select or Copy All. This can give the user a button to click Select All the text in that box, so then the user can paste it and save it in they folder or other.

The following script can be used :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">
Write the text or link in here
</textarea></p></div></form>

For example :

<span class="Apple-style-span" style="background-color: white; font-family: 'Courier New', Courier, monospace; font-size: 14px;"><div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><br /> <span class="Apple-style-span" style="color: red;"><b>Write the text or link in here</b></span><br /> </textarea></p></div></form></span>

How To Center The Header Image

A simple way  to make the Header Image in center.

Edit your HTML, note this code :

#header-inner { background-position: center;  margin-left: auto; margin-right: auto;}

To make it on the Left, note this code :

#header-inner { background-position: left;  margin-right: auto;}

To make it on the Right, note this code :

#header-inner { background-position: rigt; margin-left: auto;}

How To Make A Separate Column Of Sidebar

In Edit HTML after you select Design, set in Sidebar Content.

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

The code of each template can be different

To make it a separate of the sidebar, split between .sidebar .widget and .main .widget

example

.sidebar .widget{
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0.5em;
}
.main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

How To Center The Blog Titles

Add this script to your HTML

text-align:center;

example :

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  _background-image: none;
  color: $(header.text.color);
text-align:center;
}

How To Make Readmore With Post Titles

In the previous article, ever share of the Readmore Facility. In this opportunity, I will try to Make Readmore with Post Titles.

• Login Blogger
• Select Design
• Select Edit HTML
• Tick the Expand Widget Templates

Find this code, i.e.

<p><data:post.body/>
<a expr:href='data:post.url'><strong><div style='color: red;'>Readmore &gt;&gt;</div></strong></a></p>

If you found it, you only add this script   <data:post.title/> ,  i.e.

<p><data:post.body/>
<a expr:href='data:post.url'><strong><div style='color: red;'>Readmore &gt;&gt;</div></strong><data:post.title/></a></p>

How To Remove The 'Posted By' Display

At the bottom of the posting, there are views 'Posted By'. If you want to remove it from your blog, you can try this solution.

• Login Blogger.
• Select Design.
• Edit HTML, don't forget to back-up of your template.
• Tick the Expand Widget Template

And then, find the following code :

<span class='post-author'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/> <data:post.author/>
        </b:if>
      </span>

If you've found it, delete the code.
The last one save your template.

How To Make Readmore Facility

Here i will share about How To Make Readmore Facility. Following the steps for making readmore.

Step #1

• Login Blogger
• Select Setting
• Select Formatting

In the Post Template option input the code below

<span class="fullpost">

</span>

• Save Setting

Step #2

• Select Design
• Select Edit HTML
• Tick the Expand Template Widget

Search the following code

<data:post.body>

or

<data:post.body></data:post.body>

Delete the code and replace with this code

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'>Readmore...</a></p>
</b:if>

• Save Template

How To Make Hide And Show Button

Here's the HTML code on How To Make Hide and Show Button.

<div>
<input value="Show" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Enter the text / image to be Hide and Show in on here
</div>
</div>
</div>

How To Create A Text Area / Text Box

You can make Text Area / Text Box inside the post. A Text Area can hold an unlimited number of characters.

In your post, enter the following script

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: rgb #FFFFFF; text-align: center;">Example Text</p>

View

Example Text

How To Create A Box Scroll In The Sidebar

To Create A Box Scroll In The Sidebar, you must follow this step :

Step 1

• Login Blogger
• Select Design
• In the Page Elements click Add a Gadget
• Select Add HTML/Javascript

Step 2

Copy and Paste the following code into your HTML/Javascript.
i.e.

<div style="background: #BDBDBD; border: 1px solid rgb(153, 153, 153); height: 105px; overflow: auto; text-align: center; width: 215px;">
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
</div>

View

Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8

To set the background or width and height of the column, replace the text in red.