Download this Premium Blogger Template. Download now!
Advertisement

How to Make Slug Converter Tools on Blogger

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


Convert Copy Slug

Generated Slug Url :

How to Make Slug Converter Tools on Blogger


Online Slug Generator Tool in Blogger - TrickPk

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.

Where do you want to donate?

Paypal
EASYPAISA / ACC NO - 923487171XXX
Treat the creator to coffee by giving a small donation. click the arrow icon as above.

3 comments

  1. Hello Bro, I saw all your posts you are really very awesome and are giving best codes and widgets for blogger . really loved your content bro.
    1. Thank you very much for your lovely words! It always makes us happy to hear this.
  2. bro how to make a hero header like you made in your home screen please bro make a tutorial on that
© TrickPk.com . All rights reserved. Distributed by trickpk.com. Distributed by trickpk.com