Cara Mudah Membuat Kotak Kode Script HTML atau CSS Pada Postingan Blog - Marzep Design

Cara Mudah Membuat Kotak Kode Script HTML atau CSS Pada Postingan Blog

Cara Mudah Membuat Kotak Kode Script HTML atau CSS Dalam Postingan Blog  - Sebuah Kotak yang berisi kode html atau css di sebuah postingan, biasanya kita temukan saat akan memodikasi template, didalam potingan tersebut berisi tutorial yang mencamtumkan sebuah kode script html atau css yang nantinya akan kita gunakan untuk memodipikasi template blog. Dengan adanya kotak script html atau css pasti sangan memudahkan sobat untuk mengcopy Kode nya saja.

Selain untuk memudahkan pengunjung mengcopy kotak script html atau css tersebut, juga berfungsi agar postingan lebih rapih nyaman dilihat oleh penggunjung, dan tau kah sobat cara membuat kotak script html atau css dalam postingan itu sangat mudah sekali. Nah sekarang admin akan sharekan cara membuat kotak script html pada postingan blog.

Tampa basa-basi ayo kitu mulai toturial cara membuat kotak script dalam postinagn blog, berikut langkah-langkahnya:


Cara membuat Kotak Script HTML atau CSS Dalam Postingan blogger

Cara Membuat Kotak Script HTML atau CSS Dalam Postingan

1. Masuk terlebih dahulu ke dasbor blog milik sobat

2. Pilih TEMA atau TEMPLATE, kemudian Klik edit HTML

4. Cari kode ]]</b:skin> gunakan CTRL+F untuk mempermudah pencarian kodenya

5. Jiak sedah ketemu copas kode berikut dan letakan temat diatas 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:#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:#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',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:#fff;box-shadow:inset 0 0 0 1px #eee;}
 
6. Kemudian Simpan template.

Setelah selesai menyisipkan kode di atas kita perlu memanggil kode tersebut agar tampil dalam postingan. letakan kode di bawah ini di postingan baru atau pilih mana postingan yang ingin sobat tambahkan kotak script ke dalam postingan, letakan di postingan bagaian HTML bukan Compose, dan pastikan dimana letak yang sobat inginkan.


<pre data-codetype="CSS" title="CSS">
<code class="language-markup"> Letakan Kode scriptnya disini</code>
</pre>

Note
kata CSS boleh diganti dengan HTML, CSS atau Javascript terserah sobat inginkan, dan yang paling penting ganti tulisan letakan Kode scriptnya disini dengan kode script HTML atau CSS yang ingin di tampilkan di postingan.


Itulah toturial Cara Membuat Kotak Kode Script HTML atau CSS Dalam Postingan Blog, benar benar mudah bukan cara nya, konjungi lagi blog marzep.com untuk menemukan solusi blog beserta infomasi seputar blog terupdate dan download template blogger gratis di blog kami, dimikan seboga bermanfaat. Happy blogging.

0 Response to "Cara Mudah Membuat Kotak Kode Script HTML atau CSS Pada Postingan Blog"

Post a Comment

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel