How To Create a Slug Converter Tool in Blogger

Learn how to easily create a slug converter tool in Blogger with our step-by-step guide. Enhance your blog's functionality now!

In the context of a blog, a slug refers to the part of a post or page link that comes after the domain name. It is typically separated by a hyphen and serves as a unique identifier for the content. " - " Examples https://www.altq.com/2023/06/how-to-add-table-with-multiple-download.html, The text that is highlighted in red is what is known as a Slug.

According to SEO experts, using slugs in page URLs can boost website traffic from search engines as they contain relevant keywords. An effective slug is concise, keyword-rich, and user-friendly, which can improve its ranking on Google. If you want to add a slug converter tool to your blog, follow the steps below.

Demo

Create a Slug Converter Tool in Blogger

Creating a Slug Converter Tool in Blogger is a straightforward process that doesn't require HTML, CSS and JavaScript knowledge. I've already prepared a pre-designed codes for you, so all you need to do is copy and paste the provided codes at right place in your Theme XML.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: From Blogger Dashboard, select the blog you wish to customize and click on the "Pages" option.

Step 3: This will take you to the Blogger Page Menu, Click the plus icon at the bottom of right side.

Step 4: In the Page Editor, Click on "Compose view" icon , change to "HTML view".

Don't worry if you're not familiar with HTML; the changes we'll make are simple and easy to understand.

Step 5: Once you're in the HTML view, Now paste the following Script.

<form>
<div class="input-area">
        <label>Input Title</label><input id="slug-source" type="text" value="" /><label>Slug Url :</label><input id="slug-target" type="text" value="" />
        <button class="button" onclick="myFunction()" type="button">
            Convert
        </button>
        <button class="button" id="slug-target" onclick="copy_text()" type="button">
            Copy Slug
        </button>
        <p><span class="slug-ouput">Generated URL Slug</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,button,select,textarea{font:inherit;font-size:100%;color:inherit;line-height:normal;vertical-align:baseline}
.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}
.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 berhasil dicopy");
    }
</script>

Step 6: Save the changes by clicking on this icon

After Save your code and open your web page in a browser. If it is perfect then publish it.

That concludes our discussion on how to create a Slug Converter Tool on Blogger. We hope you found this information helpful and are able to implement it successfully. Thank you for reading!

You May Like These Posts:

Go to Link