How To Usage Journal Agency Alongside Postal Service Summaries Too Thumbnails On Blogger

The magazine or paper fashion templates are those that display the posts summaries inward the homepage yesteryear stacking the columns on overstep of each other. These kinds of templates are rattling pop nowadays, as well as whether it is a tidings or applied scientific discipline blog, everyone needs a fresh magazine fashion layout for their blogs.

There are several ways to brand posts appear this way. An selection would live to role the Read to a greater extent than script to display a summary of the posts as well as add together a conditional tag to add together a dissimilar fashion on the firstly postal service hence that it volition convey a larger width than the older posts. So, this tutorial volition present yous how to exercise a magazine fashion for a Blogger Template. By next this tutorial, yous tin brand your ho-hum as well as unproblematic Blogger template convey an attractive magazine fashion layout.

To run into how it looks, delight take in this demo blog.

Adding the Magazine/Newspaper fashion to a Blogger Template

Step 1. Before proceeding further, delight brand a backup of your electrical flow template to brand certain that yous won't lose anything of import - log into your Blogger Dashboard as well as become to Template, hence click on the Backup/Restore button. After you've got a re-create of the xml template, click on the Edit HTML button:

Step 2. Click anywhere within the code expanse as well as search yesteryear using CTRL + F keys for this line:

Note: You'll discovery it to a greater extent than than i time, but terminate at the minute i inward social club to run into the changes.

Step 3. Remove that occupation as well as instead of it add together this code:

 

 
Read More »

Note: yous tin supervene upon the Read More text, yesteryear changing the code inward red.

Step 4. Now discovery (CTRL + F) this line:

Step 5. Remove this every bit good as well as instead of it add together this:

 

Read More »

Note: yous tin alter the Read More text hither also, only supervene upon the code inward scarlet amongst the text that yous desire to show.

Step 6. Find the tag as well as glue the next script before/above it:

 

Step 7. And below the script higher upwards add together the CSS styles:

Customizing the Magazine Layout

1. At the start of the script from measurement 6, nosotros convey this section:

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

• the firstly publish is the publish of characters for the small-scale posts when at that topographic point volition live no icon available
• the sec publish is the publish of characters that volition present when the small-scale posts volition convey an image
• the tertiary as well as the fourth occupation is for the elevation as well as width of the small-scale posts thumbnails (images).
• the same goes for what is inward blue, but this affects alone the firstly post. Since the firstly postal service is wider, it may incorporate a larger publish of characters as well as we'll live able to brand the thumbnail size larger.

2. And finally, nosotros convey the CSS styles. That lastly matter nosotros added is a code that determines how the posts are going to await on the homepage - as well as archive pages every bit well, except for the firstly post.

To alter the width as well as height, respectively the size for the firstly postal service container, await for these lines:

width: auto;
height: 250px;

Underneath the firstly postal service are the values for the other posts, only await for this part:

width: 46%;
height: 230px;

The width volition ocuppy 46% of the chief column width as well as elevation is gear upwards to 230px. Here yous may ask to experiment a chip amongst the sizes inward social club to brand them appear correctly.

Finally, gear upwards the publish of posts to present on the homepage, hence that at that topographic point won't live whatever empty space. Go to Settings > Posts as well as comments > Show at most as well as lead the publish of posts that yous desire to appear.