Blog Posts, most important of the Blogspot Widget

6:05 AM

Have you read the title is part of the article content, this is the case. Article today we will talk about the  Blog Posts Widget (Widget Bl...

Have you read the title is part of the article content, this is the case. Article today we will talk about the Blog Posts Widget (Widget Blog Posts), the most important Widget Blogspot Template.

We will not dissect someone a template to illustrate the article, we will create a Widget for Blog Post your own then look like this.

The widget begins with an opening tag with the ID is Blog1 Widget and of course will end with a closing tag Widget then, very familiar right?

Data provided by Pastebin.com - Download Raw - See Original
  1. <b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog">
  2. Code bên trong cấu thành nên Widget Blog Posts
  3. </b:widget>

Widget Code inside this is what the code can be so wonderful?

To satisfy curiosity, I guess you can open the template will be shared on the network up and then see a matrix code which leads to depression ... In fact, due to the Upload template, the system automatically adds a significant amount of code in your template, although the code may be added that what does not work for you all that just makes you more trouble ...

With a Widget form as shown on the other side Enclose Widget will only need three main clusters following code is temporarily enough, nothing will more clusters 4, 5 ... etc. .. follows:

Data provided by Pastebin.com - Download Raw - See Original
  1. <b:includable id="post" var="post">
  2. Code phần 1
  3. </b:includable>
  4.  
  5. <b:includable id="nextprev">
  6. Code phần 2
  7. </b:includable>
  8.  
  9. <b:includable id="main" var="top">
  10. Code phần 3
  11. </b:includable>

I will go in part 1 for clarity.

A. Code part 1

Code here is part of a detailed code structure your article as the article title, thumbnail, clip the article content, readmore button ...

First I will create a DIV with a post-item class (what you put in mind that class but also light, not to ID) for clarity, with Style for easy later.

Data provided by Pastebin.com - Download Raw - See Original
  1. <b:includable id="post" var="post">
  2. <div class="post-item">
  3.  
  4. Nội dung phần 1
  5.  
  6. </div>
  7. </b:includable>

You look at the drawing on top, post item is a box that has a red border, 3 cells due to a red line and we may not be user ID (ID must be unique) so I'll use the class.

Specifically, the Code in Part 1 will be as follows:

A. Title:

Enclosed in h1 since last heard such good for SEO (lower natural speculation was that ^ ^):

Data provided by Pastebin.com - Download Raw - See Original
  1. <h1><a expr:href='data:post.url'><data:post.title/></a></h1>

You'll wonder how different it count Template few lines of code that I have a short line can blunt the other, rather it must be with the condition command like you said but this is the new standard offers simple templates the introduction for new, more complex chemical do? Missing a little bit okay, provided you understand is: d

Two. Thumbnail:

There are many ways to get thumbnail but I will choose the easiest way is to use the XML blogspot without touching anything to javascript @ ...

Data provided by Pastebin.com - Download Raw - See Original
  1. <img expr:src='data:post.thumbnailUrl' />

Link photo here is taken through the command data: post.thumbnailUrl, default size is 72x72 pixels and have to upload via the upload of blogspot.

3. Article excerpts:

<data:post.snippet /> these quotations we also use the blogspot XML without using anything else, although that has many disadvantages when using this method which is typical for the number of characters is pretty tight (140 characters) ... However, as mentioned above ... Simple ....

4. Readmore button:

Data provided by Pastebin.com - Download Raw - See Original
  1. <a expr:href='data:post.url'><data:post.jumpText/></a>
  2.  
  3. hoặc
  4.  
  5. <a expr:href='data:post.url'>Xem chi tiết</a>

Card <data:post.jumptext> a domino effect of such words as: "Read more", "Detail" etc. .. set by you in the Admin. You can go to the Admin Panel to change, not directly in the code as above

Here you see the third article, which can have even more ... 50, 100 posts but one need only design 1 items most general as above, then will used loop loop to error times turns of the posts out (will be it comes to in posts follows).

Until this is all part of a Code then, we were summarized as follows:

Data provided by Pastebin.com - Download Raw - See Original
  1. <b:includable id="post" var="post">
  2. <div class="post-item">
  3. <h1><a expr:href='data:post.url'><data:post.title/></a></h1>
  4. <img expr:src='data:post.thumbnailUrl' />
  5. <data:post.snippet/>
  6. <a expr:href='data:post.url'><data:post.jumpText/></a>
  7. </div>
  8. </b:includable>

This article appears to have long and should make the Code for 2 B and C remaining in a separate article I will post to help train entry code (which is every bit as well to split into two posts, humiliation seats ha:-p)

No comments: