Maker tag |

This content originally appeared on DEV Community and was authored by Ałohe

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>

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.

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>

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 😊.

This content originally appeared on DEV Community and was authored by Ałohe

Print Share Comment Cite Upload Translate Updates

APA

Ałohe | Sciencx (2023-04-15T15:02:05+00:00) Maker tag. Retrieved from https://www.scien.cx/2023/04/15/maker-tag/

MLA

" » Maker tag." Ałohe | Sciencx - Saturday April 15, 2023, https://www.scien.cx/2023/04/15/maker-tag/

HARVARD

Ałohe | Sciencx Saturday April 15, 2023 » Maker tag., viewed ,<https://www.scien.cx/2023/04/15/maker-tag/>

VANCOUVER

Ałohe | Sciencx - » Maker tag. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/15/maker-tag/

CHICAGO

" » Maker tag." Ałohe | Sciencx - Accessed . https://www.scien.cx/2023/04/15/maker-tag/

IEEE

" » Maker tag." Ałohe | Sciencx [Online]. Available: https://www.scien.cx/2023/04/15/maker-tag/. [Accessed: ]

Related Posts