Langkah pertama adalah mockup dulu tampilan yang ingin kita buat, bisa menggunakan aplikasi grafis apapun. Disini saya menggunakan Adobe Photosop CS3 BJK. Saya tidak akan menjelaskan secara detil cara membuatnya, tapi paling tidak ntr yang baca blog ini bisa dapet ide yg lebih bagus lagi mo dibikin kayak gimana desainnya..

1. Bagian Header

2. Bagian Content/Stream twitter kita.

3. Dan bagian yang terakhir yaitu bagian footer.

Setelah desain selesai tahap selanjutnya adalah dipotong satu persatu (slicing) yang nantinya akan di styling dengan css.

Untuk membuat twitter widget kita menuju kesini dulu dan masukkan nama akun twitter kita. Pada tab Preference saya skip, saya langsung ke tab Appearance. Kemudian warnanya saya sesuaikan dengan desain saya diatas.

Klo udah pas tinggal klik tombol “Finish and Grab Code”. Copy kode nya trus paste di file html yang tentunya sudah kita buat sebelumnya.

Berikutnya masuk ke tahap inti yaitu, styling dengan cara alay. Mengapa saya sebut cara alay ? Karena saya tidak membuat styling css standar twitter widget nya yang terdapat di widget.css. Saya cuma menggunakan firebug di firefox dan kemudia inspect element. Saya pilih ID atau class yang sekiranya saya butuhkan saja. Begitu.

Yap..! styling nya selesai dan bisa dilihat hasilnya disini.

Selamat mencoba kawan2. ^_^

Target posting di tiap bulan harus ada pokoknya dan sekarang sudah masuk bulan kedua di tahun 2012. Karena target ya kadang bikin judul postingan rada geje seperti postingan kali ini.. LOL. Tombol yang akan kita bikin, tombol yg umum kita jumpai aja.. Misalnya tombol Register dan Login. Kita bikin tombol ini nantinya dengan HTML & CSS3. Ok. Mulai..!!

1. Bikin file index.html dan isi kodenya seperti gambar dibawah ini.

kode HTML

*untuk tempat file CSS bisa disesuaikan menurut selera anda.

2. Styling dengan CSS3

Disini file CSS saya kasi nama screen.css (soale bikinnya pake COMPASS). Umumnya nama filenya style.css. Kodenya adalah sebagai berikut:

body {
background: #cccccc url(“../img/BG.jpg”) repeat;
font: 12px normal Arial, sans-serif;
}

/* line 20, ../sass/screen.scss */
ul {
margin-top: 20%;
margin-left: auto;
margin-right: auto;
width: 300px;
text-align: center;
}
/* line 26, ../sass/screen.scss */
ul li {
list-style: none;
display: inline;
}
/* line 29, ../sass/screen.scss */
ul li a {
color: #f6f6f6;
text-decoration: none;
text-shadow: 0 1px #333;
font-weight: bold;
padding: 1em 2em;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(2%, #666666), color-stop(100%, #333333));
background-image: -webkit-linear-gradient(#eeeeee 0%, #666666 2%, #333333 100%);
background-image: -moz-linear-gradient(#eeeeee 0%, #666666 2%, #333333 100%);
background-image: -o-linear-gradient(#eeeeee 0%, #666666 2%, #333333 100%);
background-image: -ms-linear-gradient(#eeeeee 0%, #666666 2%, #333333 100%);
background-image: linear-gradient(#eeeeee 0%, #666666 2%, #333333 100%);
}
/* line 37, ../sass/screen.scss */
ul li a:hover {
color: #333;
text-shadow: 0 1px #fef4e9;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fef4e9), color-stop(2%, #faa51a), color-stop(100%, #f47a20));
background-image: -webkit-linear-gradient(#fef4e9 0%, #faa51a 2%, #f47a20 100%);
background-image: -moz-linear-gradient(#fef4e9 0%, #faa51a 2%, #f47a20 100%);
background-image: -o-linear-gradient(#fef4e9 0%, #faa51a 2%, #f47a20 100%);
background-image: -ms-linear-gradient(#fef4e9 0%, #faa51a 2%, #f47a20 100%);
background-image: linear-gradient(#fef4e9 0%, #faa51a 2%, #f47a20 100%);
}
/* line 43, ../sass/screen.scss */
ul li a.reg {
border: 1px solid #111;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
-o-border-top-left-radius: 30px;
-ms-border-top-left-radius: 30px;
-khtml-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-o-border-bottom-left-radius: 30px;
-ms-border-bottom-left-radius: 30px;
-khtml-border-bottom-left-radius: 30px;
border-bottom-left-radius: 30px;
-moz-box-shadow: #eeeeee 0px 1px 0px 0px;
-webkit-box-shadow: #eeeeee 0px 1px 0px 0px;
-o-box-shadow: #eeeeee 0px 1px 0px 0px;
box-shadow: #eeeeee 0px 1px 0px 0px;
}
/* line 49, ../sass/screen.scss */
ul li a.login {
border-left: 1px solid #888888;
border-right: 1px solid #111;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
margin-left: -3px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
-o-border-top-right-radius: 30px;
-ms-border-top-right-radius: 30px;
-khtml-border-top-right-radius: 30px;
border-top-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-bottom-right-radius: 30px;
-o-border-bottom-right-radius: 30px;
-ms-border-bottom-right-radius: 30px;
-khtml-border-bottom-right-radius: 30px;
border-bottom-right-radius: 30px;
-moz-box-shadow: #eeeeee 0px 1px 0px 0px;
-webkit-box-shadow: #eeeeee 0px 1px 0px 0px;
-o-box-shadow: #eeeeee 0px 1px 0px 0px;
box-shadow: #eeeeee 0px 1px 0px 0px;
}

3. Hasilnya bisa dilihat disini.

Selamat Mencoba. ^_^

*Ow ya..mohon maaf jika ada kesamaan dengan artikel situs lain, mohon beritahu dengan mengomentari postingan ini. Postingan ini murni bikinan sendiri, tidak menyalin dari situs lain. ^_^

Tepat jam 6.30 waktu Indonesia bagian Surabaya, saya dan keponakan saya cabut dari ke kosnya. Jarak tempuh menuju jembatan Suramadu sekitar 45 menit dan nyampe ditengah jembatan dibantai oleh angin laut yg kencang (merinding).

Setelah lolos dari terpaan angin kencang (ceileeee) kami pun melanjutkan perjalanan menuju kota Bangkalan. Pas nyampe di jalan raya ketengan kec. burneh kab. Bangkalan kami mampir di salah satu warung yang sekarang sudah menjadi rumah makan besar yaitu Warung Bebek Sinjay. Sekedar flash back, dulu saya waktu di asrama di desa Langkap sering beli sarapan disini, tepatnya di tahun 2007. Sebenarnya dari desa Langkap menuju ketengan itu lumayan jauh, tapi karena saya sering ikut guru saya bersepeda ke kota dihari sabtu dan minggu pagi, makanya saya bisa beli sarapan disini. Harga per-bungkusnya waktu itu Rp. 6000,- dan sekarang udh naik jadi 2 kali lipat. Rasa bebek gorengnya emang enak sih, beda dengan bebek goreng yang lain terutama rasa sambelnya, disini menurutku perbedaan yg mencolok. Sambel bebek goreng sinjay ini pedesnya pas dan rasanya enak (ga tau resepnya apa) dan yang bikin enak lagi karena ada serutan mangga disambelnya (ngetik samblil ngiler). Berikut penampakannya.

Warung Bebek Sinjay

Orang pada ngantri padahal masih pagi.

Ngantri dulu coy

Daaannn..!

Klo temen2 pada ngiler setelah baca postingan ini, yaaa temen2 tinggal nyebrang kok ke pulau Madura. Klo lewat suramadu pasti bakal ketemu sama nih rumah makan.

Sesuai yang tertulis dipapan tersebut, harga soto nya cuma Rp. 6000,- dan klo soal rasa lidah ga bisa bo’ong (sedaappp maksudnyaaa). Klo yang dibawah ini tampilan soto yang udah di hidangkan oleh si penjual..

Menurut lidah saya, ini makanan yang berjenis soto yang direkomendasikan untuk dicoba. ^_^

Sepertinya wajib posting untuk pembukaan tahun 2012. Kali ini saya mencoba untuk membuat pattern sendiri di Gimp, pattern yang saya buat merupakan noise pattern yang sebenarnya mau saya pasang di gambar latar website yang saya bangun. Noise pattern bagi web designer sudah tidak asing lagi karena sudah menjadi salah satu trend web design saat ini. OK! Langsung saja kita mulai langkah cara membuatnya.

1. Buat dokumen baru di Gimp dengan resolusi 128×128 px.

2. Isi Layer Background dengan warna abu-abu (#CCCCCC)

3. Masuk ke menu Filters > Noise > Noise generator

4.  Didalam jendela Noise generator ada beberapa pilihan, tapi saya disini hanya menggunakan Poisson yang berapa di Tab pertama. Anda bisa melakukan variasi dengan pilihan yang ada di Tab lainnya yang tersedia di jendela Noise generator. Untuk Poisson saya masukkan nilai 5 (sesuaikan menurut selera) dan centang Luminance noise only dan Gamma correction (Seperti pada gambar dibawah ini).

5. Selanjutnya adalah menyimpan hasil diatas sebagai pattern. Pilih File > Save as. Simpan di direktori kerja anda (disini saya simpan di direktori Pictures yang ada di Home). Simpan dengan nama NoisePattern dan pilih ekstensi .pat.

*Pada waktu meng-kllik tombol OK akan muncul jendela yang meminta mengisi nama pattern. Isilah dengan nama yang sesuai dengan tema pattern yang anda buat, karena disini menggunakan warna abu-abu maka saya beri nama Gray Noise Pattern. Fungsinya untuk memudahkan mencari pattern yang akan kita gunakan di Gimp nantinya, apalagi klo sudah memiliki banyak pattern di Gimp.

Adding new Pattern

Yap..! kita sekarang sudah punya file pattern, trus gimana cara menggunakannya di Gimp ?

Caranya mudah saja, di Gimp ada direktori patterns. Kita tinggal salin file pattern yang sudah kita bikin tadi ke direktori patterns. Maaf dengan cara yang akan saya gunakan dibawah ini  (kebiasaan di Linux)

Cara di Linux

Buka Terminal dan ketikkan perintah seperti dibawah ini:

$sudo cp Pictures/Lain2/NoisePattern.pat /usr/share/gimp/2.0/patterns/

dan masukkan password anda.

Cara di Mac OSX

Buka Terminal dan ketikkan perintah seperti dibawah ini:

$cp Pictures/Lain2/NoisePattern.pat Library/Application\ Support/Gimp/patterns/

Kita lihat hasilnya dengan menekan tombol refresh di tab pattern yang ada di pojok kanan bawah (default).

Hasil akhirnya seperti berikut:

#Selamat Mencoba