Skip to main content

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.

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.

    ReplyDelete
    Replies
    1. Thank you very much for your lovely words! It always makes us happy to hear this.

      Delete
  2. bro how to make a hero header like you made in your home screen please bro make a tutorial on that

    ReplyDelete

Post a Comment

Popular posts from this blog

10000+ New Facebook VIP Stylish Bio Symbols 2024

Hello Friends, agar aaf bhi Instagram or Facebook account ky liye vip bio symbols search kar rahe hy to yaha par hum aaf ky liye facebook vip account bio symbols dene wale hai. Dosto aaf sab ka bahut bahut shukria hamari blog per visit karny ky liye, So dosto Aaj hum aafke liye Instagram or Facebook VIP Account New Bio Symbols 2024 lekar aaye hai jise aap Bio me copy aur paste karke apne facebook profile ko Vip account bana sakte hai. Yaha par humny Facebook aur Instagram vip account bnany ke liye tmam qism ke VIP bio symbols share kiye hai yaha par aafko VIP Symbols ke sath sath long vip bio symbols + Fb aur Instagram Stylish bio symbols bhi mil jayege. Aaf yaha se kisibhi Bio symbols ko copy karke fb account me paste kar sakte hai.To chaliye ASCII art Instagram, Facebook Stylish symbols ki taraf barhty hy Also Read: Facebook VIP Account Latest Bio Symbols Facebook VIP Account Latest Bio Symbols Part Part 1 Facebook VIP Account Latest Bio Symbols Part Part 2 Faceboo

100% Download Free Nadra Polio Vaccination Certificate Online

Polio vaccination is mandatory for all international travelers from Pakistan, regardless of age, to prevent the spread of polio to other countries. Pakistan remains among only two countries in the world where wild poliovirus remains in circulation, so it is crucial to ensure that anyone crossing borders or traveling from infected countries is vaccinated. Nadra Polio Vaccine For Overseas Air Travel Polio Vaccination Card Kesy Hasil Kary If you are planning to travel abroad, one document you may need to have on hand is a polio certificate. This certificate serves as proof that you have received the polio vaccine, which is required for entry into some countries. In this article, we'll cover everything you need to know about polio certificates, including why they're required, how to get them, and more. What is a polio certificate? A polio certificate is a document that serves as proof that you have received the polio vaccine. This vaccine is required for entry into some count

Procedure How to Set Rose Telegram Bot

The Rose bot is one of the most popular moderator bots for Telegram. There are many other Telegram groups bot for it but this one is the best... Telegram groups can have up to 100k members, that's a huge number. Managing such a large group seemed impossible. But, group managing bots like the Rose bot make it really simple. In this article, we will share a guide to help you set up the Rose bot on Telegram . What is Bot Rose? The Rose bot is one of the most popular moderator bots for Telegram. There are many other Telegram groups for it but this one is the best and most popular one out there. How to set rose telegram bot? To set up Bot Rose on Telegram, follow these steps: Open Telegram Group : To add Rose bot in your Telegram Group.  Add @MissRose_bot to group : Tap Add Member in your Telegram group. Find @MissRose_bot and add rose bot to group Give Admin Rights to Rose bot : you have to give Admin rights or Admin permission to Rose bot after adding it to your group. Send /conn