Cara Memasang Syntax Highlighter Blogger Ala Mbak Igniel

  • Bagikan


Syntax Highlighter adalah text editor yang digunakan sebagai tempat penulisan kode pada postingan artikel blog / website. Biasanya tampilan ini kita temui dibeberapa situs seperti wordpress atau blogger dengan niche tutorial yang didalamnya memuat kode-kode seperti CSS, HTML, PHP, Javascript (js), dll. Apakah syntax highlighter bisa dibuat diblog gratisan seperti blogspot?? Tentu bisa donkkk, sekalipun masih belum beli domain TLD, sama seperti blog saya ini, masih blogspot.

Cara Memasang Syntax Highlighter di Blogger

Sebelum memasang di blog sobat, kenali dulu alasan kenapa kita perlu menerapkan Syntax Highlighter diblog. Adapun alasan sekaligus kelebihan pemakaian Syntax Highlighter di blog yaitu:

  1. Merapikan tampilan huruf yang digunakan untuk menulis kode
  2. Huruf bisa dibuat berwarna warni
  3. Memudahkan pengunjung mengenali dan menemukan antara penjelasan artikel dan source code yang kita tulis dalam postingan blog
  4. Dapat menarik minat pengunjung blog karena tampilan artikel yang rapi
  5. Tidak merepotkan pengunjung untuk melakukan copy paste kode yang sudah dishare
  6. Masih banyak lagi

Cara Memasang Syntax Highlighter di Blogger

Jika blog teman-teman sering membagikan kode, alangkah lebih baik jika memasang Syntax Highlighter dengan CSS. Untuk mempermudah dalam pemasangan, silahkan ikuti langkah-langkah berikut.

1. Pertama-tama buka tema blog teman-teman.

2. Jika sebelumnya teman-teman pernah memasang kode CSS .post-body pre dan .post-body pre code silahkan dihapus dulu agar tidak bentrok dengan yang sudah ada.

3. Copy kode berikut kemudian sisipkan “Sebelum atau di Atas” tulisan </head>.

.post-body pre 
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none

.post-body pre code 
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text

4. Jangan lupa kode di atas disisipkan diantara <style></style>. Bila yakin sudah selesai melakukan langkah-langkah diatas, akhiri dengan dengan klik Save untuk menerapkan di blog sobat, lalu tutup tema blog.

Cara Menerapkan Syntax Highlighter di Blogger

1. Silahkan buka dashboard blog teman-teman, lalu klik Postingan baru untuk menuliskan artikel yang hendak disisipkan source code.

2. Lalu panggil syntax highlighter dalam postingan teman-teman dengan menggunakan <pre> dan <code>, berikut contoh penulisannya:

<pre><code>
   <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

3. Selesai.

Informasi Penting: Sebelum memasukkan kode CSS, HTML atau Javascript wajib diparse lebih dulu di Blogcrowdsagar tidak menghacurkan tampilan template.

Bagaimana teman-teman, mudahkan? Dengan pemasangan Syntax Highlighter di blog maka postingan teman-teman yang dipublish akan kelihatan rapi dan menarik. Semoga teman-teman yang mencari tutorial ini bisa terbantu. Semoga bermanfaat. Sekian dan terimakasih.

Sumber: igniel.com



Source link

  • Bagikan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.