الصفحة الرئيسية
المشاركات

How to Create a Grid Stylish Widget Category on Blogger Home Page (BETUS BD)

DNR Cloud

 Hello friends today we will talk about how you can create a "Grid Stylish Category Widget" for your blogger or wordpress. We will know the details in this article.

How to Create a Grid Stylish Widget Category on Blogger Home Page
Grid Stylish Widget Category

We have created "Grid Stylish Category Widget" in such a way that you will not have any difficulty in editing it later. We used to create "Grid Stylish Category Widget".

  • HTML
  • CSS

No JavaScript was used to create it. So you can edit it very easily.

The advantages of "Grid Stylish Category Widget" are given below:

Feature

  1. Dark mode feature
  2. SVG icon
  3. Grid stylish widget
  4. Easily customizable
  5. You can add additional categories
  6. Mobile friendly

Below is a demo of what the grid stylish category widget will look like. If you want, you can view the demo by clicking the demo button.

Demo

Now given below are the codes on how to create "Grid Stylish Category Widget". The codes given here are divided into three sectors.

Now how do you add them to your site?

It is shown step by step below :

Step 1 : You open your Blogger Dashboard
Step 2 : Click on Dustboard Theme Option.
Step 3 : Click the arrow icon next to the Customize Button.
Step 4 : Now click on Edit HTML Option.
Step 5 : Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

CSS
/* Category layout by Engineer Abusufian*/
.engineerabusufian{padding:5px;text-align:center;position:relative}.engineerabusufian h2{font-size:1.6em;line-height:1.6em;margin-bottom:0;padding-bottom:0}.engineerabusufian ul{clear:both;margin:15px 0 20px;width:100%;display:flex;padding:0;flex-wrap:wrap;justify-content:space-between}.engineerabusufian.icon-p-2 li{position:relative;width:30%;list-style:none;line-height:1.3em;text-align:center;border-radius:10px;margin:6px 0;background:var(--contentB);box-shadow:0 5px 35px rgb(0 0 0/7%);padding:6px 0 12px;display:flex;align-items:center;justify-content:center}.engineerabusufian li a{display:block;text-decoration:none;color:var(--fontC)}.engineerabusufian li svg{margin:3px 0;width:35px;height:35px;display:inline-block}.engineerabusufian li span{display:block;padding:0 3px}.drK .engineerabusufian li{background:var(--darkBa)}

Step 6 : Now save the theme by clicking on the save Button .
Step 7 : Again go to layout option from blogger dashboard.
Step 8 : Add a new (HTML/JavaScript) widget to the top widget of the layout options.
Step 9 : Click on edit icon of HTML/JavaScript option and paste the following codes.

HTML
<div class="engineerabusufian coll-3 icon-p-2">
<h2><span>Today you are looking for?</span></h2>
<ul>
<li onclick='vibRate(50)' >
<a href="https://engineerabusufian.blogspot.com/p/tutorial.html" title="tutorial">

  
  <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.17,2.06A13.1,13.1,0,0,0,19,1.87a12.94,12.94,0,0,0-7,2.05,12.94,12.94,0,0,0-7-2,13.1,13.1,0,0,0-2.17.19,1,1,0,0,0-.83,1v12a1,1,0,0,0,1.17,1,10.9,10.9,0,0,1,8.25,1.91l.12.07.11,0a.91.91,0,0,0,.7,0l.11,0,.12-.07A10.9,10.9,0,0,1,20.83,16a1,1,0,0,0,1.17-1v-12A1,1,0,0,0,21.17,2.06ZM11,15.35a12.87,12.87,0,0,0-6-1.48c-.33,0-.66,0-1,0v-10a8.69,8.69,0,0,1,1,0,10.86,10.86,0,0,1,6,1.8Zm9-1.44c-.34,0-.67,0-1,0a12.87,12.87,0,0,0-6,1.48V5.67a10.86,10.86,0,0,1,6-1.8,8.69,8.69,0,0,1,1,0Zm1.17,4.15A13.1,13.1,0,0,0,19,17.87a12.94,12.94,0,0,0-7,2.05,12.94,12.94,0,0,0-7-2.05,13.1,13.1,0,0,0-2.17.19A1,1,0,0,0,2,19.21,1,1,0,0,0,3.17,20a10.9,10.9,0,0,1,8.25,1.91,1,1,0,0,0,1.16,0A10.9,10.9,0,0,1,20.83,20,1,1,0,0,0,22,19.21,1,1,0,0,0,21.17,18.06Z" fill="#6563ff"/></path></svg>    
  <span>Tutorial</span>
</a></li>


<li onclick='vibRate(50)'>
<a href="https://t.me/EngineerAbusufian" title="Telegram">
<svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewbox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x33_35-telegram"><g><g><path d="M484.689,98.231l-69.417,327.37c-5.237,23.105-18.895,28.854-38.304,17.972L271.2,365.631     l-51.034,49.086c-5.646,5.647-10.371,10.372-21.256,10.372l7.598-107.722L402.539,140.23c8.523-7.598-1.848-11.809-13.247-4.21     L146.95,288.614L42.619,255.96c-22.694-7.086-23.104-22.695,4.723-33.579L455.423,65.166     C474.316,58.081,490.85,69.375,484.689,98.231z" style="fill:#20A0E1;"/></path></g></g></g><g id="Layer_1"/></g></svg>  
<span>Telegram</span>
</a></li>


<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>





<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>





<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>


<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>
<span>Tools</span>
</a></li>
</ul></div>

Step 10 : Now save the code and publish the widgets.

The category grid has now been successfully added to your blogger site. This is fully responsive and works well on all types of devices. You can also make further adjustments to fit your site.

SVG icons are taken from Iconfinder site to create it

Terms Of Use

To enjoy our workshop, remember to keep the credits in canon.
We do not allow this article to be rewritten in any way. Do not copy this notice, the rules or any part of this composition without permission, it is strictly prohibited. However, legal action will be taken, if you do so.

Conclusion

In this article, I show you how to create a grid-style category section with HTML and CSS on the Blogger homepage? Hope you enjoyed this article and share it with your friends and follow the blog for more.
All of our posts are protected under the DMCA. So please do not try to copy our articles and copying in any way is strictly prohibited! Otherwise, legal action will be taken.

إرسال تعليق