How to Create Grid Style Category -
इसलिए मैं आपको Grid Style Layout का वह कोड साझा करूंगा जो ब्लॉगर वेबसाइट के होमपेज में एक श्रेणी अनुभाग प्रदर्शित करने में आपकी सहायता करेगा। यह पूरी तरह से केवल HTML और CSS कोड का उपयोग करके बनाया गया है। और यह सभी प्रकार के उपकरणों में पूरी तरह उत्तरदायी है।
यदि आप ब्लॉगर प्लेटफॉर्म पर नए हैं और शुरुआत से ब्लॉगर थीम को कस्टमाइज़ करना चाहते हैं तो आप यहां हमारे वीडियो ट्यूटोरियल देख सकते हैं। तो आइए देखें कि यह Grid Style Layout कैसे बनाएं और ब्लॉगर में कैसे जोड़ें।
Step to Add Grid Style Category -
Open Blogger layout section. Now Click on the add a gadget. Add new HTML/JavaScript Block and paste the below code in it.
Grid Style Category HTML Code -
<div class='K2-grid coll-3 icon-p-2'>
<h2> Subscribe our channel: Tech Gyan </h2>
<ul>
<li>
<a href='#' title='Subscribe'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'/></path></path></g></svg>
<span>Subscribe</span></a>
</li>
<li>
<a href='#' title='Twitter'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z'/></path></svg>
<span>Twitter</span></a>
</li>
<li>
<a href='#' title='Instagram'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><path class='svg-c' d='M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z'/><circle class='svg-c' cx='23' cy='9' r='1'/><path d='M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z'/></path></circle></path></svg>
<span>Instagram</span></a>
</li>
<li>
<a href='#' title='News'><svg viewbox='0 0 24 24'>
<path d='M20 5L20 19L4 19L4 5H20M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M18 15H6V17H18V15M10 7H6V13H10V7M12 9H18V7H12V9M18 11H12V13H18V11Z' fill-rule='evenodd'></path>
</svg><span>News</span></a>
</li>
<li>
<a href='#' title='Facebook'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'/></path></svg>
<span>Facebook</span></a>
</li>
<li>
<a href='#' title='Telegram'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'/></path></g></svg>
<span>Telegram</span></a>
</li>
<li>
<a href='#' title='Blogs'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M2,29a1,1,0,0,1-1-1.11l.77-7a1,1,0,0,1,.29-.59L18.42,3.94a3.2,3.2,0,0,1,4.53,0l3.11,3.11a3.2,3.2,0,0,1,0,4.53L9.71,27.93a1,1,0,0,1-.59.29l-7,.77Zm7-1.78H9ZM3.73,21.45l-.6,5.42,5.42-.6,16.1-16.1a1.2,1.2,0,0,0,0-1.7L21.53,5.35a1.2,1.2,0,0,0-1.7,0Z'/><path d='M23,14.21a1,1,0,0,1-.71-.29L16.08,7.69A1,1,0,0,1,17.5,6.27l6.23,6.23a1,1,0,0,1,0,1.42A1,1,0,0,1,23,14.21Z'/><rect x='7.39' y='16.1' width='11.01' height='2' transform='translate(-8.31 14.13) rotate(-45)'/><path d='M30,29H14a1,1,0,0,1,0-2H30a1,1,0,0,1,0,2Z'/></path></rect></path></path></g></svg>
<span>Blog</span></a>
</li>
<li>
<a href='#' title='Blogger'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M22,15H20.44A3.91,3.91,0,0,0,21,13a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h6a4,4,0,0,0,4-4V16A1,1,0,0,0,22,15ZM11,13a2,2,0,0,1,2-2h4a2,2,0,0,1,0,4H11Zm10,6a2,2,0,0,1-2,2H13a2,2,0,0,1-2-2V17H21Z'/></path></path></g></svg>
<span>Blogger</span></a>
</li>
</ul>
</div>
Grid Style Category CSS Code -
<style>
.K2-grid {
padding: 5px;
text-align: center;
}
.K2-grid ul {
clear: both;
margin: 15px 0 20px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.coll-3 ul li {
width: 21%;
}
.K2-grid li {
font-size: 0.9em;
font-weight: 500;
line-height: 1.3em;
text-align: center;
background: #ffffff;
border-radius: 15px;
margin: 5px 0;
box-sizing: border-box;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
padding: 10px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.K2-grid li a {
display: block;
text-decoration: none;
color: #00a0a3;
}
.K2-grid li svg {
margin: 3px 0;
width: 35px;
height: 35px;
fill: #00d4c9;
display: inline-block;
}
.K2-grid li span {
display: block;
padding: 0 3px;
}
</style>
अब आप जान चुके हैं - कि ब्लॉगर वेबसाइट में Grid Style Category सेक्शन कैसे जोड़ें। यदि आप इस तरह के और अधिक ट्यूटोरियल देखना चाहते हैं, तो हमारे YouTube Channel को सब्सक्राइब करें जहां मैं नियमित रूप से Blogging और SEO Tutorial पोस्ट करता हूं।
अब मुख्य प्रश्न यह है कि वेबसाइट के लिए SGV icon कहां मिल सकते हैं।
बहुत सारे मुफ्त SVG संसाधन हैं जिनका आप उपयोग कर सकते हैं। यहाँ, मेरी कुछ पसंदीदा वेबसाइटें हैं। जिनका उपयोग आप कर सकते हैं।
Top SVG & Shadow Website -
• ionic
ध्यान दें कि कुछ SVG Code में शैली पूर्वनिर्धारित होती है, इसलिए यह वास्तविक वेबसाइट में अलग दिख सकता है और आपको अपनी वेबसाइट के अनुसार SVG Code को संपादित करना होगा।
