Artikel sekarang merupakan hasil Koben pilih dari walking² blog & web. Article mantap guna belajar lebih dalam bahasa HTML ;) Langsung saja pada postingan pertama jatuh pada membuat tabs dengan jQuery, hasil karya @catalinred ini, diberi sedikit bumbu sentuhan CSS3 CSS3 & jQuery folder tabs. Artikel kedua merupakan updatean postingan gue dulu tentang CSS3 Image Styles Sesuatu Banget, sekarang sudah ada fresh posted CSS3 Image Styles Part 2 by @nickla
Lanjut bos mari, opsi kita bermain Fun Fun Deh lihat ada permainan membuat efek marquee, dan sekarang kita dapat membuat marquee and blink² efek dengan memakai atribut CSS 3, cek gi dot Alternatives to <Marquee> and <Blink> tags. Teman kita membuat satu form action guna menggenerat emoticon teranyar buat chattingan bagi facebooker CODE Facebook Chat Text Emo Generator :-bd Generator yg akan menghasilkan deretan huruf menjadi emotikon di chatingan facebook dengan beragam warna ciamik punya. Coba saja lah buka facebooknya ;)) baru bisa praktek :P

Sobat blogger yg di templatenya pakai Related Post bergaya LinkWithin, sekarang dapat menseting alias customize widget tersebut, hajar bleh Personalizar el gadget de LinkWithin. Koben akhiri petualangan blog walking ini dengan bagaimana membuat tabel dengan atribut CSS3 dengan efek hover cantik :x karya Ajay Patel.

Efek rainbow/pelangi yang sering kita jumpai ketika melakukan hover pada link, akan berkedip-kedip dan mengeluarkan eferk warna berganti-ganti. Blogger Indonesia banyak juga yg memakai trick ini ;)) RainbowAnchor nama javascriptnya. Bagaimana jadinya jika sekarang kita buat java-script Rainbow Anchor tanpa disorot terlebih dahulu tetapi bisa menampilkan variabel warna dan berkedip-kedip pula di link yg telah kita tagging dengan atribut class :-" Untuk melihat demo silahkan sobat memakai HTML Editor :D (jangan lupa pencet tombol Clear dulu, biar kode yg ada di kotak sebelah kiri musnah) ;) Berikut ramuan javascript linkcycle rainbow anchor.

<script type="text/javascript">
//<![CDATA[
//www.JavaScript-FX.com
function getColor(start,end,percent){function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex (dec){return(dec<16?"0":"")+dec.toString(16);}
var r1=hex2dec(start.slice(0,2)),g1=hex2dec(start.slice(2,4)),b1=hex2dec(start.slice(4,6));var r2=hex2dec(end.slice(0,2)),g2=hex2dec(end.slice(2,4)),b2=hex2dec(end.slice(4,6));var pc=percent/100;var r=Math.floor(r1+(pc*(r2-r1))+.5),g=Math.floor(g1+(pc*(g2-g1))+.5),b=Math.floor(b1+(pc*(b2-b1))+.5);return("#"+dec2hex (r)+dec2hex (g)+dec2hex (b));}
function cycleColor(theClass,start,end,index,speed)
{if(index==0)
{start=end;end=(end+1)%allColors[theClass].length;}
var color=getColor(allColors[theClass][start],allColors[theClass][end],index);for(var i=0;i<document.links.length;i++)
if(document.links[i].className==theClass)
document.links[i].style.color=color;index=(index+speed)%100;setTimeout("cycleColor(\""+theClass+"\","+start+","+end+","+index+","+speed+")",100);}

var allColors = new Array();
allColors["c1"] = new Array("FF00FF", "55FFFF", "5599FF");
allColors["c2"] = new Array("FF0000", "FFFF00", "00FF00");
function JSFX_StartEffects()

{cycleColor("c1",0,0,0,5);cycleColor("c2",0,0,0,10);}
JSFX_StartEffects();
//]]>
</script>

• Angka 100 pada script.
Mengatur cepat/lambat kedipan.
• "FF00FF", "55FFFF", "5599FF"
Variasi warna, bisa ditambahkan dengan begini "code warna" jangan lupa koma bawahnya!

Si bloglang anu ganteng kalem tea Beben Koben menaruh rasa salut bagi para pemikir yang berpikir secara serius (sungguh-sungguh) Tak ayal sesuatu yg memang tiap hari kita temukan namun tidak kelihatan fungsinya! Ternyata benar adanya jika melakukan sesuatu itu harus tuntas terlebih dulu baru kita bisa berpindah ke urusan lainnya. Terinspirasi dari bacaan gue Tricks Search and Secret by Google, Koben mau berbagi pada pelancong setia blog ini sedikit pemaparan tentang bagaimana cara mengetahui blog/web kita di mata search engine google!
Sebetulnya penjelasan sekarang sudah terpampang jelas ada di google bila sobat jeli ketika kita melakukan searching suatu keyword, maka pada footer google akan terlihat beberapa keterangan baik berupa kata², link atau yg lainnya :-/ Biar lebih jelasnya mari kita berpraktek ria ringan sejenak :D namun tetap serius dan santai dalam memahami ;)

Open this link, wait opened until full 100% tutorial blog Setelah terbuka 100%, scroll ke paling bawah halaman tersebut! Apa yg kalian lihat :-? Ada keterangan singkat bertuliskan Searches related to tutorial blog diikuti dengan beberapa links terkait opsi pilihan kan! Sekarang bagaimana caranya link² google berinteraksi langsung dengan link blog/web kita sendiri di area kompetisi global search :)) Pasti penasaran ya :-"
Disini kita akan melihat link blog/web yg kita miliki secara spesifik (khusus) berhubungan langsung dengan embah google.
Yuk kita mulai ke acara puncak []

Semakin ramai saja para developer membuat kreasi dengan hadirnya feature CSS3 ini :-bd Kali sekarang Koben sang bloglang sejati akan berbagi hasil bertualang dan menemukan trick-trick keren dari para kreator keren punya :D Menurut saya keren belum tentu menurut kalian kan ;)) Oke kita langsung saja mulai trik yang pertama yaitu membuat tombol download keren memakai animasi efek Code an Awesome Animated Download Button With CSS3
Mungkin ada baiknya sobat melihat juga artikel aku dalam membahas variety demo and download button ;)
This is original article come from http://designshack.net/articles/css/downloadbutton/
Untuk melihat hasil ramuan kreasi CSS berikut, sobat bisa gunakan tools HTML Editor. Sekalian belajar cara memakainya toh ;) Sebelumnya silahkan sobat buka ini terlebih dahulu MBT HTML Editor. Kemudian tekan tombol Clear masukan bumbu ini

<style>
.button {
  width: 200px;
  margin: 40px auto;
}
.button a {
  display: block;
  height: 50px;
  width: 200px;
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background: #00b7ea;
  background: -moz-linear-gradient(top, #00b7ea 0%, #38D4FF 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#38D4FF));
  background: -webkit-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
  background: -o-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
  background: -ms-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
  background: linear-gradient(top, #00b7ea 0%,#38D4FF 100%); 
}
.button a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.button p {
  background: #D00;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.button:hover .bottom {
  margin: -10px 0 0 10px;
}
.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
.button a:active {
background: #00b7ea;
background: -moz-linear-gradient(top,  #38D4FF 36%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#38D4FF), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); 
background: -o-linear-gradient(top,  #38D4FF 36%,#009ec3 100%);
background: -ms-linear-gradient(top,  #38D4FF 36%,#009ec3 100%);
background: linear-gradient(top,  #38D4FF 36%,#009ec3 100%); 
}
.button:active .top {
margin: -70px 0 0 10px;
opacity: 0.8;
background: #0d0;
color:#111;
border: 1px solid #000;
}
.button:active .bottom {
margin: -20px 0 0 10px;
opacity: 0.8;
background: #0d0;
color:#111;
border: 1px solid #000;
}
</style>

<div class="button">
<a href="/">Download</a>
<p class="top">Click to Download</p>
<p class="bottom">10GB .zip</p>
</div>