DEV Community

Cover image for Maker tag
Alohe
Alohe

Posted on

Maker tag

Introducing Maker Tag, a customizable HTML and CSS based widget that allows you to display a text tag on your website. The widget is designed to be easily added to any website with minimal configuration.

To add the Maker Tag widget to your website, simply add the following JavaScript code to your web page:

<script src="https://cdn.jsdelivr.net/gh/alohe/maker-tag@1.0.0/dist/mwl.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

The widget can be customized by passing an object to the MakerTag constructor. You can customize the tag's text, link, color, background, margin, padding, font size, font weight, border radius, position, shadow, and hover effects. Additionally, you can enable the animated gradient background.

maker-tag by Alohe examples - https://github.com/alohe/maker-tag

Here is an example of the default configuration:

<script>
  new MakerTag({
    text: "Made with ❤️ by Alohe",
    link: "https://alohe.github.io",
    position: "bottom-left",
    background: "radial-gradient(circle at left, #FFE2A3 0%, #fff 50%, #FFE2A3 100%)",
    color: "#E59F0D",
    animated: true,
    padding: "10px 20px",
    margin: "10px",
    font: {
        size: "13px",
        weight: "700",
    },
    borderRadius: "13px",
    hover: {
        color: "",
        background: "",
        shadow: "",
    },
    shadow: "none",
  });
</script>
Enter fullscreen mode Exit fullscreen mode

Maker Tag is free and open-source, so you can use it for any personal or commercial project.

To learn more or want to make a contribution, visit the GitHub page at https://github.com/alohe/maker-tag and be sure to give it a ⭐.

And, Thank you for reading 😊.

Top comments (0)