Membuat Link Preview di dalam Postingan Blogger (PERTAMA DI DUNIA)

Link preview merupakan fitur yang sangat sering kita temukan. Misalnya aja ketika kita bermain Twitter, ada kita temukan link preview yang mengarah ke suatu website. Begitu pula saat kita menggunakan WhatsApp, Facebook, dan Telegram.

Buat yang belum tau link preview, tampilannya itu seperti ini:

[link https://www.mainkode.my.id/2014/09/mozilla-book-kenapa-sih-kita-terlalu.html]

Tapi orang kadang nyebutnya thumbnail sih. Tapi ya intinya itu sama aja. Intinya tuh membuat yang kayak gitu.

Nah, buatnya gimana? Apakah sulit?

Ya nggak sih. Buatnya itu mudah aja. Bahkan, untuk mengembed link previewnya itu juga sangat gampang. Jadi, di postingan ini, kode untuk memunculkan link previewnya hanyalah:

[link https://www.mainkode.my.id/2014/09/mozilla-book-kenapa-sih-kita-terlalu.html]

Simpel aja kan? Jadi, kita tuh cuma mengetikkan linknya aja dengan format seperti itu.

It's magic...

Jadi, kalau kamu sudah sangat penasaran, aku kasih deh kodenya.

Pertama, kita pasang kode untuk stylingnya ya. Jadi, masukkan kode berikut ini di atasnya </head>:

<style>
/*<![CDATA[*/
.preview-link {
  max-width: 600px;
  display: block;
  margin: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
  color: inherit;
}
.preview-link .keterangan {
  padding: 10px;
}
.preview-link * {
  display: block;
}
.preview-link .judul {
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}
.preview-link .deskripsi {
  color: gray;
  font-size: 12px;
}
.preview-link img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/*]]>*/
</style>

Sekarang untuk kode JavaScriptnya. Masukkan kode berikut di atasnya </body>:

Mudah aja kan? Nah, nanti setelah kamu coba, kalau misalnya nggak jalan kodenya, kabari aja ya...