Blog yang akan membahas segala hal yang berkaitan dengan kode-kodean. Mulai dari kode JavaScript, PHP, Golang, dan kode-kodean yang lainnya.
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...
Jln. Cokroaminoto II/74
Malang, Jawa Timur
Email: jelajahmalangaja@gmail.com
WhatsApp/Telpon: 0823 3528 8384
Bagus nih buat rekomendasi konten
BalasHapusMantap
Hapus