Cara Membuat Kotak Kode HTML atau CSS Pada Postingan

0

 




Cara Membuat Kotak Kode HTML atau CSS Pada Postingan

Halo Sahabat Blogger dimanapun kalian berada. masih semangatkan ngeblognya ?

Jangan putus asa ya...! Semangat terus untuk menarik visitor. Kali ini mimin akan membahas bagaimana cara Membuat Kotak Kode HTML atau CSS Pada Postingan.

Mungkin di antara kita sering melihat kotak kode script berwarna hitam atau yang lainnya yang berfungsi sebagai tempat untuk meletakkan kode script agar terlihat rapi bahkan keren dan profesional. Meski bukan wajib yang harus di lakukan.

Namun banyak yang berminat ingin sekali tampilan postingan pembungkus kode seperti yang akan kita bahas.

kebetulan sekali script ini sudah saya coba dan berhasil 100% loh. Asal tidak pernah gonta ganti templatenya.

Oke lansung saja tutorialnya ada di bawah ini.


Caranya :

1. Copy code script di bawah 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:"";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 0px #eee;}

2. Lalu tempelkan code script tersebut yang sudah di copy tepat di atas ]]></b:skin>

Sebelumnya login dulu ke blogger.com dan masuk ke TEMA. Terus pilih EDIT HTML.
Kemudian kamu tinggal cari ]]></b:skin> lalu tempelkan code script tadi yang sudah di copy tepat di atas ]]></b:skin> atau sebelumnya, kemudian tinggal simpan atau save template.

Keterangan :
Jika kesulitan mencari ]]></b:skin> untuk mencarinya bisa dengan manual scrool ke bawah atau dengan cara CTRL+F lalu paste ]]></b:skin> di kolom search atau pencarian lalu enter.

3. Lalu cara memanggil atau memunculkan kotak code HTML atau CSS pada postingan blog

Kemudian langkah selanjutnya buat postingan baru atau halaman baru. Lalu pilih HTML atau tampilan HTML dan Tempel code script di bawah ini setelah sudah di tempel bisa di preview dulu atau di lihat pratinjau.

<pre data-codetype="CSSku" title="CSS"><code class="language-markup"> Isi dengan code tulisanmu disini.... </code></pre>


Keterangan :

  • Untuk mengganti tulisan CSS pada kotak kode HTML kamu tinggal cari tulisan CSS berwarna BIRU pada script di atas lalu tinggal ganti tulisan sesuka kamu.
  • Untuk mengganti warna background pada kotak kode HTML pada tulisan CSS kamu tinggal cari tulisan #0066ff berwarna HIJAU pada script di atas lalu tinggal ganti warna sesuka kamu.
  • Untuk mengganti warna background pada kotak kode HTML pada isi kode kamu tinggal cari tulisan #443e50 berwarna KUNING pada script di atas lalu tinggal ganti warna sesuka kamu.
4. SELESAI
Tags:
إرسال تعليق (0)
أحدث أقدم