Cara Membuat Kotak/Boarder HTML Keren di Postingan

KODE IKLAN DISINI

KODE IKLAN DISINI

  Pada Artikel kali ini saya akan membahas  tentang bagaimana cara membuat kotak/boarder kode HTML,CSS,Javascript,Jquery,dll dengan desain yang keren ala freenet, css ini saya ambil dari arlina desain, saya hanya memodif sedikit saja. dengan kotak ini, kita dapat menyeleksi semua kode dengan 2x klik tanpa harus manual seleksi, langsung saja kita praktekan .

   Kotak Kode ini sangat penting tentunya bagi kalian yang memberikan tutorial, teknik ataupun lainnya yang berkaitan dengan kode ini, kenapa kotak kode sangat penting? karena jika kita membuat postingan dan di dalamnya ada sebuah kode HTML ataupun lainnya maka anda memerlukan kotak kode ini, karena jika tidak memakai kotak kode maka postingan yang ada kode html nya akan error dan tidak bisa di publikasikan karena mengandung elemen di dalam postingan tersebut tanpa ada wadah nya. Silahkan anda bisa melihat contoh kotak kode yang saya pakai yaitu seperti gambar di bawah ini. Simpel dan Elegant kan :D

 Cara membuat kotak/boarder kode keren 

• pertama tama buka BLOGGER >pilih  TEMPLATE > EDIT TEMPLATE

• lalu copy dan paste  kode dibawah diatas kode </style> atau diatas kode ]]></b:skin> untuk mudah mencarinya tekan CTRL+F

/* CSS Syntax Highlighter BY ANAKFORUM.COM */
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:#f0f0f0;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;border-radius:3px;-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}
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:18px;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#555;border:1px solid #f0f0f0;display:block;margin:0;font-weight:700;text-indent:15px}
pre code{display:block;background:none;border:none;color:#999;padding:25px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.85rem;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}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;}

• masukkan kode ini di postingan sobat dalam mode HTML untuk memanggil kode cssnya

<pre data-codetype="CSSku" title="CSS"><code class="language-markup">tempat kode</code></pre>

• Catatan jika ingin mengganti kotak CSS dengan yang lainnya, kalian hanya bisa menggunakan CSS HTML JavaScript JQuery

• Caranya ganti CSSku dengan HTMLku , JavaScriptku , JQueryku

• Sebelum sobat memasukkan kode di kota kode, parse dulu kode nya.klik disini untuk PARSE HTML . 

• jika sudah di parse, masukkan kode/script yang ingin dimasukkan di tempat kode (mode HTML bukan COMPOSE)jika

  Hasilnya bisa anda lihat di kotak HTML di atas yang saya pakai, bagaimana gan puaskah dengan hasilnya? semoga saja iya :D.Sekian tutorial Cara Membuat Kotak/Boarder HTML  Keren di Postingan dari saya, semoga bermanfaat .jika ada pertanyaan dan saran atau kesalahan pada css atau HTML yang saya berikan tidak aktif/error silahkan berkomentar dibawah. Terima kasih

KODE IKLAN DISINI

Tweet

Raja Blog

Blogger yang senang mempelajari hal-hal baru seputar Blogging,SEO,Programming,IT dan Informasi.

Subscribe to receive free email updates: