Add stylish Category/label card plugin for Blogger

Adding a stylish category/label card to you Blogger homepage could help ease your visitor's navigation. We have this feature added to one of our blog  237 Solution. So, if you are interested in adding this plugin to your Blog,

Our responsive card mun page can be added to the homepage, a post page, or you can decide to create a unique page which will serve as a category page and add it there. And as for the links, you can add use label likes, links to a particular page or a post.

Eager to know how to do this? Continue reading this post till the end. Below we have provided you with the CSS and HTML code.

Stylish Category/label card plugin for Blogger

As we said earlier, you can use this card category plugin on either a page, a blog post or add it as a widget.

This card view menu added as a gadget makes it easier for mobile users to easily locate articles belonging to the different labels(categories). Unlike the mobile menu which is usually hidden in most cases, this card menu widget is open to mobile users.

Also, the card menu is very responsive. Be it on mobile, tablet or desktop, you will have good user experience with it.

Adding the stylish category card plugin to your blog

Below are the different codes you will need to add to your blog.

You will need to follow the instructions below to add both the CSS code and HTML code. Note that you can add both the CSS and HTML as an HTML/JavaScript gadget.

/* CSS for Blogger Category Card view by @mobiprox_man */
* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
/* Float three columns side by side */
.column {
  float: left;
  width: 33.33%;
  padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  border: 2px solid #099c70;
  border-radius:5px;
}

Next, you will have to add the following HTML code where you want the card category: label menu to appear.

<div class="row">
<div class="column">
<div class="card">
<a href="##" class="fa fa-newspaper-o" style="font-size:50px; color:#099c70; text-decoration:none"></a>      
<h3>Label 1</h3>    
</div>  
</div>    
<div class="column">    
<div class="card">     
<a href="##" class="fa fa-download" style="font-size:50px; color:#099c70; text-decoration:none"></a>      
<h3>label 2</h3>    
</div>  
</div>    
<div class="column">    
<div class="card">     
<a href="##" class="fa fa-apple" style="font-size:50px; color:#099c70; text-decoration:none"></a>      
<h3>Label 3</h3>    
</div>  
</div>
</div>

Adding it as a widget

You can add this as a gadget from the layout section. You can choose to add it on the sidebar or the main blog section. In our case, we have it added on the main blog section and disabled the sidebar on the homepage only.

If you are to add it to the homepage so that it doesn't show on post pages, make sure to add it on "home only widget section" since some widget section can also appear on post pages depending on the template you have.

Here are the steps to follow:

• Log in to your Blogger dashboard and select the blog you wish to add this category card menu. Once you've selected the blog in question, click on "Theme".

• Next, you will have to go to the customisation option. Click on "Customise" to proceed.

• Under theme customisation settings, navigate to "Advanced".

• Now under the advanced customisation option, select "Add CSS" to add the custom CSS code you find above.

• Paste the code in the box you see and click "Apply to Blog".

• After adding the custom CSS code. It is time to add the HTML code. To do this, simply go to Layout > Add gadget > Select HTML/JavaScript > Paste the HTML code provided above.
• If you want to have more than just one row, simply paste the code many times and make sure to separate each div card row with a line break tag(<br/>)

<div class="row">  <div class="column">    <div class="card">     <a href="##" class="fa fa-newspaper-o" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 1</h3>    </div>  </div>    <div class="column">    <div class="card">     <a href="##" class="fa fa-download" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>label 2</h3>    </div>  </div>    <div class="column">    <div class="card">     <a href="##" class="fa fa-apple" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 3</h3>    </div>  </div></div><br/> <div class="row">  <div class="column">    <div class="card">     <a href="##" class="fa fa-newspaper-o" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 4</h3>    </div>  </div>    <div class="column">    <div class="card">     <a href="##" class="fa fa-download" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>label 5</h3>    </div>  </div>    <div class="column">    <div class="card">     <a href="##" class="fa fa-apple" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 6</h3>    </div>  </div></div>

As you can see in the example above, we will have two rows. The first and second row is separated by the line break in red.

After adding the HTML code, you will need to customise.

Customisation

You can change the colour of the card(see colour hex code in blue). Also, you have to change the font awesome icons to match the label name and as well the links to the label. So, you will have to replace the "##" to the link of the category(label) and the "Label 1" to "Label 6" marked in green to that of post label. For example, if you have articles under the label "Android", you can use;

1. Label = Android
2. change the link to that of the label android.

Also, you can add more than two rows. Simply do as the example above and make sure you separate each row with a line break.

And as for the CSS code. You can change the numbers of columns. Here we are using 3 columns, you can even decide to make it four. And if that be the case, change the width(33.33%) to 25%.

After changing the column width to 25%, you will have to add an extra div column to the HTML code. Meaning your HTML code should look like this;

<div class="row">  <div class="column">    <div class="card">     <a href="##" class="fa fa-newspaper-o" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 1</h3>    </div>  </div>    <div class="column">    <div class="card">     <a href="##" class="fa fa-download" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>label 2</h3>    </div>  </div>    <div class="column">    <div class="card">     <a href="##" class="fa fa-apple" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 3</h3>    </div>  </div><div class="column">    <div class="card">     <a href="##" class="fa fa-cogs" style="font-size:50px; color:#099c70; text-decoration:none"></a>      <h3>Label 4</h3>    </div>  </div></div>

Creating a category card page 

As we said above, this can be used on a page or a post. So, if you were to create instead a category page, proceed as follows;

• From your Blogger dashboard, go to pages.

• Next, create a new page.

• Give the new page a name, like " categories" for example.
• Switch to the HTML section and paste the card menu HTML code there.

• The next thing you will have to do is customise it with your labels and label links, as well as the font awesome icons and colour.

Conclusion

This Blogger category card page or menu should help increase user engagement especially for mobile users who arrive on your blog via the homepage if added as a gadget to the homepage. And one good thing about it is that it is responsive. 

Having issues adding this to your blog? You can tip us and we will be happy to help you!