Cara Membuat Text Box atau Kotak Script Git di Blog - Techo
Skip to content Skip to sidebar Skip to footer
Home / Blogger / Tutorial

Cara Membuat Text Box atau Kotak Script Git di Blog


Cara Membuat Kotak Script atau Text Box di Dalam Postingan Blog - Text box atau biasa disebut dengan kotak script adalah kolom khusus yang banyak digunakan oleh para blogger untuk menempatkan kode script pada halaman postingan artikel blog seperti kode html, css, php, javascript dan berbagai kode lainnya.
 
Dengan membuat text box, kita dapat mempermudah pengunjung untuk membaca halaman artikel dengan mengatur kotak script sebagai penempatan kode agar terlihat lebih rapi. Selain itu, pengunjung juga dapat membedakan antara kode script dan tulisan artikel. 
 
Sudah pasti banyak pengunjung yang menyukai halaman artikel blog yang rapi dan mudah dibaca, sehingga pengunjung merasa nyaman saat membaca dan betah berlama-lama di halaman artikel di website tersebut. Untuk membuat kotak script, kita hanya perlu menambahkan kode script pada halaman statis di editor konten dengan memilih mode html.

Pada postingan kali ini, saya akan share bagaimana cara membuat kotak script di dalam postingan blog terbaru. Membuat kotak script di dalam postingan blog dengan mudah dan keren, silahkan simak tutorial langkah-langkah berikut ini dengan benar agar text box area dapat dibuat di dalam postingan blog Anda.

Baca juga : Cara Membuat Web dan Hosting Gratis di Github 
 

Cara Membuat Kotak Script atau Text Box Dalam Postingan Blog


Berikut ini Cara Membuat Kotak Script atau Text Box Dalam Postingan Blog :
  • Pertama Login ke "Blogger" > Pada "Dashboard" > Pilih menu "Postingan"
  • Buat Postingan baru dan isi judul "Postingan" atau sesuai keinginan. 
  • Pada Postingan di editor konten, pilih mode HTML, letakkan kode berikut :
  • Dari kode diatas maka hasil tampilan script box atau text box seperti di bawah ini :

Masukin Kode Script disini

  • Setelah itu klik "Publikasikan" 

Script text box di atas hanyalah sebuah contoh. Anda dapat memilih kotak script sesuka Anda di bawah ini.


Script Membuat Text Box atau Kotak Script di Postingan Blog 


Ada berbagai macam model bentuk text box atau kotak script yang bisa Anda pilih. Berikut Script Membuat Text Box atau Kotak Script di Postingan Blog dan Contohnya :

Script 1 

<div style="-moz-border-radius: 11px; -webkit-border-radius: 11px; background-color: #87F3F5; border-radius: 11px; border: 4px outset #fff; padding: 11px; t-align: left;">Masukin Kode Script disini</div>
 
Script 2

<div style="-moz-border-radius: 11px; -webkit-border-radius: 10px; background-color: #EDEBEB; border-left: 7px solid #2F00FF; border-radius: 11px; padding: 11px; t-align: left;">Masukin Kode Script disini</div>
 
Script 3

<div style="-moz-border-box: 11px; -moz-border-box: 11px; -webkit-border-box: 11px; background-color: ghostwhite; border-top: 8px solid black; overflow: auto; padding: 11px; t-align: left; t-color: #BEF4F4;">Masukin Kode Script disini</div>
 
Script 4

<div style="-moz-border-radius: 11px; -webkit-border-radius: 11px; background-color: #D9E4E4; border-radius: 11px; border: 5px solid #999; padding: 11px; t-align: left;">Masukin Kode Script disini</div>
 
Beberapa model kotak script di atas bisa kamu gunakan untuk menempatkan kode atau tulisan tertentu. Selain itu saya juga akan share bagaimana cara menempelkan kode git di blogger post dengan template dynamic view.
 
Sebelum membuat text box atau kotak script git di blog, Anda harus memiliki akun github terlebih dahulu. Karena disini saya akan mencoba menggunakan embedded script yang sudah tersedia di Gist pada github.
 
 

Cara Menempelkan kode Gist di Dalam Postingan Blog


Gist adalah salah satu fitur yang sudah disediakan oleh Github. Fungsi dasarnya hampir sama dengan pastebin, yaitu kita bisa menempelkan teks di sana, dan membaginya dengan orang lain.
 
Saya sendiri lebih suka menggunakan git karena lebih fleksibel dan kita juga bisa menempelkan teks disana dengan berbagai kode dari bahasa pemrograman yang digunakan.
 
Pertama-tama, sebelum membuat text box atau kotak script model git, Anda harus mengetahui Gist id dari kode script yang akan kita gunakan dan paste di postingan blog. Misalnya saya ingin menempelkan kode git yang terletak di :

https://gist.github.com/Samuelpasaribu/52ae175b8877e8503c47689f4d2b57d7
 
Script di atas merupakan script "Hello World" yang ditulis dengan bahasa pemrograman "PHP". Dan Gist ID yang digunakan dari script "PHP Hello World" di atas menurut "URL" adalah : 
 
52ae175b8877e8503c47689f4d2b57d7
 
Setelah itu saya mengubah tulisan di postingan blog dengan mode HTML dan bukan mode compose lalu saya menambahkan kode berikut :


Kemudia saya mengganti "GistID" dengan kode gist ID yang akan saya tempelkan di postingan blog, setelah itu di bagian bawah pada postingan saya juga menambahkan kode berikut :
 

Dari penjelasan di atas dengan Cara Menempelkan Kode Gist di Dalam Postingan Blog, maka hasil tampilan Text Box atau Kotak Script menjadi seperti berikut : 


Dari semua hasil tampilan Text Box atau Kotak Script di atas saya lebih memilih dengan Cara Membuat Text Box atau Kotak Script melalui Gist pada github. Belum selesai sampai disini sekarang saya akan mempraktekkan Cara Membuat Text Box atau Kotak Script Git di Blog dengan mudah.

Baca juga : Cara Membuat Linktree Gratis untuk Semua Akun  

Cara Membuat Text Box atau Kotak Script Git di Blog


Berikut ini Cara Membuat Text Box atau Kotak Script Git di Blog :
  • Pertama Login ke "Github" > https://github.com > Setelah berhasil login > Ketikkan di url browser "https://gist.github.com" > lalu enter.
  • Pada kolom Filename including extension, isikan dengan nama, misal: "index.html" atau sesuai keinginan.
  • Lalu di kolom "Kotak Script" masukkan kode script yang ingin Anda buat.
  • Setelah itu klik "Create secret gist"
  • Setelah itu salin kode script di sebelah tulisan "Embed". Contohnya seperti gambar dibawah ini.


  • Pada Postingan di editor konten, pilih mode HTML, dan tempelkan kode script yang kita salin tadi.
  • Kemudian tambahkan kode berikut dan letakkan tepat di bawahnya.
  • Lalu ganti tulisan "GistID" dengan gist ID script Anda tadi yang akan ditempelkan di postingan blog.
  • Setelah itu klik "Publikasikan"
  • Selesai...
 
Berikut ini adalah hasil tampilan Text Box atau Kotak Script Git di Blog : 
 

Kesimpulan


Untuk membuat text box atau script box caranya cukup mudah dan mungkin sudah banyak tutorial yang membahasnya di google untuk membuat script box pada postingan blog. Namun yang perlu anda ketahui adalah rekomendasi kami untuk menampilkan text box atau script box, sebaiknya menggunakan model text box atau kotak script Git pada blog agar menampilkan kode yang lebih relevan karena Git memiliki banyak manfaat, diantaranya coding.
 

Penutup


Demikian artikel kali ini tentang Cara Membuat Text Box atau Kotak Script Git di Blog. Beberapa contoh script di atas bisa Anda terapkan untuk meletakkan kode atau tulisan tertentu. Seperti yang anda lihat pada postingan kali ini, mudah bukan, selamat mencoba dan terima kasih sudah berkunjung.