Membuat Background Bertingkat (Multi Layer) - HP Yitno Membuat Background Bertingkat (Multi Layer) - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Membuat Background Bertingkat (Multi Layer)

Dear sahabat,
Terkadang melihat tampilan blog dengan gaya yang itu-itu saja cukup membosankan juga ya kawan. Tapi mau gimana lagi, ane termasuk orang yang nggak mau direpotkan dengan merubah-rubah template. Karena dengan merubah template, ane harus menyesuaikan postingan yang lama agar sesuai dengan template yang baru. Terutama gambar-gambar tutorial yang sering ane setting dengan ukuran 265 px dan 280 px. Kalau template baru dirubah ukurannya agar sesuai dengan gambar yang ada, kesannya kok nggak enak dipandang mata.

Cukup lama ane memikirkan bagaimana agar ane dan pengunjung nggak merasa bosan dengan tampilan yang ada. Saat terdiam memikirkan ini, terbersit ide untuk memberi gambar background pada halaman postingan. Masalah yang selanjutnya kami hadapi adalah bagaimana supaya background ini nggak mengganggu para pembaca karena warna tulisan yang nggak kelihatan akibat adanya gambar dibelakang tulisan. Nah dari sini percobaan dimulai.

Setelah beberapa kali melakukan percobaan, ane dapat menyimpulkan kalau background yang cocok dengan laman ini adalah warna apa saja tapi diambil ke arah yang keputih-putihan. Jadi meskipun ada gambarnya, tulisan yang ada masih bisa dibaca dengan nyaman dan enak. Untuk bisa menyamarkan gambar yang ada, memang dibutuhkan keahlian khusus dalam memodifikasi gambar. Ane termasuk yang nggak terlalu bisa memodifikasi gambar. Ya udah sebisanya aja yang ane tampilkan disini. Software yang ane gunakan dalam menggambar juga masih accesorries-paint bawaan dari windows 7 ultimate. kalau sobat blogger pasti lebih jago dalam masalah desain.

Disini ane hanya mau menuliskan kode background sesuai posisi yang diinginkan, supaya kesannya sederhana tapi terlihat profesional. Gimana bingung kan? ane juga bingung dengan kata-kataku sendiri. Tanpa panjang lebar, inilah penjelasan kode yang saya gunakan dalam postingan ini.

<div style="width:100%; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwX2qGV24nGzat24r8uF2TqRVNp1H9vCxccDONzckFzOfKIUoHgNyOOCGfXEUUGS9ejc5BK-rM6V9Q0O8XuB-DuyFbLNwAdTPk827fRmW1LQKQyiBgM8e-a_Lg4_01-o43IfGv1PAxIGvW/s210/Balon-1.jpg') top left no-repeat, url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqdDoTWJDS2AoUH81xELBSfrV-O36wG8D1BuangsyhyphenhyphenYqoR2TVOJPWh6ODHDBLjULc002r4xWYp31wTaOP68jDz_jOVvb7VNiOaAIoO7cy27WRydoa69a7jrvkWzuPinCygK1pCIc7e-aZ/s200/Balon-2.jpg') bottom left no-repeat, url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXkTgiR_tEw4hXi5GgB3w3UJRlV-aqnpgJ3OQcgAff1KoMyHWfzSgj04F_QgQuXQBwEkf5XQUnu_MtovaGvJeX-Xr6z6rLSqUYobc-PwCRVSJiBKnGzd-xdAirQBPaRe_PcglP8EKM37Zy/s200/Balon-3.jpg') top left repeat-y;">Tulisan artikel kalian</div>



Cara Menggunakannya:
1. Tulislah artikel kalian seperti biasa pada mode compose.
2. Jika sudah selesai, klik mode html.
3. Letakkan kode css diatas pada awal dan akhir artikel sehingga artikel kalian diapit oleh kode <div style="nilai property css"> dan </div>
4. Kembalikan ke mode compose, lalu preview atau publish langsung.

Keterangan css code:
1. Nilai posisi terdiri dari (top, bottom, left, right, center)
2. repeat: gambar ditampilkan berulang-ulang
2. no-repeat: gambarnya ditampilkan apa adanya
3. repeat-y: gambar berulang sesuai sumbu y
4. repeat-x: gambar digandakan sesuai sumbu x

Struktur Background:
Struktur background diatas terdiri dari 3 bagian yang terpisah tetapi masih dalam satu css yang dipisahkan dengan tanda koma. Cara kerjanya sama persis dengan multi layer pada adobe photoshop. Url pertama berada diatas sedangkan url terakhir berada paling bawah.

Contoh:
background:1,2,3,4 => 1 diatas 2, 2 diatas 3, 3 diatas 4.
SHARE :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
8 Komentar untuk "Membuat Background Bertingkat (Multi Layer)"

Keuntungan menggunakan background multi layer ini adalah loading background sangat cepat karena dipecah menjadi beberapa bagian. Sayangnya multi background ini menggunakan css3. Jika browser kawan-kawan nggak mendukung css3, ya nggak bekerja.

Tapi sekarang memang sudah diarahkan ke css3 semua.

aku juga bingung kalau ngoprek blog..jeduk kepala, hehehe yg pntng isi blognya juga harus maknyuss mas yit

boleh juga nih, tapi kalo background postingannya di rubah pasti butuh banyak inspirasi ya ... Hehehe... Lanjutkan

niatnya sering ada tapi prakteknya suka kebentur pekerjaan lain

Isi blog memang yang harus utama sob. Tampilan hanya sebagai penyemangat saja :)

Inspirasi mah banyak sob. Tapi mau mewujudkannya itu yang terkadang nggak ada kemauan.

Kerjakan yang lebih penting dulu sob. Ini hanyalah selingan saja.

Belum ada keinginan untuk oprak abrik daleman blog lagi bang, tapi info yang bermanfaat ini,

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top