16 Februari, 2012

MENAMBAHKAN SCROLL DI LAYER / DIV SECARA OTOMATIS

Pernahkah ente membuat sebuah div yang isinya terlalu banyak, sehingga isinya keluar dari div tersebut ?


kali ini ane mau berbagi script yang bisa membuat scroll pada div sesuai dengan isi div tersebut.
seperti ini contohnya :





15 Februari, 2012

MEMBUAT TOMBOL PRINT PAGE

Sesuai judul, ane mau membari script sederhana yang kadang dilupakan orang,
sekarang ane mau share script yang digunakan untuk mencetak halaman , 




coba klik tombol ini :





anda akan dibawa menuju print preview,


mau tau scriptnya ?


ini dia :


<button onclick="window.print();">print</button>


silahkan dikembangkan sendiri :D

MEMBUAT SCROLL TO TOP

Kadang orang masih bingung dengan coding yang sederhana,
contohnya script yang digunakan di menu "scroll to top" (ane gak tau namanya apa)


langsung saja tambahkan saja script ini di web / blog anda  :

<a href="javascript:scroll(0,0)">
Top
</a>

jika anda klik link "top" maka anda akan langsung dibawa ke halaman paling atas,
silahkan dikembangkan sendiri :)

MEMBUAT DIV BERADA DI TENGAH-TENGAH

Kadang kita masih bingung, bagaimana cara menengahkan layer / div yang kita buat,
ternyata caranya cukup sederhana,
kita tinggal menambahkan beberapa script saja di css, 
bisa sebagai id ataupun class,,
ini contoh screenshot nya :






ini kode htmlnya :


MENAMBAHKAN FAVICON PADA APLIKASI WEB

Halo para blogger,
kali ini saya akan menjelaskan bagaimana memberikan favicon di aplikasi web kita,


tau favicon kan?
ini contohnya :

gak keliatan ?
ini deh :



kalau aplikasi webserver ente pake apache yang bundling XAMPP, pasti favicon defaultnya ini :



cara menggantinya, tinggal sisipkan script berikut di dalam tag ente :





ket :
pict/ban.ico = nama folder/nama file


semoga bermanfaat :D

10 Februari, 2012

MYSQL VIA CMD

sebenarnya ini cara udah lama,, 
tapi lumayan lah bisa bantu yang belum tau :D


-langkah pertama masuk ke system properties

MEMBUAT CSS TEXT SHADOW

Hehe, masih dalam tema yang sama, yaitu CSS3..
tapi kali ini gak jauh beda dari post saya yang berjudul membuat css box shadow ,
ini hanya pengembangannya saja,
reminder : pake browser terbaru yah kalo mau ngetes :D


Yuk langsung saja seperti biasanya..
sebenarnya prinsipnya sama seperti box shadow,
ini contoh scriptnya :



.textshadow {
text-shadow: 0px 3px 7px #222; 
-moz-text-shadow: 0px 3px 7px #222; 
-webkit-text-shadow: 0px 3px 7px #222; 
}

penjelasan :
-0px: X position
-3px: Y position
-7px: shadow spread
-#222: shadow color


ini screenshotnya :




itu malah hasil gabungan dari ketiga post saya tentang CSS3 . :D
yasudah,sekian dulu ya :D

MEMBUAT CSS BOX SHADOW


Setelah posting ane tentang membuat rounded corner dengan css3,kali ini nggak jauh berbeda,
disini kita masih menggunakan fasilitas CSS3 , yaitu BOX SHADOW ,
INGAT ! CSS3 hanya kompatibel di browser versi terbaru


Sudah sudah, gak pake basa basi, ini dia contoh scriptnya :

.shadow { box-shadow: 0px 0px 20px #222; -moz-box-shadow: 0px 0px 20px #222; -webkit-box-shadow: 0px 0px 20px #222; }


penjelasan :
-0px (yang pertama): X position (ke kiri atau ke kanan)
-0px (yang kedua) : Y position (keatas atau kebawah)
-20px : radius bayangan,(susah di bahasa indonesiakan)
-#222 : warna bayangan

07 Februari, 2012

MEMBUAT ROUNDED CORNER DENGAN CSS3

Ane mau bagi-bagi ilmu dikit nih :D
kali ini adalah cara membuat rounded corner (tau kan artinya ? -..-" )


rounded corner ini termasuk CSS3 (seingat ane :D *sori kalo sotoy), jadi paling tidak harus pake web browser terbaru :D
dalam pengujian ini,ane pake google chrome,firefox, sama IE9 ..
tapi yang paling kompatibel buat CSS3 cuma google chrome (menurut ane juga :p)



cukup deh basabasinya.. :p
langsung aja deh ke scriptnya :D


ini contoh rounded di semua pojok :

.rounded{

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}