Kotak Kode HTML atau CSS – Halo sobat blogger dimana pun kalian berada. Masih semangat nge-Blognya? atau jangan jangan sudah loyo dan mulai putus asa karena ga berhasil menarik visitor? Baiklah! Kalau kemarin dalam tips blogging kita membahas mengenai Tips Jitu Agar Lolos Diterima Adsense, kali ini seperti judul yang sudah kita lihat bersama. Kita akan membahas mengenai cara membuat kotak kode HTML atau CSS pada postingan.
Mungkin diantara kita sering melihat kotak kode script berwarna hitam yang berfungsi sebagai tempat untuk meletakkan kode script agar terlihat lebih rapi dan profesional. Meski bukan keharusan, namun banyak yang berminat dengan tampilan pembungkus kode seperti yang akan kita sampaikan berikut ini. Ohiya! Kebetulan script ini sudah saya uji dan berhasil 100%. Hanya saja, script ini tidak saya terapkan di blog watpedia ini. Yah tau sendiri, kalau saya suka gonta ganti template.
Okelah, langsung saja ikuti tutorial dibawah ini
Membuat Kotak Kode HTML atau CSS Pada Postingan
1. Copy kode script dibawah ini
/* 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:#443e50;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:#fff;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:#fff;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',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#0066ff;box-shadow:inset 0 0 0 1px #eee;} 2. Tempelkan Kode Script
Buka dashboard blogger dan masuk ke menu Tema, lalu pilih Edit HTML. Cari kode ]]></b:skin> , lalu tempelkan kode script yang sudah kita copy diatas, tepat diatas kode ]]></b:skin> . Setelah selesai, simpan atau save template.
3. Memanggil Kotak CSS
Langkah berikutnya adalah mempraktekkan atau memanggil kode CSS yang sudah kita pasang di template agar bisa muncul di post atau halaman blog kita.
- Buat post/halaman baru
- Pilih mode HTML (bukan Compose)
- Tempel kode dibawah ini untuk menampilkan kotak kode script
<pre data-codetype="CSSku" title="CSS"><code class="language-markup"> Isi kode anda di sini......</code></pre>Keterangan :
Tulisan CSS = Bisa diganti dengan kata HTML,CSS, JavaScript atau jQuery
Tulisan Isi kode anda disini… = Silahkan sobat ganti dengan kode script yang ingin sobat masukan kedalam box atau kotak kode. Namun jangan lupa, sebelum memasukkan kode sobat kedalam box atau kotak kode script, parse terlebih dahulu kode yang sobat miliki. Gunakan Parse Tools Watpedia Disini .
4. Selesai.
Setelah selesai memparse kode sobat dan memasukkannya kedalam box atau kotak kode script. Kamu bisa mengubah kembali dari mode HTML menjadi mode Compose untuk melanjutkan tulisan artikel sobat.
Membuat Kotak Kode HTML atau CSS Pada Postingan
Gimana? Mudah bukan? Itu saja pembahasan kita kali ini terkait cara membuat kotak kode HTML dan CSS. Semoga bermanfaat. Dan jangan lupa, terus update informasi dan wawasanmu hanya di watpedia. Assalamu’alaikum.