Bedah Website #3: Generate thumbnail postingan Blogspot secara random - MZAINI30

Rabu, 22 April 2020

Bedah Website #3: Generate thumbnail postingan Blogspot secara random

Hai hai hai....

Kok aku kayak senang banget ya? Hehehehe

Soalnya kan aku mulai hari ini menggunakan template dari Igniel yang menurutku kayaknya oke banget nih dan sayang kalau nggak dipakai

Namun, karena postingan-postinganku kebanyakan nggak pakai gambar, maka jadinya seperti ini:


Waduh, kok no image semua ya tulisannya?

Akhirnya, aku pun sedikit otak-atik HTMLnya dengan Javascript dan akhirnya, ini hasilnya:


Ini kode yang aku buat:

<!-- acak gambar - mzaini30.com -->
  <script type="text/javascript" src="https://mzaini30.js.org/prism/jquery.min.js"></script>
  <script type="text/javascript">
    // <![CDATA[

      // boleh diubah
      thumbnail_awal = 'https://1.bp.blogspot.com/-fDKtvH4H0as/XZTKmRSd-EI/AAAAAAAAH_s/OAdOYS1iA4kOATazMR64JmZvmqX48whbgCLcBGAsYHQ/w360-h120-p-k-no-nu/Fiksioner-No-Image.png'
      gambar_acak = [
        'https://1.bp.blogspot.com/-1YBfZqpNbUc/XqA49rC-oPI/AAAAAAAADko/3geNj5ZqwcI5iReWPmpbpkcv4kZq6dWmwCEwYBhgL/s360/IMG-20171213-WA0002.jpg',
        'https://1.bp.blogspot.com/-2WCHZ2vPCX4/XqA4oJZNoxI/AAAAAAAADjI/9TEfsFlsTscA9jaqBuLc3xKEPYbUTQxegCEwYBhgL/s360/3e24b900477fecde431c4487353411a0.jpg',
        'https://1.bp.blogspot.com/-5PScpgX3zdc/XqA48HkjWUI/AAAAAAAADlU/p3f4zDatrnQ2NrvLMiZUNXwP5q83_D1IgCEwYBhgL/s360/IMG-20171213-WA0000.jpg',
        'https://1.bp.blogspot.com/-6e5XevKOz5w/XqA4nRf7wgI/AAAAAAAADjE/aKP8SDez7h0xJggH1cReUrxx2WIqHv78gCEwYBhgL/s360/36ec23bc48e02a79df2bd0fcfa501945.jpg',
        'https://1.bp.blogspot.com/-6jzWaab4sQE/XqA4YiWDldI/AAAAAAAADi8/CU6CNUSEsoY5afEgWAboxmvQUqQ0oue9wCEwYBhgL/s360/208fa3284839cd7b5470d1e816b0081a.jpg',
        'https://1.bp.blogspot.com/-96tKU7-rAT0/XqA5D1WAxFI/AAAAAAAADk4/j2XIew7YK64Kh8RKVjazpG_UIERxT4KngCEwYBhgL/s360/IMG-20180120-WA0006.jpg',
        'https://1.bp.blogspot.com/-9R1XQ5ajIUI/XqA4-6GPjdI/AAAAAAAADlU/6Xx0oszO1DYH4XHLOO4CmgxSYImTRZhTQCEwYBhgL/s360/IMG-20171213-WA0006.jpg',
        'https://1.bp.blogspot.com/-bDIaHEkdjb8/XqA49FlDS9I/AAAAAAAADlE/-7gv1V6LE2geGJoBcfpE9oi4xiBmKOSKwCEwYBhgL/s360/65feec98038eb527458384011622b95f.png',
        'https://1.bp.blogspot.com/-c-rdlGGh45w/XqA5Ftdg_4I/AAAAAAAADk4/vMiaQhZCCUg19KjXWwyPEhGgwbd8t8LQwCEwYBhgL/s360/IMG-20180120-WA0205.jpg',
        'https://1.bp.blogspot.com/-dDO5Vc4AncY/XqA5AUKoy9I/AAAAAAAADko/zchCG_C0smc453rjwxqKwFEiSuDIYs0TgCEwYBhgL/s360/IMG-20171213-WA0011.jpg',
        'https://1.bp.blogspot.com/-EaJ5NjXHIXE/XqA5DPwmzWI/AAAAAAAADlE/WpxynsA2M8oLXVYFRpU_-gA10Jo65xd-wCEwYBhgL/s360/IMG-20171221-WA0001.jpg',
        'https://1.bp.blogspot.com/-gbGB7g5pyQI/XqA5HTa-JBI/AAAAAAAADlA/IKAiKcvFW4gp8g9688jnZXCmkRKOlN7AwCEwYBhgL/s360/IMG-20180728-WA0013.jpg',
        'https://1.bp.blogspot.com/-HUOAnMSNt9A/XqA5Ns0DKnI/AAAAAAAADlU/l9t5l2uCN5w2JLcNVbgte6Z5dZrAJcrNQCEwYBhgL/s360/cafce2f78a80e7e69f095476fd211f21.jpg',
        'https://1.bp.blogspot.com/-itJOhQ25x50/XqA4mZQ6PjI/AAAAAAAADjA/6uxj95rSeSQc-KAShna7MnXUHTOk-kJZwCEwYBhgL/s360/232ef87db6ae6ffa456df7f8de0f3308.jpg',
        'https://1.bp.blogspot.com/-jwVU6knTJ8M/XqA4-X5A9mI/AAAAAAAADk4/fi3SaeUGxRI-jHkrZYx5kzzwxFcGurS4ACEwYBhgL/s360/IMG-20171213-WA0005.jpg',
        'https://1.bp.blogspot.com/-KaUfFFc6_dM/XqA48o4HCbI/AAAAAAAADkw/QhVj53x-Izoa4d6BDjp6uBzL7BNlXuN7QCEwYBhgL/s360/65a05bc964edff200ea62d466000d980.jpg',
        'https://1.bp.blogspot.com/-m5br81hCfTk/XqA5VEzCC-I/AAAAAAAADlQ/U_KPQ0j4SNo_e7IZRCdmbf62ocMe_8KLACEwYBhgL/s360/fbb74348c371def5304c6b4f8e749ab9.jpg',
        'https://1.bp.blogspot.com/-m9zxn4qOIR0/XqA46n-T-aI/AAAAAAAADlM/zFijOlwtGN8MNDIvMMISDErwbYQB9_KiACEwYBhgL/s360/8cf0ef02861a11ccf21d3fed1c935ac0.jpg',
        'https://1.bp.blogspot.com/-MDBDlztHyuc/XqA5W5BJHTI/AAAAAAAADlU/rQOHlfRaIFEZOcLA2InuVNqCEP7SaEZugCEwYBhgL/s360/ocrzzFw.jpg',
        'https://1.bp.blogspot.com/-N58FFdwJkRw/XqA5Bc8A0YI/AAAAAAAADkw/cGtV3WO2TH8hCioMVvnqsRP1iwJmd__mgCEwYBhgL/s360/IMG-20171220-WA0023.jpg',
        'https://1.bp.blogspot.com/-PnJvPaDkHK0/XqA5AAdeOCI/AAAAAAAADlM/mfWft3A1Vmk_2Z4qnQrlMbnrwCsUA_47ACEwYBhgL/s360/IMG-20171213-WA0010.jpg',
        'https://1.bp.blogspot.com/-rz19dfdaWbE/XqA4_fyWI5I/AAAAAAAADlA/4M8fM6K-rGIxN6xBWttAIqs-eni0lRb-gCEwYBhgL/s360/IMG-20171213-WA0009.jpg',
        'https://1.bp.blogspot.com/-SMgY-H_S3E4/XqA4XLjcCAI/AAAAAAAADiw/HhQvpF2tehgyOZTA9KE_H8R9sAP1TuT7QCEwYBhgL/s360/0affaf0ff4c9761b90a8245fc809ecff.jpg',
        'https://1.bp.blogspot.com/-tOS_eYGo9VU/XqA5JFl1C5I/AAAAAAAADlE/GU3IEhEpeas7mHhzvhRdNhD0Hpj--YXxwCEwYBhgL/s360/Screenshot_2018-06-29-12-25-54.png',
        'https://1.bp.blogspot.com/-TvMX0SVwLX4/XqA5DpyA4EI/AAAAAAAADlA/oVBZYAJCrrIGlWNPyqpfP6zDTFtFgMApwCEwYBhgL/s360/IMG-20171221-WA0005.jpg',
        'https://1.bp.blogspot.com/-VxY4f09dmUE/XqA5UCLyByI/AAAAAAAADlM/CvXGSAnCC9ULuUum3FspT_1XbO9k703OwCEwYBhgL/s360/f93e7481002e7322674ed759c452e5c5.jpg',
        'https://1.bp.blogspot.com/-WwCaxQUGeyM/XqA5MbSgc9I/AAAAAAAADlM/7c9MLaaQkVQ90mPq5qI3DFJAA4RYY1nXQCEwYBhgL/s360/bcbfe3dd55ce6e0895b88fa6a59814c4.jpg',
        'https://1.bp.blogspot.com/-XDWKNCldcc0/XqA5KJ9LZ8I/AAAAAAAADlE/x27zY74FwIgNIf1bsxIudYmNQJUdGRsBQCEwYBhgL/s360/b318231eacb34114fc39f1d5d3912056.jpg',
        'https://1.bp.blogspot.com/-zF3xx9OiCeQ/XqA5CtnH4zI/AAAAAAAADkw/Y49u3RndeT8yheTefFACSRPkT3QhQGWsgCEwYBhgL/s360/IMG-20171220-WA0043.jpg',
        'https://1.bp.blogspot.com/-ZLsEAF3fA1I/XqA5PYiNfQI/AAAAAAAADlI/vNJmbfXG5xMl0CKcdpOrT7HxW9Iy5EgGQCEwYBhgL/s360/cd7ac39482a65317c51a32bfba46491f.jpg',
        'https://1.bp.blogspot.com/-ZZl1ZMJdlAU/XqA5BDjqD0I/AAAAAAAADk4/eaKx4ROGHUwv3QVl0610EfSBsb5saJFTgCEwYBhgL/s360/IMG-20171220-WA0020.jpg'
      ]

      // nggak boleh diubah
      thumbnail_muncul = []
      related_posts_muncul = []
      array_gambar_acak_tertinggi = gambar_acak.length - 1
      $(`[src="${thumbnail_awal}"]`).each(function(){
        cari_gambar_yang_belum_terpakai = () => {
          pilih_acak = Math.round(Math.random() * array_gambar_acak_tertinggi)
          if (thumbnail_muncul.indexOf(pilih_acak) > -1){
            // kalau sudah ada di list
            cari_gambar_yang_belum_terpakai()
          } else {
            // kalau belum ada di list
            $(this).attr('src', gambar_acak[pilih_acak])
            thumbnail_muncul.push(pilih_acak)
          }
        }
        cari_gambar_yang_belum_terpakai()
      })
    // ]]>
  </script>
<!-- /acak gambar - mzaini30.com -->

Itu aku meletakkannya sebelum </body>

Memodifikasi kode

Jadi, perhatikan sama kode-kode yang berada di bawah tulisan "// boleh diubah". Nah, itu adalah kode-kode yang bisa kamu ubah. Kalau kode-kode di bawahnya "// nggak boleh diubah", jangan diubah ya, karena itu skrip untuk mengolah gambar-gambarnya

Jadi, di kode yang bisa kita ubah itu ada dua bagian; thumbnail_awal dan gambar_acak. Thumbnail awal adalah link gambar thumbnail kalau kita nggak mencantumkan thumbnail di postingan. Kalau di Igniel kan, gambarnya ini:


Dan linknya adalah https://1.bp.blogspot.com/-fDKtvH4H0as/XZTKmRSd-EI/AAAAAAAAH_s/OAdOYS1iA4kOATazMR64JmZvmqX48whbgCLcBGAsYHQ/w360-h120-p-k-no-nu/Fiksioner-No-Image.png

Nah, kalau kita ingin mengganti gambar itu, berarti kita harus menyiapkan gambar yang lebar dan tingginya sama; 360 banding 120. Maka, aku pun mengolah gambar-gambar yang kusiapkan itu supaya memiliki perbandingan lebar dan tinggi: 360 dan 120:

 Kemudian, aku upload gambar-gambar itu dan linknya aku list di array gambar acak

gambar_acak = [
  'link gambar 1',
  'link gambar 2',
  'link gambar 3',
  'link gambar 4',
  'link gambar 5'
]

Share with your friends

2 komentar

  1. Akhirnya terpecahkan misteri itu.... Aku juga pengguna igniel nih, serin2 bikin update ya Bang. Hehe

    BalasHapus
    Balasan
    1. Siyaaaap

      Mau dibuat tutorial apa lagi ni? Hehehehehe

      Hapus

Maskot Pelarang Adblock

Hallo Kak, Perkenalkan saya Zen. Untuk bisa mengakses situs kami, terlebih dahulu matikan atau non-aktifkan ekstensi AdBlock nya yaaa...

Ok , Saya Mengerti