How to Make Slug Converter Tools on Blogger

TrickPk 12/12/21  Recently , Updated

Also Read

Slug is a post that is located after the domain name of the blog that is part of the link to a blog post or a page. Usually the text is separated by a dash " - " For example https://www.trickpk.com/2021/12/make-slug-converter-tools-on-blogger.html text that is given a yellow block is called Slug.

Many SEO experts believe that blogs that apply Slug to page URLs can increase visitor traffic from search engines because they contain keywords in the title / content, a good Slug is a short, dense, and keyword-friendly Slug because it looks more user-friendly and Google likes. for those of you who want to make this Slug Converter tool on your blog, you can listen to the method below.

Online Slug URL Generater Tools

---

TitleSlug Convert Copy Slug

Generated Slug Url :

How to Make Slug Converter Tools on Blogger

---

Please go to blogger > page > + new page copy all the code below and paste it into your page with html mode.

<form>
    <div class="input-area">
        <label>Enter Title</label><input id="slug-source" type="text" value="" /><label>Slug Url :</label><input id="slug-target" type="text" value="" />
        <trickpk-slug-url-button class="trickpk-slug-url-button" onclick="myFunction()" type="trickpk-slug-url-button">
            Convert
        </trickpk-slug-url-button>
        <trickpk-slug-url-button class="trickpk-slug-url-button" id="slug-target" onclick="copy_text()" type="trickpk-slug-url-button">
            Copy Slug
        </trickpk-slug-url-button>
        <p><span class="slug-ouput">Generated Slug URL</span> : <span class="slug-target-span" id="slug-target-span"></span></p>
    </div>
</form>
<h2 style="text-align: left;"></h2>
<style>
.widget input[type=text],.widget textarea{width:100%;margin-right:10px;padding:15px;outline:0;border:0 solid rgba(230,230,230,1);border-left:0;border-right:0;border-radius:1px;line-height:22px;background-color:#fefefe}
input,trickpk-slug-url-button,select,textarea{font:inherit;font-size:100%;color:inherit;line-height:normal;vertical-align:baseline}
.trickpk-slug-url-button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#5245de;border-radius:3px;font-size:13px;line-height:22px}
.trickpk-slug-url-button:hover{color:#fefefe;opacity:.75}
.slug-target-span{color:#f58d42}
.darkMode header .widget input[type=email],.darkMode .widget input[type=text],.darkMode .widget textarea{background-color:rgb(43 43 43)}
.darkMode.slug-ouput{color:#fefefe}
</style>
<script>
    function myFunction() {
        var a = document.getElementById("slug-source").value;

        var b = a
            .toLowerCase()
            .replace(/ /g, "-")
            .replace(/[^\w-]+/g, "");

        document.getElementById("slug-target").value = b;

        document.getElementById("slug-target-span").innerHTML = b;
    }
  
      function copy_text() {
        document.getElementById("slug-target").select();
        document.execCommand("copy");
        alert("Text successfully copied");
    }
</script>

After pasting it would be nice to preview it first if it is perfect then Publish.

And put the Slug Converter tool in the navigation menu.

Maybe that's enough about How to Make Slug Converter Tools on Blogger, hopefully it can be used properly. Hope it is useful.