Blog/web merupakan salah satu cara untuk berbagi ilmu pengetahuan, berita bahkan pengalaman pribadi agar bisa dimanfaatkan oleh orang lain, melihat fungsi dan tujuan blog begitu berbeda-beda pastinya seorang pemilik blog ingin tampilan blognya sesuai dengan isi artikelnya.
Untuk menyesuaikan tema blog dengan isi artikel memang sudah banyak situs-situs penyedia template blogger gratis yang bisa kita download akan tetapi dengan banyaknya template gratis yang bisa kita download juga bersamaan dengan bertambahnya pemilik akun blogger dan bukan tidak mungkin nantinya template yang kita gunakan akan sama di samping itu terkadang seorang blogger juga ingin mengganti background blognya dengan foto milik sendiri bahkan untuk menyesuaikan artikel yang berbeda-beda seorang blogger juga terkadang Membuat Background Berbeda di Setiap Halaman, untuk itu dalam tutorial kali ini kang roni akan memberi cara bagaimana mengganti background gambar blog dengan gambar milik sendiri atau yang kita inginkan.
Sebelum melangkah lebih lanjut saya akan memberi tips bagaimana cara mengetahui perbedaan antara background image dan background yang hanya menggunakan kode warna.
1. Tampilan blog yang menggunakan Background gambar/image
Salah satu cara termudah untuk mengetahuinya sobat tinggal buka blog dengan browser firefox kemudian arahkan panah mouse pada bagian blog tertentu kemudian klik kanan pada mouse disitu sobat pasti akan menemukan tulisan View Background Image tampak jelas dan apabila diklik sobat akan langsung menuju pada link gambar. Lihat gambar dibawah :
Perhatikan lingkaran merah pada dua gambar di atas itu adalah ciri bahwa tampilan blog menggunakan background tipe gambar karena tulisan View Background Image tampak jelas.
2. Tampilan blog yang menggunakan background dengan kode warna
Salah satu cara termudah untuk mengetahuinya sobat tinggal buka blog dengan browser firefox kemudian arahkan panah mouse pada bagian blog tertentu kemudian klik kanan pada mouse disitu sobat pasti akan menemukan tulisan View Background Image tampak kabur/tidak jelas karena tidak terdapat link/url gambar. Lihat gambar dibawah :
Perhatikan lingkaran merah pada gambar di atas tulisan View Background Image tampak kabur/tidak jelas.
Setelah sobat mengetahui perbedaan antara background bertipe image dengan background yang hanya menggunakan kode warna selanjutnya saya akan mengajak sobat untuk mengetahui bagaimana caranya mengganti background bertipe gambar di blogspot dengan gambar milik sendiri.
Cara Mengganti Gambar / Warna Background Blogger
1. Buka halaman utama blog kemudian arahkan mouse dan klik kanan pada gambar yang ingin di ganti, sebagai contoh dalam tutorial ini kita akan mengganti gambar header blog itu berarti sobat harus mengklik kanan pada gambar header seperti gambar dibawah :
Kemudian pilih dan klik View Background Image, setelah itu sobat akan dibawa pada halaman Url/link gambar. Lihat gambar :
Perhatikan garis hijau pada gambar di atas itu adalah link gambar header yang juga ada di dalam template sobat.
2. Setelah sobat mendapatkan link gambar selanjutnya sobat masuk pada halaman Edit HTML dan temukan link tadi, untuk mencarinya sobat tinggal tekan tombol F3 pada keyboard nanti akan keluar kotak pencarian kemudian masukkan link/url gambar header tadi, klik Next dan lihat url-nya langsung kelihatan.
body {propertycss}
atau bisa juga seperti ini
body {
propertycss
}
Di tulisan berwarna merah itulah terdapat property css, misalnya background, width, dan property lainnya. Karena yang ingin diedit adalah background, maka yang diedit adalah value dari property background. Kalau selector body belum ada, cukup ditambahkan saja.Hasilnya akan seperti ini.
body {background:ini value yang akan di rubah;property lain:value lain;}
atau bisa seperti ini
body {
background:ini value yang akan di rubah;
property lain:value lain;
}
Kedua contoh di atas berbeda karena penempatan dan optimasi saja, hasilnya tetap sama. Sobat tidak perlu mengindahkan property dan value yang berwarna hijau, karena saya anggap dalam selector body terdapat banyak property. Fokus hanya pada property dan value background.
Untuk merubah background menjadi warna tertentu, sobat hanya perlu memasukkan kode warna sebagai valuenya. Bisa berupa kode hex, rgb maupun color name yang bisa dibaca browser, misalnya: whitesmoke, grey atau silver. Hasilnya seperti ini :
body {
background:whitesmoke;
property lain:value lain;
}
Pada contoh di atas, saya menggunakan whitesmoke. Untuk warna lain bisa dilihat di color generator.
Jika ingin menggunakan gambar tertentu sebagai background, sobat harus menghostingnya terlebih dahulu. Setelah itu copy dan pastekan direct link gambar ke property background. Sobat harus menambah url sebelum link gambar. Link harus dibuka dan ditutup dengan tanda kurung "(....)". Hasilnya seperti ini :
body {
background:url (link gambar);
property lain:value lain;}
Silahkan ganti link gambar yang berwarna merah dengan link gambar yang sudah di hosting tadi.
Mungkin sobat bingung kenapa harus kedua duanya. Bukankah itu menghabiskan bandwidth?? Penggunaan warna dan gambar sekaligus dimaksudkan untuk mengantisipasi jika suatu saat gambar gagal loading ataupun link salah. Hal ini sangat berpeluang jika gambar yang sobat gunakan bukan dihosting sendiri atau tempat hosting gambar background sedang down. Jadi, saat gambar tidak muncul, maka warna akan menggantikan. Contohnya seperti ini :
body {
background: #f5f5f5 url (link gambar);
property lain:value lain;}
Warna yang digunakan sebaiknya mengikuti warna dominan dari gambar background agar tidak menghilangkan identitas blog. Silahkan ganti warna merah dengan warna dan link gambar anda sendiri.
Saat ini gradient banyak digunakan karena bisa menampilkan banyak warna, secara visual mirip dengan gambar. Padahal itu adalah perpaduan warna yang memerlukan css khusus yaitu gradient. Selain itu, memasang efek gradient sebagai background cenderung lebih cepat ketimbang gambar. Untuk penggunaanya, agak sedikit rumit.
background-image: -webkit-linear-gradient([kode warna] [ukuran pixel], [kode warna] [ukuran pixel]);
Contohnya seperti ini :
body {
background-image: -webkit-linear-gradient(#cccccc 80px, #f5f5f5 20px)
property lain:value lain;}
Warna merah bisa diganti dengan selera masing-masing. Untuk konfigurasi lebih mudah silahkan ke Gradient Generator.
3. Setelah Url/link ditemukan sobat tinggal menggantinya dengan link gambar yang di inginkan.
4. Simpan Template dan lihat hasilnya pada home page.
Semoga cara cara di atas dapat membantu sobat dalam mengedit blog agar tampil lebih baik di mata pengunjung. Penggunaan dan pengkostumisasian gradien maupun css hanyalah sebagai layout.
0 komentar:
Posting Komentar