Code Box Auto Copy To Clipboard Premium Responsive

---

Kotak Penampil Kode Auto Copy To Clipboard Premium Responsive merupakan kotak (box) untuk menampilkan kode-kode script, kode HTML, kode CSS ataupun kode lainnya pada halaman artikel blog. Kotak penampil kode yang saya bahas kali ini sudah dilengkapi dengan script auto copy to clipboard jadi pada kotak penampil tersebut sudah dipasang tombol dan kotak untuk mempermudah menyalin teks yang berada di box tersebut. Teks yang disalin langsung di copy di clipboard dalam sekali klik baik pada tombol maupun pada kotak penampil kode.

Kotak penampil kode merupakan salah satu elemen penting sebagai lokasi untuk menunjukan kode - kode yang hendak ditunjukan kepada pengunjung blog atau pembaca artikel di blog anda. Agar pengunjung nyaman dan memahami kode - kode yang dibagikan tersebut hendaknya kotak penampil kode dibuat menarik dan juga mempermudah pengunjung blog menyalin kode - kode tersebut dengan mudah.

Kotak penampil kode banyak digunakan oleh para penulis blogger sebagai kotak penampil kode - kode yang berhubungan dengan tulisan artikel bertema tutorial, tips dan trik dan cara penggunaan kode pemrograman atau script seputar teknologi web. Kotak penampil kode umumnya menggunakan tag HTML seperti pre, code dan qoutation sedangkan untuk versi Javascript dan JQuery ready menggunakan Syntax Highlighter. Berikut beberapa Code Box Syntax Highlighter populer yang banyak digunakan oleh para blogger, seperti :

1. SyntaxHighlighter
2. Prism
3. Highlight.js
4. Rainbow
5. SHJS
6. Google Code Prettify

Code Box Syntax Highlighter tersebut memerlukan beberapa file untuk ditaruh pada server domain atau bisa juga langsung dipasang menggunakan cloud server dan mengkonfigurasi beberapa parameter yang sesuai dengan settingan yang Anda perlukan pada situs/blog Anda. Selanjutnya menyesuaikan konten artikel berdasarkan parameter yang telah ditetapkan oleh code box syntax highlighter tersebut.

Pada artikel ini penulis tidak akan membahas code box syntax higlighter diatas yang telah disebutkan akan tetapi hanya ingin membahas dan membagikan code box (penampil kode) ala CodeFlare Blogspot yang mana sudah dilengkapi dengan Syntax Highlighter dan Auto Copy To Clipboard. Code box ala CodeFlare Blogspot menggunakan desain yang simple dengan sentuhan warna yang terlihat nyaman di mata. Pemasangan dan penggunaan Code box ala CodeFlare Blogspot ini cukup mudah hanya perlu copy-paste beberapa baris kode dan sudah bisa langsung diterapkan. Buat yang berminat, silakan disimak cara pemasangannya.

Informasi Singkat

---

Apa Itu Kotak Penampil Kode Syntax Highlighter
Kotak penampil kode yang dilengkapi dengan penyorotan sintaksis adalah fitur editor teks yang digunakan untuk bahasa pemrograman, skrip, atau markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memfasilitasi penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup karena struktur dan kesalahan sintaks secara visual berbeda. Menyoroti tidak memengaruhi makna teks itu sendiri; ini dimaksudkan hanya untuk pembaca manusia.

Penyorotan sintaksis adalah suatu bentuk notasi sekunder, karena penyorotan bukan bagian dari makna teks, tetapi berfungsi untuk memperkuatnya. Beberapa editor juga mengintegrasikan penyorotan sintaks dengan fitur-fitur lain, seperti pemeriksa ejaan atau pelipatan kode, sebagai alat bantu penyuntingan yang merupakan bagian luar bahasa.

Manfaat Praktis
Penyorotan sintaksis adalah salah satu strategi untuk meningkatkan keterbacaan dan konteks teks; terutama untuk kode yang membentang beberapa halaman. Pembaca dapat dengan mudah mengabaikan bagian besar komentar atau kode, tergantung pada apa yang mereka cari. Penyorotan sintaksis juga membantu programmer menemukan kesalahan dalam program mereka. Misalnya, sebagian besar editor menyoroti string literal dalam warna yang berbeda. Akibatnya, menemukan pembatas yang hilang jauh lebih mudah karena warna teks yang kontras. Pencocokan penjepit adalah fitur penting lainnya dengan banyak editor populer. Ini membuatnya mudah untuk melihat apakah brace telah ditinggalkan atau menemukan kecocokan brace tempat kursor aktif dengan menyorot pasangan dalam warna yang berbeda.

Sebuah studi yang diterbitkan dalam konferensi PPIG mengevaluasi efek dari penyorotan sintaks pada pemahaman program pendek, menemukan bahwa keberadaan penyorotan sintaks secara signifikan mengurangi waktu yang dibutuhkan oleh seorang programmer untuk menginternalisasi semantik dari suatu program. Selain itu, data yang dikumpulkan dari pelacak mata selama penelitian menunjukkan bahwa penyorotan sintaks memungkinkan programmer untuk kurang memperhatikan komponen sintaksis standar seperti kata kunci.

---

Sumber : Wikipedia

Cara Pemasangan

Penggunaan kotak penampil kode (Code Box) pada blogger akan menambah daya tarik tersendiri untuk pengunjung blog dan membuat blog tersebut terlihat profesional dan serius dalam pengelolaan blog. Penggunaan Code Box biasnya dilengkapi dengan Javascript Syntax Highlighter, namun ada juga sebagian blogger yang hanya menggunakan code box tag HTML standar.

Kotak penampil kode yang dilengkapi dengan fitur Syntax Highlighter membutuhkan snippet script tambahan sehingga akan mempermudah developer situs/pemilik blog untuk mempercantik dalam menampilkan barisan kode-kode yang ditampilkan pada kotak penampil kode.

PERINGATAN

Peringatan ! Sebelum memasang Code box ala CodeFlare Blogspot sebaiknya melakukan proses Backup kode Template yang Anda gunakan untuk menghindari hal-hal yang tidak diinginkan.

Berikut cara pemasangan Code box ala CodeFlare Blogspot :

• Seperti biasa silakan Anda login terlebih dahulu ke akun Blogger.
• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  
  
  
  
  
  
  
  
  
  
• Bisa juga dipasang pada kode template HTML dengan cara menaruh semua kode diatas kode HTML </Body>.
• Silakan copy-paste kode di bawah ini.
  Apabila pada kode template blogger belum dipasang JQuery maka silakan copy-paste kode dibawah ini dan taruh kode tersebut tepat diatas kode </Head> pada kode HTML template blogger.
  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  
  Berikut adalah kode font style untuk gambar icon yang menggunakan tipe font Awesome versi 4.7.0, silakan dicek kembali apakah sudah terpasang atau belum pada kode template Anda, apabila belum terpasang silakan di copy-paste kode dibawah ini dan taruh kode tersebut setelah kode diatas.
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  
  Selanjutnya pemasangan kode utama, sama seperti diatas tinggal copy-paste kode dibawah ini dan taruh kode tersebut setelah kode diatas.
  <link rel="stylesheet" href="https://drive.google.com/uc?export=download&id=1HmcQNuuxSqsc53Wb0wfaD6rk5ShPDfSo"/>
• Setelah semua kode yang dibutuhkan terpasang maka langkah selanjutnya adalah memasang kode konfigurasi, pada mode Edit HTML template blogger, silakan Anda scroll ke bagian paling bawah kemudian taruh semua kode yang ada di bawah ini dan taruh semua kode tersebut tepat diatas kode HTML </Body>.
  <script src="https://drive.google.com/uc?export=download&id=1jmM1kxytqh2QCwVJzY8j8r9TH9WK9zvd"></script>
• Baiklah apabila semua kode di atas sudah dipasang maka selanjutnya adalah klik tombol Save.

Cara Penggunaan

Cara penggunaan cukup mudah tinggal menggunakan elemen div sesuai dengan parameter yang tersedia yang sudah penulis modifikasi untuk mempermudah menggunakan Code box ala CodeFlare Blogspot ini.

Berikut cara penggunaan Code box ala CodeFlare Blogspot :

• Penggunaan untuk style kode HTML
  <div class="containerForm" data-codetype="HTML">
  Taruh kode HTML yang sudah di parsing disini..
  </div>
  
  Contoh :
  <div class="containerForm" data-codetype="HTML">
  &lt;div id='contoh' class='contoh' style='color:black;'&gt;
  Contoh kode HTML yang sudah diparsing
  &lt;/div&gt;
  </div>
  
  Hasil :
  
  <div id='contoh' class='contoh' style='color:black;'>
  Contoh kode HTML yang sudah diparsing
  </div>
  


• Penggunaan untuk style kode CSS
  <div class="containerForm" data-codetype="CSS">
  Taruh kode CSS yang sudah di parsing disini..
  </div>
  
  Contoh :
  <div class="containerForm" data-codetype="CSS">
  &lt;style type='text/css'&gt;
  Contoh kode CSS yang sudah diparsing
  &lt;/style&gt;
  </div>
  
  Hasil :
  
  <style type='text/css'>
  Contoh kode CSS yang sudah diparsing
  </style>
  


• Penggunaan untuk style kode JavaScript
  <div class="containerForm" data-codetype="JS">
  Taruh kode JavaScript atau Script yang sudah di parsing disini..
  </div>
  
  Contoh :
  <div class="containerForm" data-codetype="JS">
  &lt;script&gt;
  Contoh kode JavaScript atau Script yang sudah diparsing
  &lt;/script&gt;
  </div>
  
  Hasil :
  
  <script>
  Contoh kode JavaScript atau Script yang sudah diparsing
  </script>
  

Webtools parsing kode HTML, CSS, JavaScript dan lainnya bisa dilihat pada artikel Alat Parse Kode HTML Blogger Premium Responsif. Penggunaan webtools parsing kode cukup mudah tinggal taruh kode yang ingin di parsing kemudian tekan tombol Parse, setelah kode selesai di parsing maka tinggal copy-paste kode yang telah di parsing tersebut ke dalam code box seperti contoh di atas.

Demikian sekiranya informasi yang dapat penulis berikan, apabila ada kata-kata yang kurang berkenan dan informasi yang kurang lengkap, penulis mohon maaf dan harap dimaklumi. Jangan lupa untuk melihat artikel lainnya yang berkaitan dengan pembahasan artikel ini karena bisa jadi ada tips dan trik yang mungkin tidak tertulis pada artikel ini namun tertulis di artikel lainnya yang masih berkaitan. Semoga bermanfaat.

Keyword

CodeBox, SyntaxHighlighter, Penampil, Kotak, Kode, HTML, CSS, JavaScript, JQuery, Node.JS, Simple, Elegant, Responsive, Unique, Cool, AutoCopy, Copy to Clipboard, One Click, Click to copy, blog, blogger, blogspot

Incoming Search Term

Code Box Auto Copy To Clipboard, Cara Membuat auto copy to clipboard, code box syntax highlighter, kustom kotak penampil kode, Autocopy syntax highlighter, code box for bloggers, custom code box blogspot, kode script warna warni, script berwarna, tulisan kode blog berwarna, javascript berwarna, menulis blog dengan warna script.