Writing a Professional Code in Blog Post Area

Live HTML edtior merupakan salah satu tools pendukung multifungsi dalam melakukan kegiatan blog. Jika editor HTML mirip post editor blog yg seperti ini Free HTML Editor, mirip dengan w3schools kayak begini Free Tryit Editor Like w3schools V1.5 Pokoknya banyak deh :D silahkan ubek-ubek di halaman arsipku ;))
Ngomong-ngomong nih, pasti kalian sudah pada kenal dengan The code Player atau CodePen editor tempatnya para master melakukan kabisa! Banyak juga sih tempat semacam itu, lain waktu nanti Koben akan share kalo ingat Jika kita perhatikan, dimana kolom-kolom penyimpanan kode itu berbeda kan? Code buat HTML berada pd kolom HTML, code CSS berada kolom CSS, dan kolom Script berada pada kolom Script!

Tampilannya bisa bergaya vertikal or horizontal. Jika kita blogger mania biasanya melakukan hal serupa dengan cara dan gaya berbeda. Tetapi gue belum pernah melihat blogger menampilan kode-kode layak seperti web-web itu! Gue juga beda kok sob :)) Nih gaya tampilan untuk menampilkan coded di blog ini

<script type="text/javascript">
    var AppDataDictionary = {
      blogKey: 'ohyesohnouhohahuhohah',
      blogHomepageUrl: "http://beben-koben.blogspot.com/"
    };
</script>

Dan ada 3 buah gaya lagi :)) Kan biar full stylish :">

D E M O

#Three_D {
font-family: Garamond, serif;
line-height: 1em;
color: #445463;
font-size: 91px;
text-shadow: 0px 0px 0 rgb(57, 73, 88), 1px 1px 0 rgb(46, 62, 77), 2px 2px 0 rgb(35, 51, 66), 3px 3px 0 rgb(24, 40, 55), 4px 4px 0 rgb(13, 29, 44), 5px 5px 0 rgb(2, 18, 33), 6px 6px 5px rgba(0, 0, 0, 0.6), 6px 6px 1px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, .2);
}

<div id="Three_D">
Bloglang anu Ganteng Kalem Tea \m/
</div>

Bloglang anu Ganteng Kalem Tea \m/

Seperti itulah sob, keren kan :D

Taruh kode CSS berikut tepat sebelum/diatas tagging </b:skin>

.CodeCss {
position: relative;
background: #F4F1EF;
white-space: pre-wrap;
border: 1px solid #555;
padding: 0 0 15px 15px;
font-family: Courier New;
border-radius: 10px 10px 0 0;
}
.CodeHtml {
background: #ECE9E8;
position: relative;
white-space: pre-wrap;
padding: 0 0 15px 15px;
font-family: Courier New;
border-right: 1px solid #555;
border-left: 1px solid #555;
}
.CodeResult {
padding: 20px;
background: #fff;
position: relative;
border: 1px solid #555;
border-radius: 0 0 10px 10px;
}
.CodeCss, .CodeHtml, .CodeResult {
height: 212px;
overflow: auto;
max-height: 500px;
}
.CodeCss:after, .CodeHtml:after, .CodeResult:after {
top: .2em;
z-index: 6;
right: 10px;
color: #445463;
font-size: 20px;
font-weight: 800;
position: absolute;
text-shadow: 0 1px 1px #000;
}
.CodeCss:after {
content: 'CSS';
}
.CodeHtml:after {
content: 'HTML';
}
.CodeResult:after {
content: 'RESULT';
}

Ketika saat memosting berikut markup HTMLnya<div class="CodeCss">
---------- ADD CODE CSS HERE ----------
</div>
<div class="CodeHtml">
---------- ADD MARKUP HTML HERE ----------
</div>
<div class="CodeResult">
---------- inline style technique writed ----------
</div>Selamat berkarya :)
Happy coding \m/