Dengan panduan ini, Anda akan dapat menambahkan gambar latar belakang atau gambar ke Blog Anda, menyesuaikan posisi gambar Anda, dan memiliki gambar latar belakang statis yang tetap di tempat saat Anda menelusuri isi blog Anda.
Dengan panduan ini, Anda akan dapat menambahkan gambar latar belakang atau gambar ke Blog Anda, menyesuaikan posisi gambar Anda, dan memiliki gambar latar belakang statis yang tetap di tempat saat Anda menelusuri isi blog Anda.
Anda akan perlu untuk membuat gambar. Cari gambar yang Anda suka. Jika Anda membutuhkan alat pengedit foto gratis, Anda dapat mencari bersih untuk satu atau menggunakan Google Picasa Photo Editing Software . Anda juga dapat menggunakan gambar ubin dengan ukuran kecil yang dapat diulang sehingga untuk menutupi seluruh halaman. Cobalah untuk tidak memiliki file gambar yang terlalu besar sebagai halaman Anda mungkin memerlukan sedikit lebih lama untuk load.
Setelah membuat gambar, anda perlu meng-upload gambar ke sebuah host gratis. Anda dapat membaca tentang menggunakan host gratis seperti Google Page Creator dan Google Groups . Kami juga telah daftar yang agak komprehensif dari Host Gambar bebas dan File Hosting Jasa di artikel kami tentang Mengelola Blogger Image Storage Space . Check out situs tersebut dan memilih satu yang cepat, dapat diandalkan dan memungkinkan hotlinking ke file upload. Mencatat URL gambar.
Selanjutnya, log in ke layout dashboard Anda, di bawah Template -> Edit HTML, gulir ke mana Anda melihat ini: -
body { background: $ bgcolor; |
|---|
Ubah Warna latar
Jika Anda ingin mengubah warna latar belakang blog Anda ke warna yang sangat unik, Anda dapat menentukan secara manual nilai warna. online Search for kode warna, atau mengambil lihat di HTML Color Chart dapat melihat apakah Anda dapat menemukan warna yang diinginkan anda. Misalnya, jika Anda telah memilih kode warna # B38481, ubah kode di atas untuk ini: -
body { background-color: # B38481; |
|---|
Jika Anda mengubah warna latar belakang sidebar saja, tambahkan kode warna di bawah sidebar pos yang relevan.
# Sidebar-wrapper { background-color: # B38481; |
|---|
Demikian pula, jika Anda ingin warna yang berbeda untuk kolom posting utama Anda, tambahkan kode warna sebagai berikut: -
# Main-wrapper { background-color: # B38481; |
|---|
Perhatikan bahwa template yang berbeda mungkin label stylesheet mereka berbeda. # Sidebar-wrapper bisa disebut sisi #-bungkus atau sesuatu untuk efek tersebut.
Dalam beberapa template seperti Template TicTac, warna latar belakang yang Anda lihat adalah karena gambar latar belakang dan menyisipkan kode warna ke template tidak akan menolong. Untuk memiliki warna yang berbeda, gambar latar belakang ini harus diedit.
Tambahkan gambar latar belakang
Kode untuk menyisipkan adalah: -
body { background-image: url (alamat URL gambar Anda); |
|---|
Ingatlah untuk memasukkan alamat URL gambar Anda dalam tanda kurung.Jika Anda ingin memiliki perasaan tentang bagaimana gambar latar belakang akan terlihat seperti, saya upload gambar tes di alamat ini - http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg
Masukkan URL dari gambar ini uji ke dalam kurung di atas dan Pratinjau blog Anda.
Anda juga dapat memiliki gambar latar belakang hanya untuk sidebar. Cari gaya dan menambahkan kode gambar latar belakang sesuai.
# Sidebar-wrapper { background-image: url (alamat URL gambar Anda); |
|---|
Untuk gambar latar belakang ke tubuh anda hanya pos utama, tambahkan kode di sini: -
# Main-wrapper { background-image: url (alamat URL gambar Anda); |
|---|
Ulangi gambar latar belakang
Secara default, gambar diulang untuk mengisi latar belakang seluruh halaman.Jika Anda memiliki gambar kecil atau ubin berukuran, maka akan muncul seperti pola cetak di latar belakang. Kadang-kadang, Anda mungkin memilih untuk tidak memiliki gambar diulang. Jika ini kasusnya, Anda dapat menyisipkan kode ini: -
background-repeat: no-repeat-; |
|---|
Atau, Anda hanya mungkin ingin gambar yang akan diulang horizontal. Kode ini: -
background-repeat: repeat-x; |
|---|
Agar gambar berulang vertikal, kode ini ini: -
background-repeat: repeat-y; |
|---|
Posisi gambar latar belakang
Jika Anda memiliki gambar yang tidak diulang, Anda mungkin ingin menentukan posisi yang tepat dari gambar pada halaman Anda. Kode HTML untuk dimasukkan adalah: -
background-position: top kiri; |
|---|
Gambar Anda akan muncul di pojok kiri atas halaman Anda. Nilai lainnya yang dapat Anda gunakan untuk mengganti "kiri atas" adalah: -
atas pusat; bagian kanan; tengah kiri; pusat pusat; pusat benar; kiri bawah; bawah pusat; kanan bawah;
Jika Anda tidak ingin itu sepenuhnya kiri, kanan atau tengah, Anda juga dapat menentukan keberpihakan horizontal dan vertikal baik dalam persentase maupun dalam pixel. Gunakan salah satu dari nilai-nilai ini sebagai gantinya, dengan xyang mencerminkan nilai horizontal dan y yang mencerminkan nilai vertikal.
y% x%; x px y px;
Statis gambar latar belakang
Setelah itu, Anda dapat menetapkan apakah Anda ingin gambar latar belakang Anda untuk tetap dalam posisi tetap pada saat proses isi blog Anda menggulir.Secara default, gambar gulungan dengan konten Anda. Untuk itu tetap tinggal, kode untuk menyisipkan adalah: -
background-attachment: fixed; |
|---|
Menyatukan semuanya
Kode CSS akhirnya bahwa Anda akan memiliki disesuaikan untuk template Anda mungkin terlihat seperti ini: -
body { background-color: # B38481; background-image: url (http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) background-repeat: no-repeat-; background-position: center center; background-attachment: fixed; |
|---|
Anda juga dapat menggabungkan atribut ke dalam satu baris dan kode singkat akan terlihat seperti ini: -
body { background: # B38481 url (http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) no-repeat center center fixed; |
|---|
Menempatkan kode di atas ke dalam blog saya, inilah yang akan Anda lihat.
Tentu saja, setelah menambahkan gambar latar belakang, Anda akan perlu menyesuaikan warna teks Anda sehingga mereka berdiri menentang latar belakang. Masuk ke Template -> Font dan Warna untuk melakukan itu.
By : Bang Udin
- Cara Merubah Tampilan Google Dengan Nama Sendiri
- Cara Membuat Flash
- Cara Membuat Cursor
- Cara Membuat Loading Blog Ringan
- Membuat Efek Teks Neon Light pada Postingan Blog
- Cara Membuat Menu dengan Icon
- Cara membuat efek mencoret tulisan
- Cara membuat efek stabilo pada posting
- Cara Membuat Banner Berjalan
- Cara Membuat Text Area dengan Fasilitas Select All...
- Cara Memasang Gambar Animation di pojok blog
- Gambar Berjatuhan (falling snow effect)
- Cara Membuat Komentar Terbaru (Recent Comment )
- Cara Pasang Emoticon di Kotak Komentar
- Membuat Vertical Sliding
- Cara Membuat Vertical Sliding Info Panel With Quer...
- Cara Membuat dan Mengganti Fav Icon
- Membuat Gambar Hidup Di Pojok Halaman Blog
Cara mendownload ebook.
- Cara Merubah Tampilan Google Dengan Nama Sendiri
- Cara Membuat Flash
- Cara Membuat Cursor
- Cara Membuat Loading Blog Ringan
- Membuat Efek Teks Neon Light pada Postingan Blog
- Cara Membuat Menu dengan Icon
- Cara membuat efek mencoret tulisan
- Cara membuat efek stabilo pada posting
- Cara Membuat Banner Berjalan
- Cara Membuat Text Area dengan Fasilitas Select All...
- Cara Memasang Gambar Animation di pojok blog
- Gambar Berjatuhan (falling snow effect)
- Cara Membuat Komentar Terbaru (Recent Comment )
- Cara Pasang Emoticon di Kotak Komentar
- Membuat Vertical Sliding
- Cara Membuat Vertical Sliding Info Panel With Quer...
- Cara Membuat dan Mengganti Fav Icon
- Membuat Gambar Hidup Di Pojok Halaman Blog
Cara mendownload ebook.
Tidak ada komentar:
Posting Komentar