Rasanya sudah lama saya tidak posting di blog ini, konsentrasi saya sedang terpecah mengurus blog-blog saya yang lain, termasuk mybloggerthemes.com yang semakin banyak permintaan dari sahabat yang ingin mempromosikan template mereka di mybloggerthemes.com. Kali ini lagi-lagi saya mencoba memberikan tutorial css buat sobat setia pengunjung blog ini, namanya css layer.
Css layer ini semacam tulisan atau gambar yang berbayang yang terdiri dari 2 komponen css sederhana. Untuk membuatnya sangat mudah, hanya menerapkan sedikit kode cssmaka tulisan atau gambar berbayang siap ditampilkan dan mempercantik blog sobat. Berikut beberapa tutorialnya :
LAYER 1
LAYER 2
<div style="z-index:2; position:relative; font-size:40px">LAYER 1</div><div style="z-index:1; position:relative; color:blue; font-size:60px">LAYER 2</div>
► Layer 2 diatas layer 1
LAYER 1
LAYER 2
<div style="z-index:3; position:relative; font-size:40px">LAYER 1</div><div style="z-index:4; position:relative; color:blue; font-size:60px">LAYER 2</div>
► Layer Untuk Gambar Variasi 1
<div style="position:relative"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div><div style="position:relative; margin-top:-20px; margin-left:20px"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div>
► Layer Untuk Gambar Variasi 2
<div style="position:relative"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlINhjmszkib7kXxotDnTJr9Nsv_R9G_9MEA_VwDznCUvXSxKrIX1oJY2phJEqQ0UbgTl4C6DD_Yeb9dIqvLQd_Z0oA2D4W2Kmm1943IotO-5qKERxgdlwSoyMv1yp-8txfVoXOtMmz4/s1600-r/miscah.png" /></div><div style="position:relative; filter:alpha(opacity=20); margin-top:-10px; -moz-opacity:0.20; opacity:0.2; -khtml-opacity:0.2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlINhjmszkib7kXxotDnTJr9Nsv_R9G_9MEA_VwDznCUvXSxKrIX1oJY2phJEqQ0UbgTl4C6DD_Yeb9dIqvLQd_Z0oA2D4W2Kmm1943IotO-5qKERxgdlwSoyMv1yp-8txfVoXOtMmz4/s1600-r/miscah.png" /></div>
Untuk tutorial css image yang lain akan saya bahas lain waktu, semoga bermanfaat.
Dengan memasukan alamat email dibawah ini, berarti sobat akan dapat kiriman artikel terbaru dari saya di inbox sobat :
Artikel Terkait:
Blogger
- Cara Copy Paste Artikel Yang tidak bisa di Copy di Sebuah Blog ataupun Website
- Kenapa Blogspot.com berubah menjadi .co.id ‐ apa penyebabnya dan bagaimana mengatasinya?
- Cara Membuat Slideshow Pada Blogger
- Cara membuat chat box di blog & macam-macam chat box
- Cara Membuat Chat Box di Blogger
- Cara memasang radio online di blog
- CARA MEMBUAT RADIO STREAMING
- Membangun Radio Internet dengan Listen2MyRadio.Com
- Membangun Sendiri Radio Internet
- Radio Online
- Tampilan Baru Dasbor Blogger.com
- Membuat Label untuk Artikel Miniatur Hover
- Menambah Button Send ke Facebook
- Laporan berita sekilas dari w3spy.net
- Pengaturan Ukuran pada Kolom Komentar dan Postingan Lebih Fleksibel
- Membuat Web Hosting di Google Sites
- Google Code - Cara Membuat File Hosting di Google Code
- Tips Mendapatkan Banyak Follower di Twitter
- Membuat Artikel Terkait dengan Disertai Thumbnails
- Cara Merubah Blogger.com atau Draft.blogger.com Sebagai Default Dasbor Blogspot Anda
- Cara Memasang Widget SMS Gratis pada Blogger Blogspot
- Favicon Fitur Baru dari Blogger
- Menambahkan Gadget di Header
- Cara Membuat Menu dan Iklan Floating Bottom - Trik Menu dan Iklan Selalu ada di Layar
- Cara Membuat Iklan Melayang - Agar Iklan Tampil Setiap Halaman Blog Dikunjungi
Tidak ada komentar:
Posting Komentar