Cara menjadikan foto kita menjadi background :D

Cara Menjadikan Foto Kita Sebagai Background Dari Blog Yang Kita Miliki

Background, Blog, Blogger, Foto, Layout

Kali ini saya akan mengajarkan kepada kalian bagaimana caranya menjadikan foto kita sebagai background dari blog yang kita miliki. Sebagai contoh saya akan menggunakan blog yang saya miliki di Blogger.

1. Login ke dashboard account Blogger kalian, lalu klik menu “Layout” di blog yang ingin kalian edit tampilan layoutnya, setelah itu klik menu “Edit HTML”.
2. Sekarang kalian harus meng-upload foto yang ingin kalian jadikan background dari blog kalian tersebut ke suatu lokasi hosting di internet, sebagai contoh kalian bisa meng-uploadnya ke situs ImageShacks. Setelah fotonya berhasil terupload maka nanti kalian akan diberi tahu URL foto kalian tersebut.
3. Balik lagi ke halaman Blogger kalian tadi, lalu copy kode CSS berikut:

   <style type="text/css">

   style>

   Setelah di-copy kodenya lalu kalian paste-kan kode tersebut ke template Blogger kalian tepatnya sebelum kode (lihat gambar di samping ini jika bingung) dan jangan lupa untuk mengganti tulisan “Ganti dengan URL foto kalian” di dalam kode tersebut menggunakan URL foto kalian yang telah kalian upload sebelumnya ke ImageShacks. Setelah itu kalian klik menu “Save Template” kemudian buka blog kalian tersebut untuk melihat perubahan layout yang telah kalian lakukan.

atau

Mengubah gambar background blog dengan gambar sendiri

Buat teman-teman yang masih pemula, mungkin ada yang belum tahu cara mengganti background blog. Sebenarnya anda bisa mengubah background blog anda dengan menambah sedikit script CSS ke template blog anda.


Sebagai Catatan:
Saya menguji coba template ini pada template bawaan blogger yaitu: "Denim"
Mungkin jika menggunakan template lain tidak berfungsi optimal, karena biasanya setiap template mempunyai struktur dan syntax script yang berbeda.

Jika tertarik mengganti template blog:
1. Anda harus mengupload gambar yang akan anda gunakan di situs hosting file (image) seperti photobucket. Jika belum punya account disana anda bisa daftar di photobucket.com atau tinypic
Setelah upload gambar anda akan mendapakan url gambar tersebut.
(Catatan: gambar yang anda upload sebaiknya ukuran filenya kecil, usahakan lebih kecil dari 10 kbyte) agar cepat loadingnya, saya sarankan anda upload gambarnya ke tinypic)

2. Atau jika anda ingin mencoba gambar background yang saya punya bisa pakai url berikut:
http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif
http://i37.tinypic.com/apb69k.jpg
http://i36.tinypic.com/n1bdcz.jpg
(pilih salahsatu untuk ujicoba)

3. Selanjutnya masuk ke account blogger anda:
Pilih dasboard -> Tata Letak -> Edit Html



4. cari kode berikut:

body {
background: $bgColor;

5. Masukkan kode berikut di bawahnya:

background: #642D8B url('url gambar anda' ) fixed repeat top left;

Hasilnya seperti di bawah ini

body {
background: $bgColor;
background: #642D8B url('url gambar anda') fixed repeat top left;

6. Agar background di samping header berubah, maka anda harus mengubah kode berikut:

#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;

Ubah menjadi:

#header-wrapper {
margin:0;
padding: 0;
background: #642D8B url('url gambar anda') fixed repeat top left;
background-color: $headerCornersColor;
text-align: $startSide;

catatan;
url gambar anda diganti dengan url gambar yang telah anda upload, atau diganti dengan url gambar yang saya pakai:
http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif

6. Simpan template

atau

Memasang Background dengan Gambar Sendiri Pada Blogger Template Designer

Beberapa saat yang lalau blogger melakukan terobosan baru dengan meluncurkan Blogger Template Designer (Baca: Blogger Template Designer Fitur Baru Blogger Lagi dan Video Tutorial Blogger Template Designer). Fasilitas ini sendiri telah digunakan blogger untuk beberapa blog resminya seperti buzz blogger dan blogger in draft (Baca: Tampilan Baru Blogger Buzz dan Bloggerindraft). Anda bisa menggunakannya untuk merancang template Anda sendiri. Bahkan tanpa mahir codingpun Anda bisa membuat template yang berbeda dan unik Salah satu yang paling mencolok dan membuat blog memiliki ciri khas adalah background blog. Meski blogger template designer telah menyediakan banyak sekali gambar, tentu Anda lebih puas jika backgroundnya menggunakan gambar Anda sendiri.

Untuk menggantinya dengan background Anda sangatlah mudah,
1. Login ke draft.blogger.com
2. Klik Layout / Tata Letak / Rancangan
3. Klik Perancang Template / Template Designer

4.Anda akan sampai ke halaman perancang template. Untuk menggunakan background dari blogger silahkan pilih tab background. Pilih yang Anda suka lalu klik Done.

5. Untuk menggantinya dengan gambar sendiri, silahkan beralih ke Advanced lalu pilih Add CSS.

6. Pada kolom isian CSS, isi dengan kode berikut

.body-fauxcolumn-outer {background: url(alamat gambar anda);}
.body-fauxcolumn-outer div {background: none;}

7. Ganti yang berwarna merah dengan alamat gambar Anda. Setelah Anda masukkan kode tersebut dengan alamat gambar Anda sendiri, otomatis preview akan terupdate dan preview template berganti menggunakan background Anda. Sekarang Anda siap menyimpannya dengan klik Apply to Blog.

Semoga bermanfaat, silahkan berkreasi di dunia blogger tanpa batas... Happy Blogging... Jaga untuk tetap berbagi...

Selengkapnya di www.MasDoyok.co.cc Memasang Background dengan Gambar Sendiri Pada Blogger Template Designer

Artikel Terkait