How to display blogger posts in grid view with thumbnails

So you also have the same query which we have for this blog. We want to display our posts in grid view with thumbnails. After spending hours and hours on internet in search of a code for this purpose, we found one on a blog which is working perfectly for our blog. You can find the code here: https://helplogger.blogspot.com/2014/05/display-blogger-posts-in-grid-view-with-thumbnails.html

However there are many questions which we have and we need answers of those questions to make a better look of our blog. Let´s start with the questions which we have solved till now. 

What should be changed in this code so that text should be in black letters?

To change the color of the text to black, you can add a CSS rule to the style section:

.postThumbnail a.postThumbnail div {

  color: black;

}

This will set the color of the text inside the <div> element to black. Add this rule after the existing color rule inside the .postThumbnail a.postThumbnail div selector.

Need background of text white

To change the background color of the text to white, you can modify the following style rule:

a.postThumbnail div {

    background: rgb(255,255,255);

    background: -moz-linear-gradient(top,  rgba(14,14,14,1) 0%, rgba(14,14,14,1) 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));

    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#7d7e7d&#39;,endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );

}

You can replace it with the following code to set the background color of the text to white:

a.postThumbnail div {

    background-color: #ffffff;

}

Note that you don't need to include the other background style properties as they are for creating a gradient effect. The background-color property is sufficient to set a solid background color.

if we want transparent

To make the text background transparent, you can change the CSS rule for the a.postThumbnail div selector to include the background-color property with a value of transparent, like this:

a.postThumbnail div {

  text-decoration: none;

  color: #ffffff;

  padding:0 5px;

  height:120px;

  font:bold 15px/20px "Trebuchet MS",Trebuchet,Verdana,sans-serif;

  text-transform: capitalize;

  background-color: transparent; /* add this line */

}

This will make the background of the text transparent, so any underlying content or background will show through.

How to reduce space between two rows of posts?

To reduce the space between two rows of posts, you can adjust the CSS margin property of the ".post" class.

In your code, the ".post" class has the following properties:

.post {

    width:30.3%;

    float:left;

    display:inline-block;

    border-bottom: medium none;

    margin: 0 1% 2%;

    padding-bottom: 0;

}

To reduce the space between two rows of posts, you can decrease the bottom margin by changing the margin-bottom value from 2% to a smaller value, for example, 1% or 0.5%.

For example, you can change the code to: 

.post {

    width:30.3%;

    float:left;

    display:inline-block;

    border-bottom: medium none;

    margin: 0 1% 1%;

    padding-bottom: 0;

}

This will reduce the bottom margin of each post and decrease the space between two rows of posts. You can adjust the value as per your requirement.

If it is not reducing

If the spacing between the rows of posts is not reducing, there could be a few reasons why:

• The CSS selector you are using to target the rows of posts may not be correct. Double-check that you are using the correct selector and that it is targeting the rows you want to modify.
• The CSS property you are using to reduce the spacing may not be the correct one. Make sure you are using the appropriate property for adjusting vertical spacing, such as "margin" or "padding", and that you are modifying the correct values (e.g. top or bottom margin).
• The CSS specificity of your style rule may not be strong enough to override the default spacing. Try adding a more specific selector to your CSS rule, such as a class or ID, to give it more weight.
• There may be other styles in your CSS that are overriding your spacing changes. Try using your browser's developer tools to inspect the element and see which styles are being applied, and adjust your CSS accordingly.

We need a code for it

Certainly! Here's a sample code to reduce the space between two rows of posts:

.post-grid {

  display: flex;

  flex-wrap: wrap;

  margin: -10px; /* adjust this value as needed */

}

.post-grid .post {

  flex: 0 0 25%; /* adjust this value as needed */

  padding: 10px; /* adjust this value as needed */

  box-sizing: border-box;

}

.post-grid .post:nth-child(n+5) {

  margin-top: 0; /* adjust this value as needed */

}

In this code, you can adjust the values of margin, flex, padding, and margin-top to suit your needs. Note that this code assumes you're using a grid or flexbox layout for your posts.

Which part of previous code should be replaced with this new one? 

You can replace the margin-bottom property in the previous code with the new one to reduce the space between two rows of posts. Here's an example:

.post {

  /* existing styles */

  margin-bottom: 20px; /* replace this value with your desired space between rows */

}

Adjust the 20px value to your desired space between rows. You may also need to adjust the selector .post to match the selector for your posts.

Codes for solving all above questions

Here's a code snippet that should address all the questions you've raised so far:

<style>

  /* Reduce space between rows of posts */

  .post { margin-bottom: 10px; }

  /* Make background of text white and transparent */

  .text-white { background-color: rgba(255, 255, 255, 0.7); }

  /* Reduce space between two rows of posts */

  .post + .post { margin-top: 10px; }

</style>

You can add this code to the <head> section of your HTML document or in your CSS file. Just make sure to adjust the margins and background color values to your liking.