Create a Grid Stylish Widget Category on Blogger Website

Create a Grid Stylish Widget Category on Blogger Website

Hello Dear, I will You how you can create a "Grid Stylish Category Widget" for your blogger Website . i will know the details in This article.

Use only HTML and CSS

No JavaScript was used to create it. So you can Edit it very Easily.

The Feature of "Grid Stylish Category Widget"

• Dark mode feature
• SVG icon
• Grid stylish widget
• Easily customizable
• You can add additional categories
• 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.

/* 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.

 <div class="engineerabusufian coll-3 icon-p-2"> <h2><span>Tutorial Categories Here </span></h2> <ul> <li onclick='vibRate(50)' > <a href="https://www.creatorfaruk.com/search/label" title="Latest Article"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" xml:space="preserve"><path fill="#CECECE" d="M232.227 205.916H23.773a8.78 8.78 0 0 1-8.78-8.78V21.076a8.78 8.78 0 0 1 8.78-8.78h208.455a8.78 8.78 0 0 1 8.78 8.78v176.06a8.782 8.782 0 0 1-8.781 8.78z"/><path fill="#AFAFAF" d="M29.659 197.136V21.076a8.78 8.78 0 0 1 8.78-8.78H23.773a8.78 8.78 0 0 0-8.78 8.78v176.06a8.78 8.78 0 0 0 8.78 8.78H38.44a8.78 8.78 0 0 1-8.781-8.78z"/><path fill="#E2E2E2" d="M226.341 197.136V21.076a8.78 8.78 0 0 0-8.78-8.78h14.667a8.78 8.78 0 0 1 8.78 8.78v176.06a8.78 8.78 0 0 1-8.78 8.78h-14.667a8.78 8.78 0 0 0 8.78-8.78z"/><path fill="#63BCE7" d="M241.007 21.076a8.78 8.78 0 0 0-8.78-8.78H23.773a8.78 8.78 0 0 0-8.78 8.78v33.722h226.014V21.076z"/><path fill="#6377E7" d="M38.439 12.296H23.773a8.78 8.78 0 0 0-8.78 8.78v33.722H29.66V21.076a8.779 8.779 0 0 1 8.779-8.78z"/><path fill="#63E2E7" d="M217.56 12.296h14.667a8.78 8.78 0 0 1 8.78 8.78v33.722H226.34V21.076a8.779 8.779 0 0 0-8.78-8.78z"/><g fill="#F46275"><circle cx="42.68" cy="33.547" r="7.084"/><circle cx="69.964" cy="33.547" r="7.084"/><circle cx="97.249" cy="33.547" r="7.084"/></circle></circle></circle></g><path fill="#F46275" d="M215.007 39.408h-89.632c-2.968 0-5.397-2.429-5.397-5.397 0-2.968 2.429-5.397 5.397-5.397h89.632c2.968 0 5.397 2.429 5.397 5.397 0 2.968-2.429 5.397-5.397 5.397z"/><path fill="#F8AF23" d="M71.342 205.916V93.224c0-7.917 6.418-14.335 14.335-14.335h98.875v127.027H71.342z"/><path fill="#9E9E9E" d="M184.552 220.248H83.879c-6.924 0-12.537-5.613-12.537-12.537v-3.592c0-6.924 5.613-12.537 12.537-12.537h100.673v28.666z"/><path fill="#F46275" d="m104.139 232.731-9.828-8.283-9.828 8.283v-26.815h19.656z"/><circle fill="#63BCE7" cx="134.518" cy="135.236" r="29.412"/><g fill="#3F3679"><path d="M42.68 24.963c-4.733 0-8.584 3.851-8.584 8.584s3.851 8.583 8.584 8.583 8.584-3.851 8.584-8.583c0-4.734-3.851-8.584-8.584-8.584zm0 14.167a5.59 5.59 0 0 1-5.584-5.583c0-3.079 2.505-5.584 5.584-5.584s5.584 2.505 5.584 5.584a5.59 5.59 0 0 1-5.584 5.583zM69.964 24.963c-4.732 0-8.583 3.851-8.583 8.584s3.851 8.583 8.583 8.583c4.733 0 8.584-3.851 8.584-8.583 0-4.734-3.851-8.584-8.584-8.584zm0 14.167a5.59 5.59 0 0 1-5.583-5.583 5.59 5.59 0 0 1 5.583-5.584 5.59 5.59 0 0 1 5.584 5.584 5.59 5.59 0 0 1-5.584 5.583zM97.249 24.963c-4.733 0-8.584 3.851-8.584 8.584s3.851 8.583 8.584 8.583 8.584-3.851 8.584-8.583c0-4.734-3.851-8.584-8.584-8.584zm0 14.167a5.59 5.59 0 0 1-5.584-5.583c0-3.079 2.505-5.584 5.584-5.584s5.584 2.505 5.584 5.584a5.59 5.59 0 0 1-5.584 5.583zM215.007 27.113h-89.632c-3.803 0-6.896 3.094-6.896 6.897s3.094 6.897 6.896 6.897h89.632c3.804 0 6.897-3.094 6.897-6.897s-3.093-6.897-6.897-6.897zm0 10.795h-89.632c-2.148 0-3.896-1.748-3.896-3.897s1.748-3.897 3.896-3.897h89.632c2.149 0 3.897 1.749 3.897 3.897s-1.748 3.897-3.897 3.897zM27.323 242.204H9.32a1.5 1.5 0 1 0 0 3h18.003a1.5 1.5 0 1 0 0-3zM246.68 242.204h-18.003a1.5 1.5 0 1 0 0 3h18.003a1.5 1.5 0 1 0 0-3zM218.479 242.204H37.521a1.5 1.5 0 1 0 0 3H218.48a1.5 1.5 0 1 0-.001-3z"/><path d="M9.32 234.231h237.36a1.5 1.5 0 1 0 0-3H105.639v-9.483h78.914a1.5 1.5 0 0 0 1.5-1.5v-12.832h46.175c5.668 0 10.279-4.612 10.279-10.28V21.076c0-5.668-4.611-10.28-10.279-10.28H23.772c-5.668 0-10.279 4.611-10.279 10.28v176.06c0 5.668 4.611 10.28 10.279 10.28h46.07v.295c0 7.437 5.819 13.526 13.141 13.991v9.529H9.32a1.5 1.5 0 1 0 0 3zm93.319-4.726-7.36-6.205a1.5 1.5 0 0 0-1.934 0l-7.361 6.205v-22.089h16.655v22.089zm-18.156-53.239a1.5 1.5 0 0 0 1.5-1.5V80.389h97.069v109.695H83.879c-4.479 0-8.464 2.116-11.036 5.393V93.224c0-6.153 4.353-11.304 10.141-12.545v94.087a1.5 1.5 0 0 0 1.499 1.5zm-67.99-155.19c0-4.014 3.266-7.28 7.279-7.28h208.455c4.014 0 7.279 3.266 7.279 7.28v32.222H16.493V21.076zm0 176.06V56.298h223.014v140.838c0 4.014-3.266 7.28-7.279 7.28h-46.175V78.889a1.5 1.5 0 0 0-1.5-1.5H85.677c-.388 0-.768.031-1.149.058-.015 0-.029-.005-.045-.005-.046 0-.09.01-.135.014-8.11.678-14.506 7.485-14.506 15.768V204.416h-46.07c-4.013 0-7.279-3.266-7.279-7.28zm56.35 10.575v-3.591c0-6.085 4.951-11.037 11.036-11.037h99.174v11.333h-69.611a1.5 1.5 0 1 0 0 3h69.611v11.332h-77.414v-12.832a1.5 1.5 0 0 0-1.5-1.5H84.483a1.5 1.5 0 0 0-1.5 1.5v12.787c-5.666-.459-10.14-5.208-10.14-10.992zm21.469 18.699 5.72 4.822H88.591l5.721-4.822z"/><path d="M134.518 166.148c17.045 0 30.912-13.867 30.912-30.912 0-17.045-13.867-30.913-30.912-30.913s-30.912 13.867-30.912 30.913c-.001 17.045 13.867 30.912 30.912 30.912zm0-58.824c15.391 0 27.912 12.521 27.912 27.913 0 15.391-12.521 27.912-27.912 27.912s-27.912-12.521-27.912-27.912c-.001-15.392 12.521-27.913 27.912-27.913z"/></path></path></path></g></circle></path></path></path></path></path></path></path></path></path></path></svg> <span>Latest Article </span> </a></li> <li onclick='vibRate(50)'> <a href="https://www.creatorfaruk.com/search/label/Blogger" title="Blogger"> <?xml version="1.0" ?><!doctype svg  public '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.0" viewbox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M32,30c0,1.104-0.896,2-2,2H2c-1.104,0-2-0.896-2-2V2c0-1.104,0.896-2,2-2h28c1.104,0,2,0.896,2,2V30z" fill="#F05222"/><path d="M26,18c0-3-1-4-4-4c0-1,0-2,0-3c0-2.984-3-5-5-5h-5c-3.487,0-6,2.525-6,6v8c0,3.467,2.513,6,6,6h8   c3.485,0,5.979-2.532,6-6C26,20,26,19,26,18z M12.5,11c0.176,0,3.824,0,4,0c0.828,0,1.5,0.672,1.5,1.5S17.328,14,16.5,14   c-0.176,0-3.824,0-4,0c-0.828,0-1.5-0.672-1.5-1.5S11.672,11,12.5,11z M19.5,21c-0.176,0-6.824,0-7,0c-0.828,0-1.5-0.672-1.5-1.5   s0.672-1.5,1.5-1.5c0.176,0,6.824,0,7,0c0.828,0,1.5,0.672,1.5,1.5S20.328,21,19.5,21z" fill="#FFFFFF"/></path></path></g><g/><g/><g/><g/><g/><g/></g></g></g></g></g></g></svg><span>Blogger</span> </!doctype></?xml></a></li> <li onclick='vibRate(50)'> <a href="https://www.creatorfaruk.com/search/label/Template" title="Template"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewbox="0 0 256 256" style="enable-background:new 0 0 256 256" xml:space="preserve"><style>.st2{fill:#69ebfc}.st5{fill:#d476e2}.st6{fill:#b665c2}.st9{fill:#ff8354}.st11{fill:#6770e6}.st14{fill:#edd4c2}</style><path d="M229.935 256H26.065C11.67 256 0 244.33 0 229.935V26.065C0 11.67 11.67 0 26.065 0h203.87C244.33 0 256 11.67 256 26.065v203.87C256 244.33 244.33 256 229.935 256z" style="fill:#ffefe4"/><path class="st14" d="M229.935 249H26.065C11.67 249 0 237.33 0 222.935v7C0 244.33 11.67 256 26.065 256h203.87C244.33 256 256 244.33 256 229.935v-7C256 237.33 244.33 249 229.935 249z"/><path class="st2" d="M229.935 0H26.065C11.67 0 0 11.67 0 26.065V40h256V26.065C256 11.67 244.33 0 229.935 0z"/><path d="M229.935 0H26.065C11.67 0 0 11.67 0 26.065v7C0 18.67 11.67 7 26.065 7h203.87C244.33 7 256 18.67 256 33.065v-7C256 11.67 244.33 0 229.935 0z" style="fill:#a1f1fc"/><circle class="st9" cx="35" cy="20" r="9"/><circle class="st5" cx="68.5" cy="20" r="9"/><circle class="st11" cx="102" cy="20" r="9"/><path class="st5" d="M34 60h188a8 8 0 0 1 8 8v52a8 8 0 0 1-8 8H34a8 8 0 0 1-8-8V68a8 8 0 0 1 8-8z"/><path class="st9" d="M34 148h32a8 8 0 0 1 8 8v32a8 8 0 0 1-8 8H34a8 8 0 0 1-8-8v-32a8 8 0 0 1 8-8z"/><path class="st11" d="M112 148h32a8 8 0 0 1 8 8v32a8 8 0 0 1-8 8h-32a8 8 0 0 1-8-8v-32a8 8 0 0 1 8-8z"/><path class="st9" d="M190 148h32a8 8 0 0 1 8 8v32a8 8 0 0 1-8 8h-32a8 8 0 0 1-8-8v-32a8 8 0 0 1 8-8z"/><path class="st14" d="M34 205.995h32a8 8 0 0 1 0 16H34a8 8 0 0 1 0-16zM112 205.995h32a8 8 0 0 1 0 16h-32a8 8 0 0 1 0-16z"/><path class="st2" d="M112 101h32a8 8 0 0 1 0 16h-32a8 8 0 0 1 0-16z"/><path class="st6" d="M93 84h70a4 4 0 0 1 0 8H93a4 4 0 0 1 0-8zM103 71h50a4 4 0 0 1 0 8h-50a4 4 0 0 1 0-8z"/><path class="st14" d="M190 205.995h32a8 8 0 0 1 0 16h-32a8 8 0 0 1 0-16z"/><path class="st2" d="m219.697 94.585-6.803 4.802a.716.716 0 0 1-1.129-.585v-9.604c0-.58.654-.919 1.129-.585l6.803 4.802a.716.716 0 0 1 0 1.17zM36.303 94.585l6.803 4.802a.715.715 0 0 0 1.128-.585v-9.604a.716.716 0 0 0-1.128-.585l-6.803 4.802a.716.716 0 0 0 0 1.17z"/></path></path></path></path></path></path></path></path></path></circle></circle></circle></path></path></path></path></svg> <span>Template</span> </a></li> <li onclick='vibRate(50)'> <a href="https://www.creatorfaruk.com/search/label/Premium" title="Premium"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" xml:space="preserve"><path fill="#CECECE" d="M32.035 209.394c-7.535 0-13.665-6.13-13.665-13.665V71.953c0-7.535 6.13-13.665 13.665-13.665h191.931c7.535 0 13.665 6.13 13.665 13.665v123.776c0 7.535-6.13 13.665-13.665 13.665H32.035z"/><path fill="#E2E2E2" d="M223.965 58.288h-14.667c7.534 0 13.665 6.13 13.665 13.665v123.776c0 7.534-6.13 13.665-13.665 13.665h14.667c7.535 0 13.665-6.13 13.665-13.665V71.953c0-7.535-6.13-13.665-13.665-13.665z"/><path fill="#AFAFAF" d="M32.035 58.288h14.667c-7.534 0-13.665 6.13-13.665 13.665v123.776c0 7.534 6.13 13.665 13.665 13.665H32.035c-7.535 0-13.665-6.13-13.665-13.665V71.953c0-7.535 6.13-13.665 13.665-13.665z"/><path fill="#63BCE7" d="M229.221 71.977v123.728a5.28 5.28 0 0 1-5.28 5.28H32.059a5.28 5.28 0 0 1-5.28-5.28V71.977a5.28 5.28 0 0 1 5.28-5.28h191.882a5.28 5.28 0 0 1 5.28 5.28z"/><path fill="#63E2E7" d="M223.941 66.697h-14.667a5.28 5.28 0 0 1 5.28 5.28v123.728a5.28 5.28 0 0 1-5.28 5.28h14.667a5.28 5.28 0 0 0 5.28-5.28V71.977a5.28 5.28 0 0 0-5.28-5.28z"/><path fill="#6377E7" d="M32.059 66.697h14.667a5.28 5.28 0 0 0-5.28 5.28v123.728a5.28 5.28 0 0 0 5.28 5.28H32.059a5.28 5.28 0 0 1-5.28-5.28V71.977a5.28 5.28 0 0 1 5.28-5.28z"/><path fill="#CECECE" d="M128 209.394H8.667l3.053 7.024a17.333 17.333 0 0 0 15.896 10.423h200.769a17.333 17.333 0 0 0 15.896-10.423l3.053-7.024H128z"/><path fill="#E2E2E2" d="m232.667 209.394-3.053 7.024a17.333 17.333 0 0 1-15.896 10.423h14.667a17.333 17.333 0 0 0 15.896-10.423l3.053-7.024h-14.667z"/><path fill="#AFAFAF" d="m23.333 209.394 3.053 7.024a17.333 17.333 0 0 0 15.896 10.423H27.615a17.333 17.333 0 0 1-15.896-10.423l-3.053-7.024h14.667z"/><path fill="#707070" d="m82.442 209.394 4.22 5.388a8.7 8.7 0 0 0 6.85 3.336h68.975a8.7 8.7 0 0 0 6.85-3.336l4.221-5.388H82.442z"/><path fill="#CECECE" d="M194.725 48.161 164.75 18.186H61.275v182.799h133.45z"/><path fill="#F8AF23" d="M112.692 136.325c0 1.482.852 1.831 1.895.778l11.519-11.64a2.668 2.668 0 0 1 3.79 0l11.519 11.64c1.041 1.053 1.895.703 1.895-.778v-38.7h-30.617v38.7z"/><path fill="#F46275" d="m132.142 40.502 4.797 7.222a4.971 4.971 0 0 0 5.126 2.123l8.499-1.715c3.485-.703 6.561 2.373 5.858 5.858l-1.715 8.499a4.974 4.974 0 0 0 2.123 5.126l7.222 4.797c2.962 1.967 2.962 6.317 0 8.285l-7.222 4.797a4.971 4.971 0 0 0-2.123 5.126l1.715 8.499c.703 3.485-2.373 6.561-5.858 5.858l-8.499-1.715a4.974 4.974 0 0 0-5.126 2.123l-4.797 7.222c-1.967 2.962-6.317 2.962-8.285 0l-4.797-7.222a4.971 4.971 0 0 0-5.126-2.123l-8.499 1.715c-3.485.703-6.561-2.373-5.858-5.858l1.715-8.499a4.974 4.974 0 0 0-2.123-5.126l-7.222-4.797c-2.962-1.967-2.962-6.317 0-8.285l7.222-4.797a4.971 4.971 0 0 0 2.123-5.126l-1.715-8.499c-.703-3.485 2.373-6.561 5.858-5.858l8.499 1.715c1.981.4 4.007-.44 5.126-2.123l4.797-7.222c1.968-2.962 6.318-2.962 8.285 0z"/><path fill="#F8AF23" d="m131.539 61.45 2.502 5.069a3.947 3.947 0 0 0 2.972 2.159l5.594.813c3.237.47 4.53 4.449 2.187 6.732l-4.048 3.946a3.946 3.946 0 0 0-1.135 3.493l.956 5.572c.553 3.224-2.831 5.683-5.727 4.161l-5.004-2.631a3.95 3.95 0 0 0-3.673 0l-5.004 2.631c-2.895 1.522-6.28-.936-5.727-4.161l.956-5.572a3.945 3.945 0 0 0-1.135-3.493l-4.048-3.946c-2.342-2.283-1.05-6.262 2.187-6.732l5.594-.813a3.948 3.948 0 0 0 2.972-2.159l2.502-5.069c1.449-2.933 5.631-2.933 7.079 0z"/><g fill="#3F3679"><path d="m245.656 217.016 3.053-7.024a1.498 1.498 0 0 0-1.375-2.098h-14.352c3.722-2.766 6.149-7.181 6.149-12.164V71.953c0-8.362-6.803-15.165-15.165-15.165h-27.741v-8.627c0-.397-.158-.779-.439-1.061l-29.975-29.975a1.5 1.5 0 0 0-1.061-.439H61.275a1.5 1.5 0 0 0-1.5 1.5v38.602h-27.74c-8.362 0-15.165 6.803-15.165 15.165v123.776c0 4.983 2.427 9.398 6.149 12.164H8.667a1.5 1.5 0 0 0-1.375 2.098l3.053 7.024a18.805 18.805 0 0 0 7.08 8.325H9.32a1.5 1.5 0 1 0 0 3h237.36a1.5 1.5 0 1 0 0-3h-8.104a18.801 18.801 0 0 0 7.08-8.324zM166.25 21.808l24.854 24.854H166.25V21.808zm29.975 46.388h27.716a3.785 3.785 0 0 1 3.78 3.78v123.729a3.784 3.784 0 0 1-3.78 3.779h-27.716V68.196zM62.775 19.687H163.25v28.475a1.5 1.5 0 0 0 1.5 1.5h28.475v149.823H62.775V19.687zM32.059 199.484a3.784 3.784 0 0 1-3.78-3.779V71.977a3.785 3.785 0 0 1 3.78-3.78h27.716v131.288H32.059zm-12.189-3.755V71.953c0-6.708 5.457-12.165 12.165-12.165h27.741v5.408H32.059a6.788 6.788 0 0 0-6.78 6.78v123.729a6.787 6.787 0 0 0 6.78 6.779H223.94a6.787 6.787 0 0 0 6.78-6.779V71.977a6.788 6.788 0 0 0-6.78-6.78h-27.716v-5.408h27.741c6.708 0 12.165 5.457 12.165 12.165V195.73c0 6.707-5.457 12.164-12.165 12.164H32.035c-6.708 0-12.165-5.457-12.165-12.165zm150.608 15.165-2.321 2.964a7.157 7.157 0 0 1-5.669 2.76H93.513a7.157 7.157 0 0 1-5.669-2.76l-2.321-2.964h84.955zm57.907 14.447H27.615c-4.787 0-9.22-2.157-12.18-5.724h29.141a1.5 1.5 0 1 0 0-3H13.477a15.367 15.367 0 0 1-.382-.797l-2.141-4.927h70.758l3.77 4.813a10.139 10.139 0 0 0 8.031 3.91h68.975a10.14 10.14 0 0 0 8.031-3.91l3.77-4.813h70.758l-2.141 4.927c-.118.272-.25.534-.382.797h-31.099a1.5 1.5 0 1 0 0 3h29.141a15.827 15.827 0 0 1-12.181 5.724z"/><path d="M65.22 216.617H54.845a1.5 1.5 0 1 0 0 3H65.22a1.5 1.5 0 1 0 0-3zM201.155 216.617H190.78a1.5 1.5 0 1 0 0 3h10.375a1.5 1.5 0 1 0 0-3zM27.323 236.313H9.32a1.5 1.5 0 1 0 0 3h18.003a1.5 1.5 0 1 0 0-3zM246.68 236.313h-18.003a1.5 1.5 0 1 0 0 3h18.003a1.5 1.5 0 1 0 0-3zM218.479 236.313H37.521a1.5 1.5 0 1 0 0 3H218.48a1.5 1.5 0 1 0-.001-3zM91.118 81.945l7.222 4.798a3.46 3.46 0 0 1 1.483 3.579l-1.714 8.498a6.455 6.455 0 0 0 1.768 5.857 6.463 6.463 0 0 0 5.857 1.769l5.458-1.102v30.98c0 1.909 1.039 2.543 1.485 2.727.448.185 1.632.464 2.976-.894l11.518-11.64a1.16 1.16 0 0 1 .83-.346c.314.001.608.123.828.345l11.518 11.641c.825.834 1.589 1.05 2.161 1.05.359 0 .642-.085.814-.156.447-.184 1.487-.816 1.487-2.727v-30.98l5.459 1.102a6.455 6.455 0 0 0 5.857-1.769 6.458 6.458 0 0 0 1.768-5.857l-1.714-8.498a3.462 3.462 0 0 1 1.483-3.58l7.222-4.797a6.455 6.455 0 0 0 2.891-5.393 6.456 6.456 0 0 0-2.891-5.39l-7.222-4.799a3.458 3.458 0 0 1-1.483-3.578l1.714-8.499a6.455 6.455 0 0 0-1.768-5.857 6.471 6.471 0 0 0-5.856-1.768l-8.499 1.714a3.452 3.452 0 0 1-3.579-1.482l-4.797-7.222c-1.203-1.811-3.218-2.892-5.392-2.892s-4.189 1.081-5.392 2.892l-4.797 7.222a3.455 3.455 0 0 1-3.58 1.482l-8.498-1.714a6.467 6.467 0 0 0-5.857 1.768 6.456 6.456 0 0 0-1.768 5.857l1.714 8.499a3.46 3.46 0 0 1-1.483 3.579l-7.221 4.797a6.456 6.456 0 0 0-2.892 5.391 6.455 6.455 0 0 0 2.89 5.393zm50.69 53.425-10.847-10.963a4.139 4.139 0 0 0-2.96-1.234 4.136 4.136 0 0 0-2.961 1.235l-10.847 10.962v-30.63l.04-.008a3.458 3.458 0 0 1 3.58 1.482l4.797 7.222c1.203 1.811 3.218 2.892 5.392 2.892s4.189-1.081 5.392-2.892l4.797-7.222a3.45 3.45 0 0 1 3.579-1.482l.04.008v30.63zm-49.03-61.709L100 68.864a6.449 6.449 0 0 0 2.763-6.672l-1.714-8.499c-.234-1.16.112-2.306.949-3.143s1.982-1.185 3.143-.947l8.498 1.714a6.447 6.447 0 0 0 6.672-2.764l4.797-7.222c.655-.986 1.709-1.552 2.893-1.552s2.238.565 2.893 1.552l4.797 7.222a6.454 6.454 0 0 0 6.671 2.764l8.499-1.714a3.41 3.41 0 0 1 3.142.947 3.42 3.42 0 0 1 .949 3.143l-1.714 8.499a6.447 6.447 0 0 0 2.763 6.671l7.222 4.799a3.42 3.42 0 0 1 1.551 2.892 3.421 3.421 0 0 1-1.552 2.894L156 84.243a6.449 6.449 0 0 0-2.763 6.673l1.714 8.498a3.424 3.424 0 0 1-.948 3.143 3.421 3.421 0 0 1-3.143.948l-8.499-1.715a6.451 6.451 0 0 0-6.671 2.764l-4.797 7.222c-.655.986-1.709 1.552-2.893 1.552s-2.238-.565-2.893-1.552l-4.797-7.222a6.444 6.444 0 0 0-6.671-2.764l-8.498 1.715a3.423 3.423 0 0 1-3.143-.948 3.423 3.423 0 0 1-.948-3.143l1.714-8.498a6.448 6.448 0 0 0-2.763-6.672l-7.222-4.797a3.422 3.422 0 0 1-1.552-2.894 3.42 3.42 0 0 1 1.551-2.892z"/><path d="M114.207 81.244c.577.562.839 1.371.703 2.165l-.956 5.572a5.411 5.411 0 0 0 2.167 5.327 5.434 5.434 0 0 0 3.197 1.046c.866 0 1.736-.209 2.54-.631l5.004-2.632a2.449 2.449 0 0 1 2.276.001l5.004 2.631a5.42 5.42 0 0 0 5.737-.415 5.415 5.415 0 0 0 2.167-5.327l-.956-5.572a2.441 2.441 0 0 1 .704-2.165l4.048-3.946c1.496-1.458 2.024-3.598 1.378-5.584s-2.331-3.406-4.397-3.706l-5.595-.813a2.446 2.446 0 0 1-1.842-1.339l-2.502-5.069c-.924-1.873-2.796-3.036-4.884-3.036s-3.96 1.163-4.884 3.036l-2.502 5.069a2.442 2.442 0 0 1-1.842 1.339l-5.594.813c-2.067.3-3.752 1.72-4.397 3.706s-.117 4.126 1.378 5.584l4.048 3.946zm-2.574-8.602a2.4 2.4 0 0 1 1.976-1.665l5.594-.813a5.448 5.448 0 0 0 4.102-2.979l2.502-5.069a2.4 2.4 0 0 1 2.194-1.364c.952 0 1.772.51 2.194 1.364l2.502 5.069a5.444 5.444 0 0 0 4.101 2.979l5.595.813a2.4 2.4 0 0 1 1.975 1.665 2.402 2.402 0 0 1-.619 2.508l-4.047 3.946a5.44 5.44 0 0 0-1.567 4.821l.956 5.572a2.402 2.402 0 0 1-.973 2.393c-.77.56-1.733.629-2.577.186l-5.004-2.63a5.442 5.442 0 0 0-5.069-.001l-5.004 2.631a2.397 2.397 0 0 1-2.577-.186 2.4 2.4 0 0 1-.973-2.393l.956-5.572a5.444 5.444 0 0 0-1.567-4.821l-4.048-3.946a2.397 2.397 0 0 1-.622-2.508zM176 148.377H80a1.5 1.5 0 1 0 0 3h96a1.5 1.5 0 1 0 0-3zM176 160.543H80a1.5 1.5 0 1 0 0 3h96a1.5 1.5 0 1 0 0-3zM176 172.709H80a1.5 1.5 0 1 0 0 3h96a1.5 1.5 0 1 0 0-3zM176 184.874H80a1.5 1.5 0 1 0 0 3h96a1.5 1.5 0 1 0 0-3z"/></path></path></path></g></path></path></path></path></path></path></path></path></path></path></path></path></path></path></svg><span>Premium</span> </a></li> <li onclick='vibRate(50)'> <a href="https://www.creatorfaruk.com/search/label/Blog%20Tutorial?" title="Blog Tutorial"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" xml:space="preserve"><switch><g><path fill="#4EA4DB" d="M855.7 712.7V234.9c0-14.1-11.4-25.6-25.6-25.6H169.9c-14.1 0-25.6 11.4-25.6 25.6v477.8c0 14.1 11.4 25.6 25.6 25.6h255.5V790c0 14.1-11.4 25.6-25.6 25.6h-70.7c-14.1 0-25.6 11.4-25.6 25.6v29.4H696.4v-29.4c0-14.1-11.4-25.6-25.6-25.6h-70.7c-14.1 0-25.6-11.4-25.6-25.6v-51.8H830c14.3.1 25.7-11.4 25.7-25.5z"/><path fill="#FFF" d="M830.1 209.3H169.9c-14.1 0-25.5 11.4-25.6 25.5h711.4c0-14.1-11.5-25.5-25.6-25.5zM185.5 651.7h628.9v25.5H185.5zM307.8 815.2h384.3v25.5H307.8z"/><path fill="#FFF" d="M196 261.9h608.1v389.9H196z"/><path fill="#122436" d="M706.4 880.5H293.6v-39.4c0-19.6 15.9-35.6 35.6-35.6h70.6c8.6 0 15.6-7 15.6-15.6v-41.8H169.9c-19.6 0-35.6-15.9-35.6-35.6V234.9c0-19.6 15.9-35.6 35.6-35.6h660.3c19.6 0 35.6 15.9 35.6 35.6v477.8c0 19.6-15.9 35.6-35.6 35.6H584.7V790c0 8.6 7 15.6 15.6 15.6H671c19.6 0 35.6 15.9 35.6 35.6v39.3zm-392.8-20h372.8v-19.4c0-8.6-7-15.6-15.6-15.6h-70.7c-19.6 0-35.6-15.9-35.6-35.6v-61.8H830c8.6 0 15.6-7 15.6-15.6V234.9c0-8.6-7-15.6-15.6-15.6H169.9c-8.6 0-15.6 7-15.6 15.6v477.8c0 8.6 7 15.6 15.6 15.6h265.5V790c0 19.6-15.9 35.6-35.6 35.6h-70.6c-8.6 0-15.6 7-15.6 15.6v19.3z"/><circle fill="#FFF" cx="463.2" cy="709.4" r="11"/><circle fill="#FFF" cx="500" cy="709.4" r="11"/><circle fill="#FFF" cx="536.8" cy="709.4" r="11"/><path fill="#122436" d="M814 661.7H186V251.9h628v409.8zm-608-20h588V271.9H206v369.8z"/><path fill="#FFCD35" d="M244.7 304.1h507v69h-507zM244.7 420.7h116.1v185.7H244.7zM635.6 420.7h116.1v185.7H635.6zM403.8 420.7h185.7v185.7H403.8z"/><path fill="#FFCD35" d="M244.7 304.1h507v69h-507zM244.7 420.7h116.1v185.7H244.7zM635.6 420.7h116.1v185.7H635.6zM403.8 420.7h185.7v185.7H403.8z"/><path fill="#122436" d="M437.1 458.1h119.1v20H437.1z"/><g><path fill="#122436" d="M437.1 503.6h119.1v20H437.1z"/></path></g><g><path fill="#122436" d="M437.1 549.1h119.1v20H437.1z"/></path></g><g><path fill="#122436" d="M660.4 458.1h67.9v20h-67.9z"/></path></g><g><path fill="#122436" d="M660.4 503.6h67.9v20h-67.9z"/></path></g><g><path fill="#122436" d="M660.4 549.1h67.9v20h-67.9z"/></path></g><g><path fill="#122436" d="M268.8 458.1h67.9v20h-67.9z"/></path></g><g><path fill="#122436" d="M268.8 503.6h67.9v20h-67.9z"/></path></g><g><path fill="#122436" d="M268.8 549.1h67.9v20h-67.9z"/></path></g><g><path fill="#FFF" d="m486.3 476.5-134 45.8 45.8-134 257.1-257.1c40.2 16.2 72 48 88.2 88.2L486.3 476.5z"/><path fill="#FFCD35" d="M678.1 142.7 419.1 403l26.8 23.4 267.8-263zM463.6 445.6l260.1-261.4 19.7 35.2-254.2 254.2zM387.4 473.6l24 24-37.8 16z"/><path fill="#122436" d="m336.2 538.4 53.2-155.5 1.6-1.6 261.8-261.8 6.1 2.5c42.5 17.1 76.6 51.3 93.7 93.7l2.5 6.1-263.4 263.4-155.5 53.2zm70.6-144.6-38.5 112.6 112.6-38.5 250.7-250.7c-14.9-32.7-41.4-59.2-74.1-74.1L406.8 393.8z"/><path fill="#122436" d="M477.8 481.9c-21.6-34.1-51-63.5-85.1-85.1l10.7-16.9c36.6 23.2 68.1 54.7 91.3 91.3l-16.9 10.7zM366.518 466.942 380.66 452.8l42.284 42.285-14.142 14.142z"/><path fill="#122436" d="M444.968 415.442 701.15 159.26l14.142 14.142L459.11 429.584z"/></path></path></path></path></path></g></path></path></path></path></circle></circle></circle></path></path></path></path></g></switch></svg> <span>Blog Tutorial</span> </a></li> <li onclick='vibRate(50)'> <a href="https://www.creatorfaruk.com/search/label/Median%20UI%20Templates" title="Median UI"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewbox="0 0 256 256" style="enable-background:new 0 0 256 256" xml:space="preserve"><style>.st4{fill:#d8d6d7}.st7{fill:#40c4df}.st8{fill:#491352}</style><path d="M246.5 235.439H9.5a5 5 0 0 1-5-5V25.561a5 5 0 0 1 5-5h237a5 5 0 0 1 5 5V230.44a5 5 0 0 1-5 4.999z" style="fill:#f85252"/><path class="st4" d="M251.5 55.74v174.7c0 2.76-2.24 5-5 5H9.5c-2.76 0-5-2.24-5-5V25.56c0-2.76 2.24-5 5-5h59.95l25.51 31.7a9.345 9.345 0 0 0 7.28 3.48H251.5z"/><path d="M251.5 55.74v174.7a5 5 0 0 1-5 5H24.73a5 5 0 0 1-5-5V25.56a5 5 0 0 1 5-5h44.72l25.51 31.7a9.345 9.345 0 0 0 7.28 3.48H251.5z" style="fill:#fff"/><circle class="st7" cx="205.342" cy="38.457" r="6.896"/><circle class="st7" cx="230.584" cy="38.457" r="6.896"/><path class="st7" d="M77.422 223.667H21.578a5 5 0 0 1-5-5V73.451a5 5 0 0 1 5-5h55.844a5 5 0 0 1 5 5v145.216a5 5 0 0 1-5 5z"/><path class="st4" d="M155.922 138.003h-55.844a5 5 0 0 1-5-5V73.451a5 5 0 0 1 5-5h55.844a5 5 0 0 1 5 5v59.552a5 5 0 0 1-5 5zM234.422 138.003h-55.844a5 5 0 0 1-5-5V73.451a5 5 0 0 1 5-5h55.844a5 5 0 0 1 5 5v59.552a5 5 0 0 1-5 5z"/><circle class="st4" cx="108.317" cy="187.214" r="13.683"/><circle class="st4" cx="147.606" cy="187.214" r="13.683"/><circle class="st4" cx="186.894" cy="187.214" r="13.683"/><circle class="st4" cx="226.183" cy="187.214" r="13.683"/><path class="st7" d="m184.344 188.362 9.923 37.034c.996 3.718 5.644 4.963 8.365 2.241l27.111-27.111c2.722-2.722 1.476-7.369-2.241-8.365l-37.034-9.923c-3.718-.996-7.12 2.406-6.124 6.124z"/><path d="m230.367 220.006-8.255 8.255a5 5 0 0 1-7.071 0l-6.516-6.516 15.326-15.326 6.516 6.516a5.001 5.001 0 0 1 0 7.071z" style="fill:#1c868e"/><g><path class="st8" d="M246.5 18.56H9.5c-3.86 0-7 3.14-7 7v204.88c0 3.86 3.14 7 7 7h237c3.86 0 7-3.14 7-7V25.56c0-3.86-3.14-7-7-7zm3 211.66a3.224 3.224 0 0 1-3.22 3.22H9.72a3.224 3.224 0 0 1-3.22-3.22V25.78a3.224 3.224 0 0 1 3.22-3.22h58.773l24.909 30.954a11.288 11.288 0 0 0 8.838 4.227H249.5V230.22zm0-176.48H102.24a7.31 7.31 0 0 1-5.722-2.734L73.627 22.56H246.5c1.654 0 3 1.346 3 3v28.18z"/><path class="st8" d="M24.217 41.618H58.76a2 2 0 0 0 0-4H24.217a2 2 0 0 0 0 4zM205.342 29.561c-4.906 0-8.896 3.991-8.896 8.896 0 4.905 3.991 8.896 8.896 8.896s8.896-3.991 8.896-8.896c.001-4.905-3.99-8.896-8.896-8.896zm0 13.793c-2.7 0-4.896-2.196-4.896-4.896s2.197-4.896 4.896-4.896 4.896 2.197 4.896 4.896-2.196 4.896-4.896 4.896zM230.584 29.561c-4.906 0-8.896 3.991-8.896 8.896 0 4.905 3.991 8.896 8.896 8.896s8.896-3.991 8.896-8.896c.001-4.905-3.99-8.896-8.896-8.896zm0 13.793c-2.7 0-4.896-2.196-4.896-4.896s2.197-4.896 4.896-4.896 4.896 2.197 4.896 4.896-2.196 4.896-4.896 4.896zM77.422 66.451H21.578c-3.86 0-7 3.14-7 7v145.215c0 3.86 3.14 7 7 7h55.844c3.86 0 7-3.14 7-7V73.451c0-3.86-3.14-7-7-7zm3 152.216c0 1.654-1.346 3-3 3H21.578c-1.654 0-3-1.346-3-3V73.451c0-1.654 1.346-3 3-3h55.844c1.654 0 3 1.346 3 3v145.216zM93.078 73.451v59.552c0 3.86 3.14 7 7 7h55.844c3.86 0 7-3.14 7-7V73.451c0-3.86-3.14-7-7-7h-55.844c-3.86 0-7 3.14-7 7zm65.844 0v59.552c0 1.654-1.346 3-3 3h-55.844c-1.654 0-3-1.346-3-3V73.451c0-1.654 1.346-3 3-3h55.844c1.654 0 3 1.346 3 3zM178.578 140.003h55.844c3.86 0 7-3.14 7-7V73.451c0-3.86-3.14-7-7-7h-55.844c-3.86 0-7 3.14-7 7v59.552c0 3.86 3.14 7 7 7zm-3-66.552c0-1.654 1.346-3 3-3h55.844c1.654 0 3 1.346 3 3v59.552c0 1.654-1.346 3-3 3h-55.844c-1.654 0-3-1.346-3-3V73.451zM96.833 151h62.333a2 2 0 0 0 0-4H96.833a2 2 0 0 0 0 4zM96.833 161.667h62.333a2 2 0 0 0 0-4H96.833a2 2 0 0 0 0 4zM237.667 147h-62.333a2 2 0 0 0 0 4h62.333a2 2 0 0 0 0-4zM237.667 157.667h-62.333a2 2 0 0 0 0 4h62.333a2 2 0 0 0 0-4zM108.317 202.897c8.647 0 15.683-7.036 15.683-15.683s-7.036-15.683-15.683-15.683-15.683 7.036-15.683 15.683 7.035 15.683 15.683 15.683zm0-27.366c6.442 0 11.683 5.241 11.683 11.683s-5.241 11.683-11.683 11.683-11.683-5.241-11.683-11.683 5.241-11.683 11.683-11.683zM147.605 171.531c-8.647 0-15.683 7.036-15.683 15.683s7.035 15.683 15.683 15.683 15.683-7.036 15.683-15.683-7.035-15.683-15.683-15.683zm0 27.366c-6.442 0-11.683-5.241-11.683-11.683s5.241-11.683 11.683-11.683 11.683 5.241 11.683 11.683-5.241 11.683-11.683 11.683z"/><path class="st8" d="m186.157 202.863 1.892 7.057H96.83a2 2 0 0 0 0 4h92.291l1.719 6.41H96.83a2 2 0 0 0 0 4h95.082l.425 1.585c1.386 5.193 7.892 6.955 11.707 3.139l4.481-4.481c5.209 5.209 6.43 7.149 10.051 7.149 3.652 0 4.858-1.956 10.294-7.392H241c2.642 0 2.646-4 0-4h-8.328a6.99 6.99 0 0 0 .676-6.41H241c2.642 0 2.646-4 0-4h-10.82l-3.501-3.501 4.273-4.273c6.454-2.064 10.918-8.116 10.918-14.936 0-8.646-7.039-15.68-15.69-15.68-8.088 0-14.762 6.155-15.591 14.027l-8.514-2.28a15.63 15.63 0 0 0-15.185-11.747c-8.646 0-15.68 7.034-15.68 15.68 0 8.404 6.642 15.266 14.947 15.653zm42.796 11.486a3.005 3.005 0 0 1 0 4.243c-11.681 11.682-9.133 11.621-17.599 3.153l12.497-12.497 5.102 5.101zm-2.773-38.819c6.446 0 11.69 5.239 11.69 11.68 0 3.743-1.802 7.18-4.672 9.346-.196-2.973-2.203-5.531-5.18-6.328l-13.503-3.62c.314-6.161 5.426-11.078 11.665-11.078zm.803 18.562c2.238.599 2.932 3.325 1.418 4.939-.009.01-.015.022-.025.032-.016.019-.035.032-.051.052l-27.11 27.11c-1.634 1.635-4.421.878-5.014-1.342-10.672-39.809-10.844-38.249-9.148-39.94 1.685-1.681.124-1.522 39.93 9.149zM186.89 175.53a11.65 11.65 0 0 1 10.469 6.484l-6.37-1.706c-5.207-1.403-9.968 3.356-8.582 8.569l2.644 9.863c-5.568-.887-9.842-5.712-9.842-11.531.001-6.439 5.241-11.679 11.681-11.679z"/></path></path></path></g></path></path></circle></circle></circle></circle></path></path></circle></circle></path></path></path></svg> <span>Median UI</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

Rate This Article

Go to Link

Thank You So Much Create a Grid Stylish Widget Category on Blogger Website For Reading This Article.