Membuat Kotak Aba-Aba Html Atau Css Pada Postingan

Membuat Kotak Kode HTML

Kotak Kode HTML atau CSS - Halo sahabat blogger dimana pun kalian berada. Masih semangat nge-Blognya? atau jangan jangan sudah loyo dan mulai frustasi alasannya yaitu ga berhasil menarik visitor? Baiklah! Kalau kemarin dalam tips blogging kita membahas mengenai Tips Jitu Agar Lolos Diterima Adsense, kali ini menyerupai judul yang sudah kita lihat bersama. Kita akan membahas mengenai cara menciptakan kotak aba-aba HTML atau CSS pada postingan.

Mungkin diantara kita sering melihat kotak aba-aba script berwarna hitam yang berfungsi sebagai daerah untuk meletakkan aba-aba script supaya terlihat lebih rapi dan profesional. Meski bukan keharusan, namun banyak yang berminat dengan tampilan pembungkus aba-aba menyerupai yang akan kita sampaikan berikut ini. Ohiya! Kebetulan script ini sudah aku uji dan berhasil 100%. Hanya saja, script ini tidak aku terapkan di blog Infoterlengkap.com ini. Yah tau sendiri, jikalau aku suka gonta ganti template.

Okelah, pribadi saja ikuti tutorial dibawah ini

Membuat Kotak Kode HTML atau CSS Pada Postingan

1. Copy aba-aba 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 hidangan Tema, kemudian pilih Edit HTML. Cari kode ]]></b:skin> , kemudian tempelkan aba-aba script yang sudah kita copy diatas, sempurna diatas kode ]]></b:skin> . Setelah selesai, simpan atau save template.

3. Memanggil Kotak CSS

Langkah berikutnya yaitu mempraktekkan atau memanggil aba-aba CSS yang sudah kita pasang di template supaya dapat muncul di post atau halaman blog kita.

Buat post/halaman baru
Pilih mode HTML (bukan Compose)
Tempel aba-aba dibawah ini untuk menampilkan kotak aba-aba script

 <pre data-codetype="CSSku" title="Membuat Kotak Kode HTML atau CSS Pada Postingan"><code class="language-markup"> Isi aba-aba anda di sini......</code></pre>

Keterangan :

Tulisan CSS = Bisa diganti dengan kata HTML,CSS, JavaScript atau jQuery

Tulisan Isi aba-aba anda disini... = Silahkan sahabat ganti dengan aba-aba script yang ingin sahabat masukan kedalam box atau kotak kode. Namun jangan lupa, sebelum memasukkan aba-aba sahabat kedalam box atau kotak aba-aba script, parse terlebih dahulu kode yang sahabat miliki. Gunakan Parse Tools Watpedia Disini .

4. Selesai.

Setelah akibat memparse aba-aba sahabat dan memasukkannya kedalam box atau kotak aba-aba script. Kamu dapat mengubah kembali dari mode HTML menjadi mode Compose untuk melanjutkan goresan pena artikel sobat.

Membuat Kotak Kode HTML atau CSS Pada Postingan

Gimana? Praktis bukan? Itu saja pembahasan kita kali ini terkait cara menciptakan kotak aba-aba HTML dan CSS. Semoga bermanfaat. Dan jangan lupa, terus update warta dan wawasanmu hanya di Infoterlengkap.com. Assalamu'alaikum.

Membuat Kotak Kode HTML atau CSS Pada Postingan

Infoterlengkap.com

16 Maret 2019

Sabtu