Guide to highlight the first article for blogspot

Updated: 11 Mar, 2018 March 11, 2018
In this article I would like to guide you to create the first article highlights compared to the article, the advantage to help the reader create points, strange. And can customize according to each person's preferences for his blog.
Applying this trick requires knowledge of CSS as well as the beauty of the article. The design is responsive when displayed on mobile devices, individually.

Let's get started, before making your backup of your template, if in case of errors you can easily backup the template.


You need to find the following tag in your template 
<b: include data = 'post' name = 'post' />
And change that to 
<b: if cond = 'data: blog.pageType == & quot; index & quot;'>
<b: if cond = 'data: post.isFirstPost == & quot; true & quot;'>
<div class = ' first-post '>
<b: include data = 'post' name = 'post' />
</ div>
<b: else />
<b: include data = 'post' name = 'post' />
</ b: if>
<b: else />
<b: include data = 'post' name = 'post' />
</ b: if>
Then set the HTML for the first post, then we need to decorate this article. 

I will take an example of CSS for the image, if in your template CSS to format the image like this 
.post img {
float: left;
margin-right: 15px;
You just add the .first-post attribute that you red in the HTML paragraph to the CSS on it will do this 
.first-post .post img {
float: right;
margin-left: 15px;
I edited the image properties in the first post differently than the images in the next post. As for the other properties depending on your template that can be edited more beautifully, so from the beginning you mentioned that you need to have certain knowledge of CSS.


That is, in this article I have provided you with a little trick to make your blog more prominent. If you have any problems during the process, please leave comments below and we will respond!
Liên hệ quảng cáo