Cara Menambahkan Wallpaper/Gambar sebagai Background Blog

Kita dapat dengan mudah menambahkan gambar latar belakang dalam sebuah blog / Blogger Blogspot. pada tab Design ► Template Designer , dan ini sudah disediakan oleh pihak Blogger sekarang ini.

Tetapi ada beberapa Themes yang didapat [di-download] dan tidak support / tidak bisa untuk setting Background Image / gambar background.

Add Background to Blog

Untuk menambahkan gambar sebagai latar belakang blog Anda, pertama-tama Anda perlu melakukan 3 hal :

I   ► Pilih sebuah gambar.

II  ► Upload.

III ► Tambahkan ke HTML blog Anda.

I ► Pilih sebuah Gambar

Ini adalah hal yang cukup sederhana, Anda dapat memilih sebuah wallpaper gambar dari komputer Anda atau web. Tentu saja, jika Anda memilih wallpaper penuh maka itu akan cukup berat dalam ukuran dan akhirnya blog anda akan mengambil terlalu banyak waktu untuk me-load.

Saya sarankan Anda untuk menggunakan pola, bukan gambar besar. Pola A juga gambar tetapi memiliki ukuran yang sangat kecil dan hal ini diulang di latar belakang blog. Kita bisa menggunakannya untuk menutupi latar belakang keseluruhan melalui properti latar belakang CSS yang akan dijelaskan nanti.

II ► Upload

Bila Anda sudah memilih foto atau pola dan sekarang kita perlu meng-upload gambar pada beberapa host. Untungnya, Blogger menyediakan ruang setiap user bebas 1Gb untuk menyimpan gambar yang lebih dari cukup, jadi meng-upload foto Anda pada Blogger dan kemudian kembali. Atau Anda juga bisa upload seperti di tinypic.com.

III ► Tambahkan ke blog Anda HTML

Aku menduga bahwa sekarang Anda telah menyelesaikan dua langkah sebelumnya dan kami siap untuk melanjutkan. Sekarang, Anda perlu mengikuti langkah-langkah sederhana untuk menyelesaikan tutorial ini :

1 - Pergi ke Desain -> Edit HTML dan cari :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Anda mungkin tidak dapat menemukan kode diatas tepat tetapi Anda pasti akan menemukan beberapa kode semacam ini :

body {
.
.
.
Terletak beberapa kode di setelah 'body'...
.
.
.
}

2 - Setelah Anda menemukan kode yang disebutkan di atas, Anda perlu menambahkan kode berikut di dalamnya :

background-image: url (Masukan Link / URL gambar Anda dari langkah 2);
background-repeat: repeat;
background-attachment: fixed;

Perlu diketahui bahwa kode ini hanya untuk menambahkan sebuah pola, jika Anda menambahkan gambar besar, tidak perlu memakai ini repeat atau mungkin tidak perlu memakai fixed. Silahkan dicoba mana yang cocok untuk anda. Setelah menambahkan kode tersebut pada Langkah 2, kode secara keseluruhan akan terlihat seperti ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(Masukan URL / Link gambar Anda dari langkah 2);
background-repeat:repeat;
background-attachment: fixed;
}

3 - Ganti Masukan URL / Link gambar Anda dari langkah 2 dengan URL gambar upload Anda yang Anda upload di atas dalam tutorial ini.

4 - Anda juga dapat mencoba mengubah background-attachment: fixed; Latar belakang Anda dapat dibuat bergerak bila di scroll, Anda hanya tinggal mengganti menjadi background-attachment: scroll;. Dengan cara ini, latar belakang anda juga akan bergerak saat Anda menggulir blog Anda tetapi saya tidak akan merekomendasikan melakukan hal ini.

Menyesuaikan Background Image

Jika Anda telah menambahkan gambar latar belakang (tidak berpola) maka sangat penting untuk menyesuaikan dengan benar. Berikut ini adalah kode untuk menambahkan gambar di latar belakang :

background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

Secara keseluruhan, kode harus terlihat seperti ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}

Seperti yang Anda lihat, aku telah mengubah kode sedikit dengan mengubah ulang untuk tidak mengulang / no-repeat dan juga menambahkan properti Posisi Background. No-repeat akan memastikan bahwa gambar kita tidak mengulang [tile]. Properti Background kita memiliki 2 parameter yang menentukan posisi horizontal dan vertikal dari suatu gambar. Pada kode diatas, posisi left = horizontal dan posisi top = vertikal sehingga Gambar / Wallpaper kita akan ditempatkan sesuai dengan parameter ini. Berikut ini adalah daftar parameter kemungkinan properti Posisi Background :

background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

♪ ♫ ♪ ♫ ♪ ♫

Orang yang suka personalisasi blog mereka dan menambahkan gambar di latar belakang blog pasti menambahkan personalisasi lebih dalam sebuah blog. Tutorial tentang Blogging ini sangat disukai karena tema blog kita menjadi sangat unik dengan adanya ini.