Memaparkan/pasang imej background penuh (full-sized background image) pada tema blogger kini lebih mudah dengan teknik-terknik tertentu. Jika tersalah langkah, seperti menggunakan fungsi Advance pada dashboard Blogger, ia bakal memudaratkan loading blog anda dan menyebabkan pelawat akan "lari" mencari laman blog yang lain.
Kali ini tutorial lebih mudah memasang/kaedah imej penuh skrin (full size image) dengan menggunakan imej anda sendiri. Kedudukan imej akan tetap (fixed) pada paparan dan kualiti image tersebut tidak akan mengganggu keseluruhan desain blog anda mahupun blogshop atau website anda kelak.
 |
| Klik untuk diperbesarkan |
Desain imej background penuh kekal sebegini semakin menjadi trend dikalangan designers dan juga developers dimana ia lebih memberi impak "WOW factor" kepada bakal pelawat ke laman web/blog anda. Yang penting haruslah mengambil berat tentang:-
- Imej disimpan di blog sendiri.
- Kedudukan imej tidak terherot atau distorted.
- Tidak memudaratkan loading blog anda (mesra pelawat)
- Memberi impak dan kelaianan kepada pelawat blog anda.
- Mencipta identiti tersendiri untuk blog.
- Imej gambar responsive dengan paparan sekata dalam apa jua saiz browser.
Ikuti beberapa langkah mudah seperti beikut.
Cara upload gambar/Imej untuk latarbelakang blog
- Saiz imej disyorkan untuk background adalah lebih kurang 1200px lebar dan 900px tinggi. Selalunya di mana-mana carian web untuk kata kunci wallpaper, imej tersebut amat sesuai cuma perhatikan sama ada ia percuma ataupun mempunyai copyright.
- Saiz sesebuah imej tidak lebih dari 300Kb. Ia bagi memastikan imej background blog anda, pada apa jua browser, tidak akan mengganggu "loading" blog.
Langkah Upload:-
- Pergi ke dashboard blogger > Pages > Create New Page > namakan ikut keperluan.
- Pada Page tersebut > klik di ruang kosong > tekan ikon imej > upload imej background anda.
- Selesai > klik pada imej yang sudah terpapar pada Page anda dan klik link "original size".
- Right Click imej tersebut dan pilih "Copy Image URL".
- Simpan URL imej tersebut di PC anda > pada Page tadi klik Save dan kemudian > Close. (Page ini tidak akan dipublish dan dijadikan pengkalan simpanan/rujukan imej anda.)
Keadah/Cara Menambah Kod Imej Background untuk Tema Blog
1. Dinasihatkan untuk anda Back-Up template anda jika anda tersilap langkah.
2. Di Dashboard > pergi ke Template > Edit HTML.
3. Untuk memudahkan carian tekan Ctrl F > search bar terpapar (penjuru atas kanan) dan masukkan kod berikut:-
]]></b:skin>
4. Tekan enter dan kedudukan template akan memaparkan kod diatas (berwarna oren)
5. Copy kod disediakan (bawah) diatas/sebelum kod berwarna oren di template anda
#bg {
z-index:-1!important;
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {z-index:-1!important;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
6. Kemudian seperti langkah carian No. 5, masukkan pula kod ini:-
<body>
7. Tekan enter dan anda akan dibawa ke kod berwarna bertanda oren pada template anda.
8. Copy kod dibawah dan paste kan selepas/dibawah kod yang berwarna oren itu.
<div id='bg'> <img alt='background image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUAFud8olcfL6Mi9YaJGPafYeffcKiJW7XLteLewwSKHmVC48vOc5hyB1cIhJCl1lGtO9nBxiIiqKFj1_kPfb6HyiK4ElBOPE3y1GNiLdCWJPbMrxCOIdQfl4DSVooJmhhBt80t2wdxa0t/s1600/bg_2.jpg'/> </div>
9. Pada ruang src='.......' gantikan dengan kod URL imej anda yang telah anda simpan tadi.
10. Selesai klik Save Template dan prebiu blog anda dengan imej background baru.
Tahniah anda telah berjaya memasang/mengolah dengan desain imej baru pada blog anda.
Keberangkalian Paparan Imej Background Anda.
Kebanyakan tema dipasaran banyak menggunakan fungsi elemen "z-index" pada template mereka. "z-index" adalah fungsi CSS yang memaparkan sama ada sesebuah elemen berada di hadapan atau terkebelakang pada browser anda.Jika background imej anda tersorok diantara beberapa elemen (setelah preview), pergi ke langkah 5 dan tambahkan nilai z-index pada kod tersebut. Sebaliknya jika imej background anda terpapar di bahagian atas sekali sehingga menutupi konten blog anda, turunkan nilai elemen z-index tersebut.
Contoh sebuah imej background penuh anda boleh lihat di tema ini. Anda juga boleh re-size browser anda untuk melihat imej latarbelakang tersebut responsive kepada berbagai saiz skrin. Konten website tersebut juga reponsive untuk memaparkan dalam apa jua saiz skrin.
Diharap dengan tutorial ini dapat memberikan kelainan kepada blog, blogshop mahupun website anda. Kaedah ini telah dicuba uji dan mesra kepada enjin carian lama seperti IE7, IE 8, FireFox (versi lama dan baru), Chrome (versi lama dan baru), iPad, iPhone dan kesemua webkit browsers.
Selamat mencuba.
Got It!
Data submitted via comments collected & stored by the respective providers.
Read our Privacy Policy to learn more on data management & protection.