$hide=mobile$show=home

$show=post

$show=post

$show=post

How to add category card page on Blogger[Blogger responsive card menu page]

SHARE:

Do you wish to have a stylish category card view page on your Blogger blog like the one we have here on 237 Solution? We added this new layout to our blog and many of our visitors are very pleased with the new look. If you are having a Blogger blog, you can also implement it on your blog.

How to add category card page  on Blogger[Blogger responsive card menu page]

Do you wish to have a stylish category card view page on your Blogger blog like the one we have here on 237 Solution? We added this new layout to our blog and many of our visitors are very pleased with the new look. If you are having a Blogger blog, you can also implement it on 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.

Blogger category card view page or widget

As we said earlier, you can use this card view menu on either a page, a blog post or add it as a widget. Looking at our homepage, we have it added as a gadget. This way, our visitors who enter via the homepage can easily access any blog section

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 card view widget 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.

The CSS code:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* 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;
}

The HTML Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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".
How to add category card view page on Blogger[Blogger responsive card menu page]

  • Next, you will have to go to the customisation option. Click on "Customise" to proceed.
How to add category card view page on Blogger[Blogger responsive card menu page]

  • Under theme customisation settings, navigate to "Advanced".
How to add category card view page on Blogger[Blogger responsive card menu page]

  • Now under the advanced customisation option, select "Add CSS" to add the custom CSS code you find above.
How to add category card view page on Blogger[Blogger responsive card menu page]

  • Paste the code in the box you see and click "Apply to Blog".
How to add category card view page on Blogger[Blogger responsive card menu page]

  • 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/>)
example:

[<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 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>]
[post_ads]

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.
How to add category card page on Blogger[Blogger responsive card menu page]

  • Next, create a new page.
How to add category card page on Blogger[Blogger responsive card menu page]

  • Give the new page a name, like " categories" for example.
  • Switch to the HTML section and paste the card menu HTML code there.
How to add category card page on Blogger[Blogger responsive card menu page]

  • 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!

COMMENTS


$hide=mobile

ADVERTISEMENT
Adsby Google
Name

.Net Framework,3,A-Ads,1,Ads Balance,1,Adsense,2,Adsense Alternatives,2,AGWhatsApp,1,Android 11,1,Android Apps,76,Android Roms,12,Android Tips,11,Anonymous Ads,1,Antivirus,2,Asus Firmware,2,Blogger Themes,9,Blogger Widget,6,BLOGGING,2,Blogging Tips & Guides,9,Camtasia Studio,1,Comparisons,1,Computer 101,1,Coupons,19,CovStats,1,download,2,Downloads,145,Drivers,1,dWhatsApp,1,Facebook Tips,3,Facts,1,FIFA 2021,1,Files,1,Fix Over heating on Android,1,Free Paid Apps,52,Freebies,32,GAMES,27,GFI,1,Google,4,How to,3,How-To,66,IDM,1,InShot Pro Mod,1,InstaXtreme,1,Internet,47,iOS,18,ITEL,2,ITEL MTK,2,Jetpack Plugin,1,KMSpico,1,Language Packs,5,macOS,1,Make money Online,1,Microsoft,4,Miracle Team,9,Mobile Partner,1,MS Office,5,MTN Smart S730,1,Netflix,1,Norton Antivirus,1,Online Shopping,2,Online Studies,1,Operating System,2,Orange Klif,1,PBhev,3,PC Software,15,Rooting,3,S-COLOR,1,SAMSUNG,3,SD Card formatter,1,SEO Tips,2,Skin Packs,2,Sticker Makers,1,Streaming,4,Table of Content,1,Tech News,43,TECNO,3,Telegram,3,Tools,11,TOUCHING,1,Udemy Course,19,Unlocking,5,UpdraftPlus,1,VIVO Firmware,1,VPN,6,wha,1,WhatsApp GO,1,WhatsApp Messenger,33,WhatsApp Mod,25,WhatsApp Plus,1,WhatsApp Web,1,WhatsApp Web Dark Theme,1,WhatsGold,1,Wikoo,2,Windows 10,1,Windows 7 Activator,1,Windows 8.1,2,Windows Activator,2,Windows AIO Version,1,Windows OS,4,Wordpress Plugin,7,Wordpress Themes,1,Xiaomi Firmware,1,Yoast SEO,1,YouTube,1,
ltr
item
237 Solution: How to add category card page on Blogger[Blogger responsive card menu page]
How to add category card page on Blogger[Blogger responsive card menu page]
Do you wish to have a stylish category card view page on your Blogger blog like the one we have here on 237 Solution? We added this new layout to our blog and many of our visitors are very pleased with the new look. If you are having a Blogger blog, you can also implement it on your blog.
https://1.bp.blogspot.com/-S29NlAuVyrs/Xmu1bjyJJ2I/AAAAAAAAHAU/XEq3xIED-GwUz6vqkFKVK491rbzXzOihgCLcBGAsYHQ/s640/card%2Bmenu%2Bblogger%2Bblog.png
https://1.bp.blogspot.com/-S29NlAuVyrs/Xmu1bjyJJ2I/AAAAAAAAHAU/XEq3xIED-GwUz6vqkFKVK491rbzXzOihgCLcBGAsYHQ/s72-c/card%2Bmenu%2Bblogger%2Bblog.png
237 Solution
https://www.237solution.net/2020/03/how-to-add-category-card-page-on.html
https://www.237solution.net/
https://www.237solution.net/
https://www.237solution.net/2020/03/how-to-add-category-card-page-on.html
true
4983004729499366028
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content