Membuat Script box dengan css

Halo kawan

Kembali lagi di GRAD Information, well pada kesempatan kali ini saya akan memeberikan tutorial membuat 'script box' sederhana dengan 'css'. Btw, script box ini fungsinya untuk menampilkan kode-kode baik itu 'html', 'php', 'css' dll. Kedalam isi artikel kamu kawan.

Contoh sederhananya yaitu, kalian pasti pernah melihat blog yang memberikan sebuah 'script' di artikelnya supaya pengunjung bisa dengan mudah mengkopi 'script' tersebut.

Biasanya para blogger menggunakan 'plugin' script 'hightlight', yang mana ukuran filenya bisa sebanding dengan 'jquery' dan belum lagi cara pemanggilan plugin yang biasanya harus menggunakan 'cdn', hal ini bisa saja mengurangi pagespeed kalian kawan.

Nah, karena hal itu. Saya lebih suka membuat 'script' box sendiri dengan 'css', karena ringan dan mudah digunakan. Kelemahannya yaitu kurangnya fungsi 'hightlight' pada 'script'. 

Ok, agar lebih jelas. Simak penjelasannya sebagai berikut:

1. Masuk akun blog kalian kawan.

2. Klik menu 'tema' dan klik tombol '▼' lalu pilih edit 'html'

3. Oh iya, jangan lupa kopi kode 'css' berikut: 

.text-code-mini{width: 100%;min-height: 175px;outline: none;resize: none;border: /*1px solid grey*/ ;display:table-cell; vertical-align: middle;resize:none;max-width:99%;height:100%;max-height:300px;color: #3acbe3;margin: 0px 1% 0px 1%;font-size: 90%;background: #3d2141;background-image: linear-gradient(to bottom right, #3d2141, #3d2141, #3d2141);padding: 1% 1% 0 1% ;font-family: "consolas";border: 5px solid #3d2141; border-radius: 10px;cursor: default;} .text-code-long{width: 100%;height: 100%; min-height: 305px;outline: none;resize: none;display:block; vertical-align: middle;resize:none;max-width:94%;max-height:400px;color: #3acbe3;margin: 0px 1% 0px 1%;font-size: 90%;background: #3d2141;background-image: linear-gradient(to bottom right, #3d2141, #3d2141, #3d2141);padding: 1% 1% 0 1% ;font-family: "consolas";border: 5px solid #3d2141; border-radius: 10px;cursor: default;overflow-y: scroll; word-wrap: break-word;}

4. Dan letakkan di atas tag '</style>' atau '</b:skin>'

5. Ok, kita telah menyelesaikan fiturnya. Dan sekarang mulai penerapannya.

6. Buat artikel baru dengan klik tombol '+' pada halaman utama blogspot.

7. Pastikan kalian memilih menu 'compose' ya kawan.

8. Kemudian coba kalian tempelkan contoh 'script' kedalam postingan.

9. Selanjutnya kalian coba ubah tampilan 'compose' ke mode 'html'

10. Nah, jika sudah. Kalian akan melihat 'script' kalian tadi telah otomatis di parse.

11. Kemudian coba kalian buat tag 'div' yang kita gunakan sebagai boxnya.

12. Jangan lupa tag 'div' tadi kita berikan 'class' sesuai ukuran aja kawan, misalnya 'class=text-code-mini'.

13. Kalian bisa cek 'preview' terlebih dahulu, apabila berhasil tinggal 'publish' aja.

14. Dan selesai.

Jika kalian ingin video tutorialnya bisa klik thumbnail berikut ini ya: 

Untuk 'demo' kalian sudah melihat box 'css' diatas J. Apabila kalian masih bingung, kalian bisa memberikan komentar dibawah ini. Dan saya biasanya fastrespon.

Ok, itu adalah akhir cerita saya pada hari ini. Dan sebelum kalian meninggalkan artikel ini, saya ingin kalian untuk 'follow' akun sosial media saya serta jangan lupa klik 'like', 'subscribe' dan 'share' kawan.

Sekian dari saya dan terima kasih J.

---

Share :Wa FbTwLkTgTmPr Ln

Related Post: