Cara Memasang Gambar Background Di Blog Melalui Kode HTML

Kebanyakan blogger tentunya mendapatkan template dari hasil download diinternet ketimbang membuat template sendiri, hal ini karena untuk membuat template dibutuhkan skil koding/nyekript khusus seperti contoh keyword Tag Blog, HTML, CSS, JavaScript, dan JQuery. Dan biasanya juga template yang didapatkan dari internet kebanyakan tanpa background gambar, jikapun ada gambarnya pastilah gambar yang polos dan tak terlalu menarik, Nah disinilah artikel yang satu ini ditulis.

Tips tambahan sebelum ke tutorial yaitu memilih gambar, pilihlah gambar yang memiliki ukuran kecil biasanya yang direkomendasikan dibawah ukuran 200KB, hal ini bertujuan untuk meningkatkan kecepatan loading page, saran lain gunakan format JPG, walau kebanyakan sangat direkomendasikan menggunakan file gambar berformat PNG, namun file PNG cenderung berukuran besar, bisa sampai 1MB lebih sedang JPG hanya 200KB. Selain daripada itu yang harus diperhatikan adalah bagian panjang dan lebar gambar, pilih gambar dengan ukuran portait yaitu memanjang vertikal (dari atas kebawah) hal ini bertujuan agar gambar dapat mengisi seluruh permukaan layar smartphone.

Sebagai seorang SEO Blogger pastinya membuat andat tak henti-hentinya memperhatikan penampilan blog sendiri, salah satunya pada bagian background blog. Kali ini Dukuntekno akan memberi tutorial cara menambah gambar di background blog agar lebih cantik. Tutorialnya cukup mudah ikuti dengan seksama biar tidak ada yang terlewat.

Langkah Memasang Gambar Background
1. Buka Blog anda.
2. Buka Template dan edit HTML.
3. Cari kode body { atau body{ (gunakan fungsi CTRL + F untuk mencari kodenya).

Contoh Kode css body { :

body {
margin:0 0 0 0;
padding:0 0 0 0;
color:$(body.text.color);
font:$(body.font);
text-align:left;
border: 1px solid #ccc;
border-radius: 4px;
}

Contoh lain dari kode body { :

body { margin:0 0 0 0;padding:0 0 0 0;color:$(body.text.color);font:$(body.font);text-align:left;border: 1px solid #ccc;border-radius: 4px; }

4. Tambahkan kode background-image: url(Url Gambar); setelah tanda { , sehingga tampak seperti ini:

body {
background-image: url(Url Gambar);
margin:0 0 0 0;
padding:0 0 0 0;
color:$(body.text.color);
font:$(body.font);
text-align:left;
border: 1px solid #ccc;
border-radius: 4px;

5. Save Template

Langkah Agar Gambar Tidak Bergerak Walau Di Scroll
1. Tambahkan kode berikut agar gambar background tidak bergerak (ini optional) setelah kode background-image: url(Url Gambar); berikut kodenya:

Sehingga tampak seperti ini:
body {
background-image: url(Url Gambar);
background-position: center;
background-size:100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin:0 0 0 0;
padding:0 0 0 0;
color:$(body.text.color);
font:$(body.font);
text-align:left;
border: 1px solid #ccc;
border-radius: 4px;

2. Save Template.

Nah selesai sudah, itulah cara menyisipkan gambar menjadi background blog, saya sangat terimakasih sudah mampir di blog saya ini. Jika ada kesalahan dalam penulisan saya mohon maaf dan jika anda masih belum paham tentang cara memasukkan kode Gambar background, saya sangat senang jika anda berkomentar dan menjelaskan bagian mana yang membingungkan anda karena tentu saya akan membimbing anda dengan sebaik-baiknya. sekian tips blog dari Dukun Tekno yang dapat saya bagikan dan Semoga berhasil.

Cara Memasang Gambar Background Di Blog Melalui Kode HTML

Baca Juga