Home
CSS Styling
HTML Projects

How to Add the Icon Grid Widget to Your Site

Customize your Icon Grid Widget easily! Learn quick steps to change icons, colors, and layout to make your website look professional.
Aaqib Amin
How to Add the Icon Grid Widget to Your Site

The Icon Grid Widget is a smart way to organize links or features on your website with a stylish three-column grid. Crafted using HTML, CSS, and a touch of JavaScript, it displays icons with smooth hover effects and a vibration tap on compatible devices. It’s an ideal choice for anyone looking to add a polished, interactive touch to their site without much effort.

This widget shines by turning a simple list into an eye-catching layout, perfect for highlighting blog categories, social profiles, or key content. The hover animations bring a modern vibe, while the vibration feedback adds a playful interaction for users. It keeps your page tidy and engaging, making navigation a breeze for visitors.

Whether you’re new to web design or a pro, this tool is easy to set up and customize. With its responsive design, it works flawlessly across devices, offering a fresh way to present information. Let’s walk through how to get it running on your site!

Table of Contents

How to Install and Use It

  1. Go to Blogger > Layout > Add a Gadget (where you want to add the Icon Grid Widget).
  2. Get the Code: Copy the full HTML, CSS, and JavaScript below.
<style>
/*<![CDATA[*/
/*--[ copyright codehubly.com ]--*/
.CodeHubly{text-align:center;position:relative}
.CodeHubly ul{clear:both;margin:15px 0 20px;width:100%;display:flex;padding:0;flex-wrap:wrap;justify-content:space-between}
.CodeHubly.icon-p-2 li{position:relative;width:30%;list-style:none;line-height:1.3em;text-align:center;border-radius:12px;margin:6px 0;background:linear-gradient(135deg,#ffffff,#f4f6ff);box-shadow:0 4px 15px rgb(0 0 0 / 3%);padding:7px 0px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;border:1px dashed #ccc}
.CodeHubly.icon-p-2 li:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.1)}
.CodeHubly li a{display:block;text-decoration:none;color:#000}
.CodeHubly li img{margin:5px 0;width:25px;height:25px;display:inline-block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
.CodeHubly li span{display:block;padding:0 4px;font-size:small;line-height:1.2}
.drK .CodeHubly li{background:linear-gradient(135deg,#111827,#1f2937);color:#f9fafb}
.CodeHubly img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
/*]]>*/
</style>

<div class="widget HTML" data-version="2" id="HTML10">
<div class="widget-content">
<div class="CodeHubly coll-3 icon-p-2">
<ul>

<li onclick="vibRate(50)">
  <a href="#" title="Title 1">
    <img src="https://img.icons8.com/?size=100&id=tmCxRQzq6lz6&format=png"/>
    <span>Title one</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 2">
    <img src="https://img.icons8.com/?size=100&id=106562&format=png"/>
    <span>Title two</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 3">
    <img src="https://img.icons8.com/?size=100&id=FplL8MNgQtgJ&format=png"/>
    <span>Title three</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 4">
    <img src="https://img.icons8.com/?size=100&id=63812&format=png"/>
    <span>Title four</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 5">
    <img src="https://img.icons8.com/?size=100&id=Xg3uzSjjreWU&format=png"/>
    <span>Title five</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 6">
    <img src="https://img.icons8.com/?size=100&id=IlBlSvhW3h6Z&format=png"/>
    <span>Title six</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 7">
    <img src="https://img.icons8.com/?size=100&id=6qmKe8iuY7R2&format=png"/>
    <span>Title seven</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 8">
    <img src="https://img.icons8.com/?size=100&id=6MWRhQKqz1bt&format=png"/>
    <span>Title eight</span>
  </a></li>

<li onclick="vibRate(50)">
  <a href="#" title="Title 9">
    <img src="https://img.icons8.com/?size=100&id=JRffiq26vyG2&format=png&color=000000"/>
    <span>Title Nine</span>
  </a></li>

   </ul>
    </div>
     </div>
      </div>

<script>
function vibRate(ms){try{if(navigator.vibrate)navigator.vibrate(ms);}catch(e){}}
</script>
  1. Add to Your Site: Paste the code into your website’s HTML section or a Blogger widget area.
  2. Customize Links: Replace the # in the <a href="#"> tags with your own URLs (e.g., blog posts or social profiles).
  3. Change Icons: Swap the img src links with icons that suit your needs (use sites like Icons8 for new images).
  4. Save and Test: Save your changes and check the grid on your site to ensure it looks good.

How to Customize

The Icon Grid Widget is simple to tailor to your preferences. Follow these steps to make it your own:

  1. Replace URLs: Update the <a href="#"> tags with your own links, like changing <a href="#" title="Title 1"> to <a href="https://yourblog.com/post1" title="My First Post">.
  2. Change Icons: Swap the img src links with new images, such as replacing <img src="https://img.icons8.com/?size=100&id=tmCxRQzq6lz6&format=png"/> with <img src="https://img.icons8.com/?size=100&id=newiconid&format=png"/> from Icons8.
  3. Update Titles: Modify the title attribute and <span> text, e.g., change title="Title 1" and <span>Title one</span> to title="Latest Article" and <span>Latest Article</span>.
  4. Adjust Styles: Tweak the <style> section, like altering background: linear-gradient(135deg, #ffffff, #f4f6ff) to background: linear-gradient(135deg, #e0f7fa, #ffffff) for a new gradient.

Save your changes and preview the grid to ensure it fits your site perfectly.

Easily Add or Remove Icons in the Icon Grid Widget

To add or remove icons in the Icon Grid Widget, simply copy or delete a li block from the code. To add a new icon, duplicate an existing li onclick="vibRate(50)" section, then update the <a href="https://yourwebsite.com">, <img src="https://img.icons8.com/?size=100&id=newiconid&format=png"/>, and <span>New Title</span> with your new link, image URL, and title. To remove an icon, delete the entire li block you no longer need, ensuring the grid remains balanced with up to nine items.

Who Can Use

This widget is perfect for a variety of people! Bloggers can use it to highlight posts or categories, while developers can showcase tools or projects. Content creators can link to social media, and small business owners can promote services or products. Anyone with a website looking to add a clean, interactive touch can benefit from this versatile tool.

Icon Grid Widget FAQ

What does the Icon Grid Widget do?

It creates a stylish three-column grid to display links or features with icons, adding hover effects and vibration feedback on supported devices.

Can I change the icons in the grid?

Yes, you can replace the icon images by updating the img src links with your preferred icons from sites like Icons8.

Is it easy to add to my website?

Absolutely, just copy the HTML, CSS, and JavaScript code into your site’s HTML section and customize the links.

Does it work on mobile devices?

Yes, the widget is designed to be responsive and works smoothly on phones, tablets, and desktops.

Related Posts

Final Thoughts

The Icon Grid Widget is a simple yet effective way to enhance your website’s look and feel. With its easy setup and customizable options, it’s a great tool to keep your visitors engaged. Give it a try, tweak it to your liking, and watch it bring a new level of organization to your site!

Post a Comment