Banyak cara membuat tampilan blog menjadi lebih menarik, yaitu dengan membuat background template diam atau tidak bergerak (tidak mengikuti scroll pada layout template).
Tips Blogger ini tidak berlaku untuk template yang menggunakan background berwarna mono alias polos karena efeknya tidak akan terlihat sedang bergerak atau diam.
Tips Blogger ini tidak berlaku untuk template yang menggunakan background berwarna mono alias polos karena efeknya tidak akan terlihat sedang bergerak atau diam.
Cara Membuat Template Background Diam (Tidak Mengikuti Scroll)
1. Login ke akun blogger anda. Pada Dashboard klik Template dan pilih Edit HTML.
2. Cari kode CSS body{
Tiap-tiap template mungkin akan memiliki kode sedikit berbeda, namun biasanya akan seperti berikut
body{background:#0B182A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsS3NIGVJp8ORfGiXHKHaoSEOLIWooK8FcrIb4cGK5UYLvPwBIB9rb_c508K9uaNr9JVqlZo1xlQTq4vKqVR4BVrXMpZzb7xT7pTNvaouvGGF9FK_tSKTQYcFoqiRXx-2Nmus3q8Esjw/s1600/Odyck_bg1.jpg) repeat-x;color:#222;font-family:'Droid Sans',verdana,arial;font-size:13px;text-align:center;margin:0}
Perhatikan kode repeat-x; (warna biru setelah url background) di atas, kode tersebut memiliki perintah untuk mengulangi penampilan gambar.
3. Untuk merubah agar background tidak mengikuti scroll, tambahkan kode di bawah berikut setelah kode URL background template anda
top center no-repeat;background-attachment: fixed;
hasilnya akan seperti berikut :
body{background:#0B182A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsS3NIGVJp8ORfGiXHKHaoSEOLIWooK8FcrIb4cGK5UYLvPwBIB9rb_c508K9uaNr9JVqlZo1xlQTq4vKqVR4BVrXMpZzb7xT7pTNvaouvGGF9FK_tSKTQYcFoqiRXx-2Nmus3q8Esjw/s1600/Odyck_bg1.jpg) top center no-repeat;background-attachment: fixed;color:#222;font-family:'Droid Sans',verdana,arial;font-size:13px;text-align:center;margin:0}
Keterangan kode
top center : perintah untuk memposisikan background pada posisi atas tengah.
no-repeat : perintah agar background tidak mengulang tampilan gambar.
background-attachment: fixed : perintah untuk mengunci background agar tidak mengikuti scroll, jadi yang bergerak hanya wrapper halaman saja (header sampai footer).
4. Save Template dan lihat hasilnya. Demikian cara membuat background template tidak mengikuti layout.
Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2013/04/membuat-background-template-tidak.html
2komentar:
gan kalau ane cobain codenya malah beda, dan waktu di masukin, backgroundnya malah jadi warna putih
coba Gan..hapus kode warna backgroundnya, misal body{background:#0b182a menjadi body{background: url(gambar anda.jpg)
jadi hanya menghapus perintah warna untuk background..
Post a Comment
*Silahkan tinggalkan komentar, saran atau kritik sesuai topik untuk kemajuan blog ini.
*Komentar anda secepat mungkin direspon, karena saya tidak selalu online.
*KOMENTAR TIDAK SOPAN, BERIKLAN, VULGAR, MELECEHKAN, SARA atau PROVOKATIF akan dianggap SPAM, dan berakhir di Tong Sampah..!!!