Cara Membuat Syntax Highlighter Simple Di Blog

Cara Membuat Syntax Highlighter Simple Di Blog

Assalamualiakum kembali lagi bersama kami blog abal-abal yang untuk postingan ke - 8 ini akan membagikan tips tentang bagaimana cara membuat sebuah kotak highlight pada blog yang khusus menampung script-script HTML.

Syntax highlighter adalah kotak kode yang digunakan untuk sebagai tempat atau ruang khusus yang digunakan hanya untuk kode atau syntax seperti HTML, CSS, JQuery, dan script-script lainnya.

Bagi anda yang mempunyai blog tutorial atau tips dan template mungkin sudah tidak asing lagi dengan hal ini.

Namun, masih banyak yang memilih menggunakan Blockquote dari pada Syntax highlighter ini, mmungkin karena menggunakan kotak kode maka anda diharuskan untuk menggunakan scirpt pemanggilan khusus untuk dapat menampilkannya.

Dan Kali ini saya akan membagikan tutorialnya kepada anda, bagi yang berminat silahkan diikuti.

1. Masuk ke menu Blogger

2. Pilih Template

3. Pilih Edit HTML

4. Tambahkan Script CSS berikut ini Sebelum kode </b:skin>

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#212121;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-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;border-radius:3px}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{font-family: sans-serif;background-color:#fff;box-shadow:inset 0 0 0 1px #eee}

5. Simpan Template

Setelah anda melakukan langkah diatas, maka anda sudah bisa menggunakan Kotak Kode atau Syntax Highlighter, dengan syarat memasukkan kode pemanggil berikut ini disetiap syntax yang ingin anda kurung dengan kotak yang sudah anda tambahkan tadi.

baca : Tempat Download Template Blogger Terbaik

1. Untuk Script Html

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
Isi Disini
</code></pre>

2. Untuk Script CSS

<pre data-codetype="CSSku" title="CSS"><code class="language-css">
Isi Disini
</code></pre>

3. Untuk Script Java Script
<pre data-codetype="JavaScriptku" title="JQueryku"><code class="language-css">
Isi Disini
</code></pre>

Memang sedikit merepotkan, tapi demi kenyamanan pembaca dan demi peningkatan fitur template anda tentu ini bukan suatu masalah, bukan?. Untuk style dan gaya tampilannya sama seperti yang ada pada template saya ini.

Oke, sekian saja postingan singkat kali ini. Semoga bisa membantu.

Credit :
Images From : Arline Design

Comments

Post a Comment

Popular posts from this blog

Investasi Pada Reksa Dana Untuk Pemula

Image
Sebenarnya ada dua jenis investasi, yakni riil dan non riil (investasi keuangan). Untuk investasi keuangan sendiri ada berbagai macam, mulai dari deposito, reksa dana, obligasi, dan saham. Jika Anda tertarik pada investasi di sektor keuangan, anda bisa memilih instrumen yang sesuai dengan kebutuhan. Artinya pahami risikonya. Untuk Anda yang sama sekali belum pernah berinvestasi di instrumen tersebut, jangan takut dan mengurungkan niat hanya jika tidak tahu caranya. Untuk pemula anda bisa mencoba investasi pada reksa dana, karena dianggap sebagai investasi yang paling mudah dijangkau dan dilakukan oleh para investor pemula. Lalu apa saja yang harus anda lakukan saat ingin berinvestasi di reksa dana bagi Anda yang pemula tanpa rasa khawatir dengan modal yang juga terjangkau? Dan diabawah ini adalah tips berinvestasi di reksa dana yang aman: 1. Kenali Apa Itu Reksa Dana Banyak orang yang tidak mengetahui adanya reksa dana sebagai investasi mudah yang bisa dijalankan ole...
Read more

Cara Melihat Orang Yang sudah Membaca Pesan Di Gruop Whatsapp

Image
Oke selamat pagi para sahabat oprek semua, kembali lagi di website sumber tips and trick ini. Dan kali ini admin akan membagikan tips bagaimana cara melihat siapa saja yang sudah membaca pesan kalian pad group whatsaap. Whatsapp Langsung saja ke inti pembahasan agar kalian tidak bosan dengan pengulangan kata yang sering dilakukan oleh banyak blog hamba adsense di luar sana. Pesan di group whatsaap sudah dilihat semua belum ya ? Ini caranya 1. Pastikan di android atau iOs kalian sudah terinstall aplikasi Whatsaap massagger, jika belum silahakan download di playstore . 2. Pastikan jika anda sudah tergabung ke salah satu group whatsaap, karena kalau kalian belum punya tips ini tak ada gunanya, ya kan? 3. Buka aplikasinya, lalu tap beberapa detik pada pesan yang sudah kalian kirim sebelumnya, maka akan ada warna biru transparan yang akan menyelimuti pesan anda 4. Setelah itu tap pada tiga titk sejajar yang ada di sudut kanan atas 5. Biasanya akan muncul kotak dialog kecil yang memberikan p...
Read more

Pengalaman Diterima Adsense Full Approve

Image
Di dunia blogger sudah sangat terkenal sekali bahwa untuk menjadi publisher adsense  itu susahnya minta ampun. Sudah berbagai cara dicoba oleh banyak blogger dan hanya sedikit yang diterima. Dan kali ini, disini saya akan menceritakan pengalaman saya ketika pertama kali di terima adsense. 1. Kesan dan Perjuangan Saya ngeblog sudah hampir satu tahun mungkin, dan sudah membuat 3 blog serius yang dua sudah collaps dan yang satu masih bertahan. Bung Kamis Carimata Totumuh Diatasa adalah nama-nama blog yang sudah saya buat. Awalnya mau ngeblog dengan serius pakai bungkamis , semua sudah saya lakukan dari membangun pembaca di facebook, membuat laman facebook, promosi sana-sini untuk mendapatakan viewers. Lalu ketika saya rasa sudah mantap untuk mendaftar ke adsense, saat itu juga saya langsung daftarkan dan setelah beberapa hari peninjauan hasilnya adalah tidak diterima. Namun saya tidak menyerah dan mengulanginya lagi, tapi tetap saja tidak diterima. Se...
Read more