Postingan

Menampilkan postingan dari Agustus, 2012

Membuat Efek Bayangan CSS Text Shadow

Gambar
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks: span { text-shadow:10px 10px 7px #222; } Aturannya sama persis dengan CSS Box Shadow : 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kamu tidak bisa membuat efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, sebenarnya kamu juga bisa membuat efek bayangan teks inset (baca tutorialnya di sini ). Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline <style type='text/css'> #teks1 {text-shadow:10px 10px 7px #222;} </style> ...... <div id='teks1'> TEKS </div> <div style='text-shadow:10px 10px 7px #222;'> TEKS </div>

Membuat Efek Bayangan CSS Box Shadow

Gambar
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset: div { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; /* Firefox */ box-shadow:10px 10px 7px #222; /* W3C */ } CSS Bayangan Inset: div { -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */ -moz-box-shadow:inset 10px 10px 7px #222; /* Firefox */ box-shadow:inset 10px 10px 7px #222; /* W3C */ } 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline #kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kota

Membuat Menu Navigasi Blog

Gambar
Pada suatu hari Saya mencoba iseng membuat model-model menu navigasi, hingga akhirnya inilah yang Saya dapatkan ( lihat demonya di sini ). Saya rasa, desain menu navigasi Saya yang satu ini sudah cukup ganteng. Bagaimana menurut kalian? Jika kalian berminat membuat menu navigasi seperti tampak di atas, maka ikutilah jalan kebenaran Saya ini: Masuk ke tab Rancangan , kemudian pilih Edit HTML Nah, setelah itu salinlah kode ini, kemudian letakkan di atas kode ]]></b:skin> #hompinav {font:normal 0.9em Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;} #hompinav ul {list-style-type:none;margin:0;padding:0;height:50px;} #hompinav li a {display:inline;margin:0 2px;float:left;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;box-shadow:0 2px 3px #999;-moz-box-shadow:0 2px 3px #999;-webkit-box-shadow:0 2px 3px #999;} #hompinav li a:link, #hompinav li a:visited {font-weight:bold;color:#FFFFFF;background-color:#335577;border:2px out

Related Post Dengan Thumbnail Blogspot

Gambar
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan deskripsi artikel » baca tutorialnya di sini Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail Masuk ke tab Rancangan , kemudian pilih Edit HTML . Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil. Salin kode di bawah ini, kemudian letakkan di atas kode </head> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #at-gambar {text-transform:

Cara Membuat Gmail Dan Blog

Gambar
Cara Membuat Email Google Atau GMail Gmail merupakan layanan email gratis yang disediakan oleh google. Dengan memiliki akun email pada gmail, maka dengan sertamerta akan mendapatkan layanan gratis lainnya dari Google, seperti: Blog pada Blogspot, Social Network GPlus, Album Photo Picassa, Video Hosting Youtube dan masih banyak lagi. Untuk membuat sebuah akun Gmail, ikuti langkah berikut: Langkah 1 Kunjungi http://mail.google.com Langkah 2 Klik tomboh BUAT AKUN atau CREATE AN ACCOUNT pada sisi kanan atas Langkah 3 Isi formulir pendaftaran dengan lengkap. Langkah 4 Verifikasi akun gmail Langkah 5 Jika verifikasi berhasil, selanjutnya lengkapi identitas kepemilikan email dan masuklah keberanda GMail   Cara Membuat Blog Di Blogspot Setelah memiliki akun GMail, selanjutnya adalah memanfaatkan fasilitas gratis Google yaitu Blogger atau Blog dengan Subdomain Blogspot. Untuk membuat sebuah akun Blogspot, ikuti langkah dibawah ini: Langkah 1 Kunjun

Peluncuran Perdana Praktikum PC

Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................................Peluncuran Perdana Praktikum PC................................................................................