Cara Membuat Tools Slug Converter di Blogger

Slug adalah tulisan yang terletak setelah nama domain blog yang menjadi bagian dari link sebuah postingan atau halaman. Biasanya tulisan tersebut dipisah oleh tanda strip " - " contohnya https://www.aingribet.com/2021/08/hill-climb-racing-mod-apk.html teks yang diberi block kuning itu lah yang disebut Slug.

Banyak pakar SEO percaya bahwa blog yang menerapkan Slug pada URL halaman dapat meninggkatkan trafik pengunjung dari mesin pencarian karena mengandung kata kunci yang terdapat di dalam judul / konten, Slug yang bagus adalah Slug yang singkat, padat, dan sesuai kata kunci karena terlihat lebih userfriendly dan disukai Google. untuk kamu yang ingin membuat tools Slug Converter ini di blog kamu bisa menyimak cara nya dibawah ini.

Cara Membuat Tools Slug Converter di Blogger

  1. Silakan masuk ke blogger > halaman > + halaman baru salin semua kode di bawah ini dan pastekan ke dalam halaman kamu dengan mode html.
  2. <form>
        <div class="input-area">
            <label>Masukan Judul</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>
    
  3. Setelah di paste alangkah baiknya di pertinjau terlebih dahulu jika sudah sempurna kemudian Publikasikan.
  4. Dan letakan tools Slug Converter di menu navigasi.
Mungkin cukup sekian tentang Cara Membuat Tools Slug Converter di Blogger semoga bisa digunakan sebagaimana mestinya. semoga bermanfaat.

Source code:
https://alimumedia.blogspot.com

Baca juga :