Untuk yang ingin menjajal dunia blogger, dimana nanti pada saat pertama kali membuat blog pasti akan disuguhkan template yang telah disediakan oleh bloggernya/default. Bagi pembuat blog yang tidak pasiv tentu pada saatnya akan merasa bosan dengan template dengan backround yang bawaan blogger, kemudian mendownload template yang telah tersebar di berbagai situs. atau gak bagi saudara yang udah master buat template sendiri, tapi di postingan ini saya mau memberikan kepada saudara yang belum bisa buat template sendiri, yang cuman pakai dari hasil orang atau blogger, yaitu bagaimana merubah template background blog baik kreasi orang atau dari blogger melalui html??
Perhatikan dengan seksama !!
Pertama buka blog yang saudara miliki, kemudian disitu terdapat banyak menu pilih yang menu "template" jika sudah pilih "edit html" lalu tekan CTRL+F dan cari kode html ini "body{background" atau milik saya pribadi seperti ini"body{background:#ecf0f1;}" untuk yang kode warna html yang dicetak tebal miringkan itu milik saya dan saudara tidak usah ubah mengikuti kode warna saya karena di template milik saudara sendiri sudah ada walaupun kode warna html nya beda, jika sudah ditemukan selanjutnya "body{background:#ecf0f1;}" itu ditambahkan "url('')" setelah kode warna yang berfungsi sebagai mendirect url backgroundnya ingat jika ingin ubah background template pilih url gambarnya, kalau di satukan maka seperti ini "body{background:#ecf0f1 url('') ;}", tanda petik dalam kurung ('') tersebut diisi dengan url background yang saudara telah ditetapkan, nanti jadinya seperti ini "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGsFgKIKGuZIAQ-_35uheztBBhysfoT35Qn2T27nkAJjPvEr3vMx6l6E8JSGa7LxHcEmzeYDd3eIb1wghFA_cQHBl9BjQyFwK3ebGIHF_pSQZceI3N6j6VggOmxCyWcY16VfDxibUV13M/s1600/Cool+Nature+Background+Wallpapers2.jpg')", kemudian tambahkan ukurannya dengan ini ";background-position:top left;background-repeat: repeat-x repeat-y;" setelah kurung tutup, jika pakai metode ukuran ini background blog saudara tidak benar-benar full melainkan background dengan gambar yang sedikitnya mengulang dibawahnya, ketika disatukan semua jadinya begini :
"body{background:#ecf0f1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGsFgKIKGuZIAQ-_35uheztBBhysfoT35Qn2T27nkAJjPvEr3vMx6l6E8JSGa7LxHcEmzeYDd3eIb1wghFA_cQHBl9BjQyFwK3ebGIHF_pSQZceI3N6j6VggOmxCyWcY16VfDxibUV13M/s1600/Cool+Nature+Background+Wallpapers2.jpg');background-position:top left;background-repeat: repeat-x repeat-y;}"
Setelah itu saudara bisa cek dulu/pratinjau atau boleh langsung simpan
Cara kedua menggunakan metode pengukuran background dengan "background-repeat;repeat-x;"cara penempatannya sama yaitu setelah kurung tutup url background, kalau memakai metode kedua ini tampilan background akan berulang secara horizontal .
"body{background:#ecf0f1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGsFgKIKGuZIAQ-_35uheztBBhysfoT35Qn2T27nkAJjPvEr3vMx6l6E8JSGa7LxHcEmzeYDd3eIb1wghFA_cQHBl9BjQyFwK3ebGIHF_pSQZceI3N6j6VggOmxCyWcY16VfDxibUV13M/s1600/Cool+Nature+Background+Wallpapers2.jpg')background-repeat;repeat-x;}"
Cara ketiga memmakai "background-repeat;repeat-y" background berulang secara vertikal, hasilnya seperti dibawah ini :
"body{background:#ecf0f1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGsFgKIKGuZIAQ-_35uheztBBhysfoT35Qn2T27nkAJjPvEr3vMx6l6E8JSGa7LxHcEmzeYDd3eIb1wghFA_cQHBl9BjQyFwK3ebGIHF_pSQZceI3N6j6VggOmxCyWcY16VfDxibUV13M/s1600/Cool+Nature+Background+Wallpapers2.jpg')background-repeat;repeat-y;}"
Cara terakhir metode dimana background tampil penuh, metodenya sebagai berikut :
";margin:0;padding:0;background-size:100% 100%", contoh keseluruhannya seperti dibawah ini :
"body{background:#ecf0f1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGsFgKIKGuZIAQ-_35uheztBBhysfoT35Qn2T27nkAJjPvEr3vMx6l6E8JSGa7LxHcEmzeYDd3eIb1wghFA_cQHBl9BjQyFwK3ebGIHF_pSQZceI3N6j6VggOmxCyWcY16VfDxibUV13M/s1600/Cool+Nature+Background+Wallpapers2.jpg');margin:0;padding:0;background-size:100% 100%}"
nb :
Tanda petik("") jangan digunakan, langsung saja copy isinya jika ingin mencoba
Baik itulah tutorial yang saya berikan, terus semangat menjalankan blognya dan semoga berhasil !!
0 komentar: