cara membuat tools slug generator diblogger

cara membuat tools slug generator diblogger

Slug adalah bagian tulisan yang terletak setelah nama domain sebuah blog atau website, dimana slug dipisahkan dengan tanda hubung (-).
Jadi slug adalah tautan? Ya, slug itu linknya sendiri, ini contoh slugnya, bagian yang ditandai
https://www.alfatechnesia.com/2022/02/cara-agar-blog-tidak-bisa-di-copas.html

Jadi, konverter slug ini akan mengubah semua spasi menjadi tanda hubung strip (-) dalam kalimat

banyak para ahli SEO yang percaya bahwa blog yang menerapkan slug pada url dapat meningkatkan Seo sehingga mendatangkan banyak trafik dari pencarian google, dengan syarat slug tersebut mengandung kata kunci dan ada yang mengatakan bahwa slug pada url yang pendek dan mengandung kata kunci, akan membuat Seo meningkat pada artikel.

Apa fungsi slug generator ini?

Fungsinya adalah menambahkan tanda strip (-) pada spasi yang ada di judul postingan yang anda convert.
Alat ini memudahkan kita menambahkan tanda strip (-) secara otomatis,dan tidak membuang-buang waktu untuk menambahkanya.

preview

Bagai mana cara memasangnya?

  1. Langkah 1: Login ke dashboard blogger anda masing-masing.
  2. Langkah 2: Pilih Halaman kemudian pilih buat Halaman baru.
  3. Langkah 3: pilih mode HTML.
  4. Langkah 4: Salin semu kode dibawah ini dan tempelkan di halaman tersebut.
    <form>
        <div class="input-area">
            <p>Masukan Judul :</p>
              <input id="slug-source" type="text" placeholder="Tempelkan judul disini" value="" />
            <p>Slug Url :</p>
          <input id="slug-target" type="text" placeholder="Hasil..." readonly="readonly" />
            <button class="button1" onclick="myFunction()" type="button">
                Convert
            </button>
          <button class="button1" onClick="document.location.reload(true)">
                Riset
            </button>
            <button class="button1" id="slug-target" onclick="copy_text()" type="button">
                Copy Slug
            </button>
        </div>
    </form>
    <style>
      /*ganti warna:*/
      :root{
        --btn-bg:#5245de;
        --warna-ab:#fefefe;
        --input-bg:#ebeff3;
        --input-c:#455065;
      }
      
      /*Ganti class drK dibawah ini jika class dark mode di template kalian berbeda*/
      html.drK{
        --input-bg:rgb(43 43 43);
        --input-c:#fefefe;
      }
     /*style by alfatechnesia.com to appreciate us, please don't delete this credit*/
    .widget input[type=text],.widget textarea{position:relative;width:100%;line-height:1em;font-size:12px;color:var(--input-c);background:var(--input-bg);margin-top:5px;padding:15px;border-radius:5px;border:none;outline:0}
    input,button1,select,textarea{font:inherit;font-size:100%;color:inherit;line-height:normal;vertical-align:baseline}
    .button1{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:var(--warna-ab);background-color:var(--btn-bg);border-radius:3px;font-size:13px;line-height:22px}
    .button1:hover{color:var(--warna-ab);opacity:.75}
    </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 copied successfully");
        }
      </script>
  5. Langkah 5 :klik simpan dan lihat hasilnya.

sekian cara membuat tools slug generator dibloggersemoga bermanfaat dan terimakasih sudah berkunjung ke blog ini