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