Simple Fancy Button dengan CSS3

banyak yang bertanya tanya gimana sih bikin tombol gradiasi yang baguuss !!
seperti twitter??
itu mudah cuma siapkan mental saja yang kuat hehe. dan sedikit CSS3

untuk kali ini saya sarankan menggunakan browser modern ex : Chrome, Safari, Firefox yang pastinya sudah support CSS3

pertama kita perlukan gradiasinya gmana cara membuat tombol dengan gradiasi css3 agar bagus ?
pastikan warna gradiasi bawah dan atas itu bawah gelap atas terang
Untuk generate CSS3 Gradient bisa pake tools http://www.colorzilla.com/gradient-editor/

berarti kode yang kita dapatkan sebagai berikut.

background: #4f85bb;
background: -moz-linear-gradient(top, #4f85bb 0%, #416b99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f85bb), color-stop(100%,#416b99));
background: -webkit-linear-gradient(top, #4f85bb 0%,#416b99 100%);
background: -o-linear-gradient(top, #4f85bb 0%,#416b99 100%);

sedangkan untuk CSS tombol bisa menggunakan kode ini.

input[type="button"]{
background: #4f85bb;
background: -moz-linear-gradient(top, #4f85bb 0%, #416b99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f85bb), color-stop(100%,#416b99));
background: -webkit-linear-gradient(top, #4f85bb 0%,#416b99 100%);
background: -o-linear-gradient(top, #4f85bb 0%,#416b99 100%);
border: 1px solid transparent;
color: white;
font-family: arial;
font-weight: bold;
padding: 3px 10px;
border-radius: 5px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 3px rgba(0,0,0,0.8);
}

Untuk gradiasi kamu bisa copy dari generate code CSS yang tadi. untuk membuat Teks terlihat membekas ke dalam menggunakan akal akalan CSS text shadow seperti kode di atas dan biasa tag untuk tombol

<input type="button" value="tombol"/>

maka hasilnya akan seperti ini.

Kaskus Badge With jQuery

langsung saja cara memakai kaskus Badge atau KTP kaskus menggunakan jQuery AJax dan YQL (karena bersifat Cross Domain ke kaskus.us
sebelumnya Initialize jQuery nya dulu ya jquery.js

var userid = "1127204"; //UserID agan
jQuery.ajax = (function(_ajax){ var protocol = location.protocol, hostname = location.hostname, exRegex = RegExp(protocol + '//' + hostname), YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?', query = 'select * from html where url="{URL}" and xpath="*"'; function isExternal(url) { return !exRegex.test(url) && /:\/\//.test(url); } return function(o) { var url = o.url; if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) { o.url = YQL; o.dataType = 'json'; o.data = { q: query.replace( '{URL}', url + (o.data ? (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data) : '') ), format: 'xml' }; if (!o.success && o.complete) { o.success = o.complete; delete o.complete; } o.success = (function(_success){ return function(data) { if (_success) { _success.call(this, { responseText: data.results[0] .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '') }, 'success'); } }; })(o.success); } return _ajax.apply(this, arguments); }; })(jQuery.ajax); 
$(document).ready(function() { $.get('http://www.kaskus.us/member.php?u=' + userid , function(res) { var user = $(res.responseText).find('h1').html(); var avatar = $(res.responseText).find('#user_avatar').attr('src'); var jumlahpost = $(res.responseText).find('#stats .statistics_group:first ul li:first').html(); var joindate = $(res.responseText).find('#stats_mini dl dd:first').html(); var username = user.split('<img'); var post = jumlahpost.split('</span>'); $('.ktp_kaskus').html('<div style="width:150px;font-size:13px;font-family:arial;padding:5px"><a href="http://www.kaskus.us/member.php?u='+ userid +'"><strong>'+ username[0] +'</strong></a><br><img src="'+ avatar +'" alt=""/></br>UserID: '+ userid +'<table><tr><td>Join date : </td><td>'+ joindate +'</td></tr><td>Total Post : </td><td>'+ post[1] +'</td></tr></table></div>'); $('.ktp_kaskus td').css({'font-size':'13px'}); }); });

 yang berwarna merah di ganti dengan userID agan

oke... sentuhan terakhir tambahkan kode

<div class='ktp_kaskus'></div>

di mana saja tempat badge ingin di buat didalam tag body misalnya dan selesai !

demo ?

buat aja sembarang file

credits to :
usejquery.com
jquery.com
Yahoo Query Langguage