Responsive Category layout for Blogger

 Hello, Welcome to Shiva Technic World in this post I am going to give you the Responsive Category layout code for Blogger. So let's check.

Style 1

First copy this code and paste above </head> or &lt;!--<head/>--&gt;&lt;/head&gt;

<style> .stw-feature { background: #fff; padding:5px; text-align: center;position: relative;} .stw-feature h2 { font-size: 1.6em; line-height: 1.6em; margin-bottom: 0; padding-bottom: 0; } .stw-feature ul { clear: both; margin: 15px 0 20px; width: 100%; display: flex;padding: 0; flex-wrap: wrap; justify-content: space-between; }.stw-feature.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: rgba(255, 255, 255, 0.5); border: 1px solid rgb(230,230,230); box-sizing: border-box; padding: 6px 0 12px; display: flex; align-items: center; justify-content: center; } .stw-feature li a { display: block; text-decoration: none; color: #333; /* font-size: 14px; */ /* line-height: 18px; */ }.stw-feature li svg{ margin: 3px 0; width: 35px; height: 35px; display: inline-block; }.stw-feature li span { display: block; padding: 0 3px; }.darkMode .stw-feature li{box-shadow: inset 0 0 10px #3b3939;} </style>

<div class='stw-feature coll-3 icon-p-2'> <h2> <span>Today you are looking for ?</span> </h2> <ul> <li> <a href='/search/label/Codes' title='Codes'> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewbox="0 0 171 171" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,171.99654v-171.99654h171.99654v171.99654z" fill="none"></path><g><path d="M161.08734,108.85553v25.04883h-55.54828h-40.07812h-55.54828v-25.04883z" fill="#9b59b6"></path><path d="M161.08734,13.27254v95.58299h-151.17469v-95.58299zM120.36797,61.45313c0,-19.25705 -15.61092,-34.86797 -34.86797,-34.86797c-19.25705,0 -34.86797,15.61092 -34.86797,34.86797c0,19.25705 15.61092,34.86797 34.86797,34.86797c19.25705,0 34.86797,-15.61092 34.86797,-34.86797z" fill="#f1c40f"></path><path d="M105.53906,133.90436l6.67969,23.82311h-53.4375l6.67969,-23.82311z" fill="#f4b844"></path><circle cx="256" cy="184" transform="scale(0.33398,0.33398)" r="104.4" fill="#9b59b6"></circle><path d="M161.08734,11.35547h-151.17469c-0.51125,-0.01554 -1.00595,0.18213 -1.36572,0.5457c-0.35977,0.36357 -0.55223,0.86032 -0.53131,1.37137v120.63182c-0.02444,0.5223 0.1633,1.03231 0.52056,1.4141c0.35726,0.38179 0.85369,0.60294 1.37647,0.61319h52.90513l-5.55583,19.70508h-9.6792c-1.10673,0 -2.00391,0.89718 -2.00391,2.00391c0,1.10673 0.89718,2.00391 2.00391,2.00391h75.83449c1.10673,0 2.00391,-0.89718 2.00391,-2.00391c0,-1.10673 -0.89718,-2.00391 -2.00391,-2.00391h-9.6792l-5.55583,-19.70508h52.90513c0.52278,-0.01025 1.01921,-0.2314 1.37647,-0.61319c0.35726,-0.38179 0.54501,-0.89179 0.52056,-1.4141v-120.63182c0.02091,-0.51105 -0.17155,-1.00781 -0.53131,-1.37137c-0.35977,-0.36357 -0.85447,-0.56123 -1.36572,-0.5457zM109.5756,155.63672h-48.1512l5.55583,-19.70508h37.03887zM158.97656,131.92383h-146.95312v-21.04102h146.95313zM12.02344,106.875v-91.51172h146.95313v91.51172z" fill="#083863"></path><path d="M79.38007,48.29113c-0.32055,-0.42395 -0.7964,-0.7032 -1.32284,-0.77629c-0.52645,-0.0731 -1.06037,0.06595 -1.4843,0.38653l-15.83086,11.97c-0.50081,0.37876 -0.79513,0.97037 -0.79513,1.59828c0,0.62791 0.29432,1.21952 0.79513,1.59828l15.83086,11.97033c0.8828,0.66754 2.1396,0.49304 2.80714,-0.38976c0.66754,-0.8828 0.49304,-2.1396 -0.38976,-2.80714l-13.71707,-10.37155l13.71707,-10.37021c0.42434,-0.32058 0.70385,-0.79668 0.77695,-1.32346c0.07311,-0.52677 -0.06619,-1.061 -0.38719,-1.48502z" fill="#083863"></path><path d="M110.25793,59.87138l-15.83086,-11.97c-0.88317,-0.66754 -2.14027,-0.49274 -2.80781,0.39043c-0.66754,0.88317 -0.49274,2.14027 0.39043,2.80781l13.71707,10.37155l-13.71707,10.36888c-0.8828,0.66754 -1.0573,1.92434 -0.38976,2.80714c0.66754,0.8828 1.92434,1.0573 2.80714,0.38976l15.83086,-11.97033c0.50081,-0.37876 0.79513,-0.97037 0.79513,-1.59828c0,-0.62791 -0.29432,-1.21952 -0.79513,-1.59828z" fill="#083863"></path><path d="M88.50185,41.73402c-0.52549,-0.0796 -1.06108,0.05282 -1.48894,0.36812c-0.42786,0.3153 -0.71293,0.78766 -0.79251,1.31316l-5.40353,35.69959c-0.16601,1.09428 0.5865,2.11594 1.68078,2.28195c1.09428,0.16601 2.11594,-0.5865 2.28195,-1.68078l5.40353,-35.69959c0.07989,-0.52565 -0.05239,-1.0615 -0.36772,-1.48958c-0.31533,-0.42808 -0.78786,-0.7133 -1.31356,-0.79287z" fill="#083863"></path><path d="M85.5,24.58125c-20.36377,0 -36.87188,16.5081 -36.87188,36.87187c0,20.36377 16.5081,36.87187 36.87187,36.87187c20.36377,0 36.87188,-16.5081 36.87188,-36.87187c-0.02301,-20.35424 -16.51764,-36.84887 -36.87187,-36.87188zM85.5,94.31719c-18.15032,0 -32.86406,-14.71374 -32.86406,-32.86406c0,-18.15032 14.71374,-32.86406 32.86406,-32.86406c18.15032,0 32.86406,14.71374 32.86406,32.86406c-0.02043,18.14185 -14.72221,32.84363 -32.86406,32.86406z" fill="#083863"></path></g></g></svg><span>Codes</span></a> </li> <li> <a href='/search/label/Templates' title='Templates'> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewbox="0 0 171 171" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,171.99654v-171.99654h171.99654v171.99654z" fill="none"></path><g><path d="M10.6875,10.6875h115.425v98.325h-115.425z" fill="#b2f8f1"></path><path d="M123.975,12.825v94.05h-111.15v-94.05h111.15M128.25,8.55h-119.7v102.6h119.7v-102.6z" fill="#f1c40f"></path><path d="M12.825,12.825h111.15v17.1h-111.15zM76.95,42.75h34.2v51.3h-34.2zM25.65,42.75h34.2v51.3h-34.2z" fill="#f1c40f"></path><path d="M44.8875,61.9875h115.425v98.325h-115.425z" fill="#c2e8ff"></path><path d="M158.175,64.125v94.05h-111.15v-94.05h111.15M162.45,59.85h-119.7v102.6h119.7v-102.6z" fill="#7496c4"></path><path d="M47.025,64.125h111.15v17.1h-111.15z" fill="#8bb7f0"></path><g fill="#8bb7f0"><path d="M111.15,94.05h34.2v51.3h-34.2z"></path></g><g fill="#8bb7f0"><path d="M59.85,94.05h34.2v51.3h-34.2z"></path></g></g></g></svg><span>Templates</span></a> </li> <li> <a href='/search/label/Tips &amp; Tricks' title='Tips &amp; Tricks'><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewbox="0 0 171 171" style=" fill:#000000;"><defs><radialgradient cx="85.5" cy="81.9375" r="67.6875" gradientunits="userSpaceOnUse" id="color-1_5K7kpfbXZSLT_gr1"><stop offset="0.385" stop-color="#f1c40f"></stop><stop offset="1" stop-color="#f1c40f"></stop></radialgradient><radialgradient cx="77.22431" cy="133.46194" r="35.86013" gradientunits="userSpaceOnUse" id="color-2_5K7kpfbXZSLT_gr2"><stop offset="0" stop-color="#6e757b"></stop><stop offset="1" stop-color="#4a4e52"></stop></radialgradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,171.99654v-171.99654h171.99654v171.99654z" fill="none"></path><g><circle cx="24" cy="23" transform="scale(3.5625,3.5625)" r="19" fill="url(#color-1_5K7kpfbXZSLT_gr1)"></circle><path d="M103.3125,135.375h-35.625c0,2.49375 0,7.125 0,7.125c0,9.975 7.8375,17.8125 17.8125,17.8125c9.975,0 17.8125,-7.8375 17.8125,-17.8125c0,0 0,-4.63125 0,-7.125z" fill="url(#color-2_5K7kpfbXZSLT_gr2)"></path><path d="M121.125,81.9375c0,-19.59375 -16.03125,-35.625 -35.625,-35.625c-19.59375,0 -35.625,16.03125 -35.625,35.625c0,17.8125 17.8125,32.0625 17.8125,49.875v3.5625h35.625v-3.5625c0,-17.8125 17.8125,-32.0625 17.8125,-49.875z" fill="#fefefe"></path></g></g></svg><span>Tips &amp; Tricks</span></a> </li></ul> </div>

Style 2 (Dark mode supported)

<style> .stw-feature { background: #00000000; padding:5px; text-align: center;position: relative;} .stw-feature h2 { font-size: 1.6em; line-height: 1.6em; margin-bottom: 0; padding-bottom: 0; } .stw-feature ul { clear: both; margin: 15px 0 20px; width: 100%; display: flex;padding: 0; flex-wrap: wrap; justify-content: space-between; }.stw-feature.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: rgba(255, 255, 255, 0.5); border: 1px solid rgb(230,230,230); box-sizing: border-box; padding: 6px 0 12px; display: flex; align-items: center; justify-content: center; } .stw-feature li a { display: block; text-decoration: none; color: #ffffff ; /* font-size: 14px; */ /* line-height: 18px; */ }.stw-feature li svg{ margin: 3px 0; width: 35px; height: 35px; display: inline-block; }.stw-feature li span { display: block; padding: 0 3px; }.darkMode .stw-feature li{box-shadow: inset 0 0 10px #ffffff;} </style>

<div class='stw-feature coll-3 icon-p-2'> <h2> <span>Today you are looking for ?</span> </h2> <ul> <li> <a href='/search/label/Blogger' title='Blogger'><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="48" height="48"
viewbox="0 0 48 48"
style=" fill:#000000;"><path fill="#ff6f00" d="M37,42H11c-2.761,0-5-2.239-5-5V11c0-2.761,2.239-5,5-5h26c2.761,0,5,2.239,5,5v26 C42,39.761,39.761,42,37,42z"></path><path fill="#fff" d="M33.5,22h-1c-0.828,0-1.5-0.672-1.5-1.5V20c0-3.866-3.134-7-7-7h-4c-3.866,0-7,3.134-7,7v8 c0,3.866,3.134,7,7,7h8c3.866,0,7-3.134,7-7v-4.5C35,22.672,34.328,22,33.5,22z M20,19h5c0.553,0,1,0.448,1,1s-0.447,1-1,1h-5 c-0.553,0-1-0.448-1-1S19.447,19,20,19z M28,29h-8c-0.553,0-1-0.448-1-1s0.447-1,1-1h8c0.553,0,1,0.448,1,1S28.553,29,28,29z"></path></svg><span></span></a> </li> <li> <a href='/search/label/Android' title='Android'> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="48" height="48"
viewbox="0 0 48 48"
style=" fill:#000000;"><path fill="#30dc80" d="M24,14.088C11.427,14.088,1.108,23.716,0,36h48C46.892,23.716,36.573,14.088,24,14.088z M33.179,27.079c0-1.104,0.895-1.999,1.999-1.999c1.104,0,1.999,0.895,1.999,1.999c0,1.104-0.895,1.999-1.999,1.999	C34.074,29.078,33.179,28.183,33.179,27.079z M12.822,29.078c-1.104,0-1.999-0.895-1.999-1.999c0-1.104,0.895-1.999,1.999-1.999	s1.999,0.895,1.999,1.999C14.821,28.183,13.926,29.078,12.822,29.078z"></path><path fill="#30dc80" d="M34.038,19.313c-0.14,0-0.281-0.035-0.41-0.11c-0.393-0.227-0.527-0.729-0.301-1.122l5.197-9.008	c0.227-0.394,0.729-0.529,1.122-0.301c0.393,0.227,0.527,0.729,0.301,1.122l-5.197,9.008C34.598,19.166,34.322,19.313,34.038,19.313	z"></path><path fill="#30dc80" d="M13.962,19.313c-0.284,0-0.56-0.148-0.712-0.411L8.054,9.894C7.827,9.501,7.962,8.999,8.354,8.772	c0.392-0.228,0.895-0.093,1.122,0.301l5.197,9.008c0.227,0.394,0.092,0.896-0.301,1.122C14.243,19.278,14.102,19.313,13.962,19.313z"></path></svg><span></span></a> </li> <li> <a href='/search/label/Windows' title='Windows'><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="48" height="48"
viewbox="0 0 172 172"
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#3cacff"><path d="M25.08333,21.5h53.75c1.978,0 3.58333,1.60533 3.58333,3.58333v53.75c0,1.978 -1.60533,3.58333 -3.58333,3.58333h-53.75c-1.978,0 -3.58333,-1.60533 -3.58333,-3.58333v-53.75c0,-1.978 1.60533,-3.58333 3.58333,-3.58333z"></path><path d="M89.73383,78.68283v-53.5995c0,-1.978 1.60533,-3.58333 3.58333,-3.58333h53.5995c1.978,0 3.58333,1.60533 3.58333,3.58333v53.5995c0,1.978 -1.60533,3.58333 -3.58333,3.58333h-53.5995c-1.98158,0 -3.58333,-1.60175 -3.58333,-3.58333z"></path><path d="M25.08333,89.58333h53.75c1.978,0 3.58333,1.60533 3.58333,3.58333v53.75c0,1.978 -1.60533,3.58333 -3.58333,3.58333h-53.75c-1.978,0 -3.58333,-1.60533 -3.58333,-3.58333v-53.75c0,-1.978 1.60533,-3.58333 3.58333,-3.58333z"></path><path d="M89.58333,146.91667v-53.75c0,-1.978 1.60533,-3.58333 3.58333,-3.58333h53.75c1.978,0 3.58333,1.60533 3.58333,3.58333v53.75c0,1.978 -1.60533,3.58333 -3.58333,3.58333h-53.75c-1.978,0 -3.58333,-1.60533 -3.58333,-3.58333z"></path></g></g></svg><span></span></a> </li></ul> </div>