Travelling Keliling Anymore

Mari kita berjalan-jalan lagi menyatroni link-link usefully bin full stylish b-) Karena blogger blogspot kepunyaan Embah Google, gue harap elo-elo pada sudah tauk dengan satu link berikut ini Zeitgeist 2012 Google Jika sobat hobby nembakin keyword, cocok banget buat patokan trend apa yang lagi trending dan most searched apa yg sedang banyak di cari oleh para online user saat itu!
Masih dari Zeitgeist Google bila kalian perhatikan pada sisi kanan bawah terdapat garis

Ketika kalian sorot akan muncul satu robot unyu-unyu yg mana tangan dan kakinya bisa bergerak-gerak! Bagaimana hal itu bisa terjadi, temukan jawabannya di Google Zeitgeist Gangnam Style Easter Egg by master Layke. Sobat pernah melihat ini Google BBS Terminal aplikasi kreasi dari <masswerk.at> dan ini aplikasi serupa yg teranyar-nyah Google60

CSS3 generator lumayan baru dengan sentuhan gaya jQuery scrollorama bisa kalian jadiin alternatif tools yg udah ada www.css3generator.in Now let's go melancong to web code demo & view, and it's talking about Search box tutorial

codepen.io/joshnh/pen/eIksb
codepen.io/arthurra/pen/KhCyk
cssdeck.com/labs/full/super-cool-search-input-using-css3-and-js/0

Kemudian aku melihat cssdeck.com/labs/special-character-dictionary eh...eh master Taufik sudah membuatkannya Generator Karakter Spesial HTML/Unicode Generator special/unique character tersebut sangat membantu kita dalam menulis karakter spesial/unik karena blogger (editor) kebanyakan menggunakan bahasa XHTML
Here demo Focused Input Trick.

#searchs {
  background: #fc6;
  border: .125em solid #222;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
  text-transform: uppercase;
  vertical-align: top;
}
#searchs:hover,
#searchs:focus {
  background-color: #fa3;
}
#search {
  border: .1575em solid #222;
  border-right: 0;
  color: #222;
  display: inline-block;
  font: 1em/1.5 sans-serif;
  height: 2.2789em;
  margin-right: -.25em;
  opacity: 0;
-webkit-transition:.25s;
   -moz-transition:.25s;
     -o-transition:.25s;
        transition:.25s;
  width: 0;
}
#search:focus {
  opacity: 1;
  padding-left: .75em;
  padding-right: .75em;
  width: 18em;
}

Lakukan seting pada width & height sesuai keperluan.
MARKUP HTML

<form action="http://www.google.com/search" method="get" target="_blank">

 <input id="search" type="text" name="as_q" value="Cari apa..."/>

 <input name="sitesearch" type="hidden" value="YOUR-BLOG.blogspot.com" />

  <label for="search" id="searchs">Search</label>

</form>

YOUR-BLOG gantikan dengan alamat blog sobat :)
Who's cooler ;))

nicolasgallagher	paulund.co.uk
CSS drop-shadows without images	CSS Box Shadow Effects

Udah aaah, bye :-h
Happy coding \m/