Kali ini saya akan memberikan tutorial bagaimana caranya menambahkan sebuah script ke dalam postingan sehingga para pembaca dapat menyalinya.
Ada beberapa cara untuk menampilkan code untuk disalin dan di gunakan pembaca seperti menggunakan quote atau hanya sekedar menempelkanya di postingan dan memberikan warna atau bentuk huruf yang berbeda, caraini memang mudah tapi ada kelemahannya yaitu saat kita menempelkan script, script tersebut akan langsung disesuaikan dengan kontainer atau luas area dari post kita sehingga script yang di salin akan memakan banyak sekali ruang seperti gambar dibawah dikarenakan ruang yang sempit ke samping membuat script memanjang kebawah.
Jadi solusi dari masalah ini adalah dengan menggunakan script yang saya sediakan di bawah.yang akan membuat sebuah kontainer yang dapat terus memanjang ke samping atau ke bawah tergantung dengan isi konten sehingga script yang ada tidak akan dipotong potong menjadi beberapa bagian seperti gambar di atas dan tidak akan memakan banyak tempat
Baiklah sekarang kita mulai cara memasukan script yang kita miliki ke dalam kontainer yang dibuat menggunakan script yang saya sediakan di bawah.
Kita mulai dengan membuat postingan baru dan mengubah tampilan Compose(Box1) menjadi tampilan HTML(Box2).
Dicontoh kali ini saya akan menggunakan artikel yang hampir selesai, semua artikel yang sudah kita tulis menggunakan mode tampilan Compose(Box1) akan seperti gambar dibawah bila kita ubah menjadi tampilan HTML(Box2).
Pertama - tama kita mulai dengan menulis sebuah kata di tampilan Compose seperti gambar dibawah(Box1) sehingga kita tau dimana akan tampil script yang kita punya, jika sudah kita kembali lagi ke tampilan Html seperti gambar di atas dan mencari kata yang tadi dituliskan dengan cara mengetik bidang tampilan dan klik shortcut Ctrl + F atau find
Jika sudah menemukan kata yang kita tulisa tadi(Box1) mari kita delete dari<p> ke</p>(Box2) dan tempel code di bawah ini
<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #323232; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.3em; margin-bottom: 15px; margin-top: 15px; max-height: 400px; overflow: auto; padding: 25px 15px 15px; position: relative; vertical-align: baseline;">
Taruh script kalian di sini
</pre>
Kalian dapat mengganti kata berwarna merah dengan script yang kalian miliki(Box1) sehingga menjadi seperti gambar di bawah
Baikah seharusnya script yang kalian miliki sudah terdapat didalam sebuah kontainer, kalian dapat memeriksanya dengan memindahkan kembali tampilan ke compose(Box2) atau dengan mengklik Preview(Box1).
Baiklah sampai disini saja tutorial kali ini semoga bermanfaat jika ada yang ingin ditanyakan silahkan berkomentar di bawah, terimakasih sudah berkunjung sampai jumpa di artikel selanjutnya.
0 Komentar