Cara Membuat Postingan Kotak HTML Atau CCS Blogger

Hai sobat blogger, apa mungkin ada yang belom tau mengenai share Html, JQueryku atau Ccs. Mungkin itu sudah sering dibahas sobat blogger yang lainya, Namun kali ini saya akan bahas bagaimana caranya dan edit agar kotak yang kita share atau kita posting nanti terlihat lebih keren. Langsung aja yuh

kita lihat contoh dulu ya

dalam gambar di atas ternyata banyak yang menggunakan, maka dari itu kita cukup edit dari pada kotak yang akan kita buat nanti. Untuk membuat kotak tersebut sangat gampang banget kok hehe. Begini nih cara nya

1. Buka Akun Blogger Kalian
2. Masuk dashbor dan Edit Tema
3. Kemudian bisa kalian Copy CCS berikut dan tempel diatas ]]></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;}

4. Selesai kemudian Simpan 

Nah jika sudah sekarang bagaimana cara memanggil code diatas,

1. Seperti biasa kalian jika akan buat postingan baru 
2. Klik New Post - klik HTML, dan Copy-Paste code beikut

<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Taruh Kode kalian disini</code></pre>



silahkan monggo dicoba, semoga berhasil 

Berbagi :