CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.
Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.
Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"
lalu cari code CSS dibawah ini
.post img {
- - -
- - -
}
Note :
- Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
- Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini
.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
Nah yang diganti adalah code CSS yang berwarna hijau saja.
kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.
Sekian semoga bermanfaat.
Recent Posts : [archives limit=10]
Terkait
Tutorial
- Cara Merubah File PDF ke Word - Tutorial Lengkap PDF
- Script Curang Auto Klik Kanan Terbaru 2013
- Tutorial Install Windows 8 di PC/Laptop
- Cara Menambahkan Chat Box di Blog
- Membuat Scroll Pada Archive Blog
- Cara Membuat Sesuatu Menempel Terus di Window Blog
- Cara Menghapus Label Di Blog
- Mengubah Menu Bar Di Atas / Di bawah Header Pada Blogspot Baca
- Memasang Iklan dua kolom
- Floating Box Yang Cocok Untuk Adsense
- Free WordPress Premium Themes – Elegant News
- Membuat Efek Hujan Salju Pada WordPress.com
- Cara Pasang Tombol Share Facebook Dan Twitter
- Melihat Perkembangan Blog Kamu dan Rivalmu Dengan Compete.com
- Cara Pasang Video You Tube ke Blog
- Mengubah Blog Dari NoFollow ke DoFollow
- Cara Menambahkan Kolom Sebelah Kiri Di Blogspot
- Cara Membuat Iklan Melayang atau Floating Ads di Blogger / Blogspot
- Membuat Floating Button Di Sisi Blog
- Chat Di FB Pakek Emo Keren..Mau??
- Kumpulan 30 Web Direktori,Tempat Menemukan Backlink Gratis (Free Backlink Exchange)
- Membuat Buku Tamu Tersembunyi Di Kiri Kanan Blog
- Memasang Iklan di Bawah Postingan
- Membuat Widget Paypal Button
- Membuat Text Melayang Mengikuti Arah Mouse
0 komentar:
Posting Komentar