Small Trick In Writing Code

Apa yang mau dipostingkan nih! Tidak ada ide buat artikel. Ternyata setelah lama melakukan blogging, ketika mentok tidak punya bahan repot juga :d Tak semudah membalikan telapak tangan, semua hal memang membutuhkan perjuangan dan pengorbanan O:-)
Kalau begini keadaannya terpaksa mengangkat tema-tema yg sudah lawas untuk di ulang kembali alias dimodernisasikan ;)) Sobat kenal dengan atribut form Bila akan membuat sebuah syntax form action, pasti ada varibael input! Tag input juga masih banyak lagi variannya it's all about input html tag. Koben mau berbagi cara membuat area input untuk syntax form, agar terlihat futuristik ;)
KODE CSS

input {
    background: rgba(0,0,0,.1);
    width: 200px;
    height: 30px;
    border-radius: 15px;
    border: 0;
    box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset, 0 -1px 2px rgba(255,255,255,1) inset;
    padding: 0 10px;
    color: #999;
}
input:focus {
    outline: none;
    color: #000;
}

MARKUP HTML<input />Tutorial yg ringan-ringan saja, kan enggak ada ide :D Sekarang kita buat box (kotak) biar lebih fancy macam begini fancy box style Yang sekarang kita tambahkan dengan garis pinggir di dalam area box

#box {
  position: relative;
  background-color: #fff;
  width: 400px;
  height: 400px;
  margin: 40px auto;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, .2);
}
#box:after {
    content: '';
    position: absolute;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
}

Planning HTML<div id="box"> </div>Resource by: www.cssdeck.com/labs/full/fe1egt0a
Sekarang kita buat variabel ordered list menjadi lebih cool seperti:

1. Simple ordered list.
2. Make ordered list more styles.

Syntax

<style>
ol {
  counter-reset: listnumbering;
  list-style: none outside none;
}
ol>li {
  margin: 0 0 .5em 0;
  display: block;
  clear: left;
}
ol>li:before {
  content: "" counter(listnumbering, decimal);
  counter-increment: listnumbering;
  font: 400 1.2em "Times New Roman",Georgia,Serif;
  float: left;
  margin: -.1em 0 0 -1.6em;
  width: 1.3em;
  background: #fff;
  border-radius: 1em;
  text-align: center;
  color: #ff5f25;
  border: 1px solid #ccc;
}
</style>

<ol>
<li>Blah bleh bloh 1</li>
<li>Blah bleh bloh 2</li>
</ol>

Bikin tampilan video (youtube) terlihat lebih atraktif dengan teknik penulisan inline style.

Kodenya<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrgE9JOvioufhgmJltl8_iFacRSikWZ6JxOGluMVIcOQabh5lq0iJhl1UYbokEp4SELz-kt7xEqFBiXhOUFXhmim402KeMOK3WkFl7K-P6TvdPIY3rDdhOmz29GN_Ordut1cj1KEiucw/s1600/Youtube-background.png) no-repeat top left;height: 364px;margin: 0 auto;padding: 19px 0 0 22px;text-align: left;width: 532px;">
<iframe src="http://www.youtube.com/embed/ID-VIDEO" frameborder="0" height="298" width="498"></iframe>
</div>Semoga bermanfaat :)
Happy coding \m/