Tuesday, August 25, 2015

How to Create a ready-to-edit Text Or Table On Every New Post Automatically?
Some days ago, my sister asked me about Samsung Galaxy Y Duos. She asked me- What is its price? In what color it is available? Its screen size and blablabla. So, I opened flipkart because they also give mobile/android's specifications and information in tables. So, I checked them and got the answers of my sister’s questions. I left the Flipkart tab opened in Chrome. After telling answers of my sister’s asked question, I looked up at that table.I thought, how is it difficult for a person to write new posts about android specifications. I was not really thinking about how they write but I was thinking why they waste their time in creating same tables on different posts?

Actually, this post is for blogs which are about Android/iOS/iPhone specifications or a blog which is about anything which provides 60% same data every time, in every post. Like, in Flipkart, they every time create tables with same color, headings, columns (left side) and rows with same text but the only thing which is different is- the data in second column.
So, think, if your blog is on blogger, what would happen if a ready-to-edit table will automatically come, every time you press the ‘New Post’ button? Oh of course! It will make easy lots of your work!

So, in this article, I am going to tell you about how to create a read-to-edit table or text for Same Pattern Posts. Means, you will have to put a code one time and whenever you will click ‘New Post’ button, a table (or any code or text you will put) will get automatically created on new post’s editor. The thing you will have to do is, just change the data according to your needs.

How to Create a ready-to-edit Text?

Note:- The options and steps mentioned below are only present in Blogger. So, if your blog is on another platform, you can read this post only for increasing your knowledge. :)
Step 1. Go to Blogger Dashboard > Settings > Posts and comments > Post Template(Option)
Step 2. Click on ‘Add’ Option and put the words ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’.

Enter the text on Post Templte Option
Step 3. Click on Save settings.
Step 4. Click on ‘New Post’ (orange) button, present on the top-left corner of blogger dashboard window.
Step 5. You will see that in the new post, the words you had entered in ‘Post Template’ are present there.

The text will automically be created on editor!
Cool? Have you jumped? Yeah, because it is a fabulous trick which is by Blogger itself but only some peoples know this. (Now, you are also in those ‘some’ peoples)

How to Create Tables Using ‘Post Template’ Option?

You can create tables too, using this trick (as mentioned earlier). This time, just put table’s HTML code in Post Template option and you will get a table in every new post editor. If, you are getting confused, then let me tell you how to create tables or say ready-to-edit tables automatically in every new post editor.

Steps are following:

Step 1. Go to Blogger Dashboard > … … … > Post Template
Step 2. Click on ‘Add’ option and paste below code in it.

<table cellspacing="0" class="specTable">
<tbody>
<tr>
<th class="groupHead" colspan="2">GENERAL FEATURES</th>
</tr>
<tr>
<td class="specsKey">Brand</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Business Features</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Handset Color</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Form</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Keypad</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">SIM Size</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Call Features</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Model Name</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Touch Screen</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">SIM Type</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">Model ID</td>
<td class="specsValue">Edit It.</td>
</tr>
<tr>
<td class="specsKey">In the Box</td>
<td class="specsValue">Edit It.</td>
</tr>
</tbody></table>
Step 3. Now, click on ‘Save Settings’ button.
Step 4. Go to Blogger Dashboard > Template > Edit HTML
Step 5. Now, search for ‘]]></b:skin>’ in your template.
Step 6. After it, copy-paste following CSS chunk above ‘]]></b:skin>’

table.specTable {
width:100%;
}
.specTable th {
  font-size: small;
  padding: 7px 5px;
  background: #000000;
  text-transform: uppercase!important;
  color: #FFF;
  text-align: left;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  font-family: oswald;
  font-weight: 400;
}
.specTable td {
  background: #FCFCFC;
  padding: 12px;
  width: auto;
  height: auto;
  border: 1px solid;
}
Step 7. Now save your template and navigate for creating a new post.
You will find this table when you will enter in New Post Editor:-

Normal, Automatically Created Table
Step 8. Now, just edit the text (I know, you can) and publish it!
You will see, that, this normal table will get converted into this amazing table:-

Stylish table without editing
Edited Table Example:-

Stylish table after editing
Note:- If you want a normal table, then leave steps 4-6.

Thank You! Don't forget to put your query in comments. :)