Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

27
Tgl. 26 Mei 2012

Cara Mengganti Background Halaman Blog Dengan Warna Latar Gradasi

Ilustrsi Tampilan Halaman Blog
Apabila sebelumnya Anda sudah pernah membuka halaman blog ini, pastilah sekarang Anda akan melihat bahwa Semar Bingung’s Weblog telah memiliki tampilan halaman yang sangat jauh berbeda dengan desain tampilan halaman yang digunakan sebelumnya. Ini disebabkan karena beberapa waktu yang lalu saya telah melakukan perubahan desain dan tata letak widget serta tampilan untuk halaman blog ini. Perubahan yang saya lakukan diantaranya adalah menghapus halaman ‘Tukar Tautan’, kemudian memindah banner serta tautan yang ada di dalamnya ke beberapa widget yang saya tempatkan di area footer, dan juga beberapa perubahan untuk widget yang ditampilkan pada sidebar halaman.

Disamping itu perubahan juga saya lakukan pada beberapa elemen halaman yang lain, dalam hal ini adalah pemberian bingkai dan penggunaan background dengan warna gradasi untuk masing-masing elemen tersebut. Tujuan dari pembenahan yang saya lakukan, tidak lain adalah untuk memberikan kemudahan dan kenyamanan kepada setiap pengunjung yang membuka halaman ini, sehingga akhirnya mereka merasa lebih betah berada di sini untuk membuka dan membaca setiap artikel yang ada. Selain itu pembenahan yang saya lakukan tersebut juga saya maksudkan agar tautan atau banner sahabat yang semula terdapat di halaman ‘Tukar Tautan’ dapat dengan mudah dilihat oleh pengunjung dengan cara memindahnya ke halaman ‘Beranda’, karena pada kenyataannya menurut analisa data statistik kunjungan yang ada, halaman ‘Tukar Tautan’ sangat jarang dibuka oleh pengunjung. Dengan demikian maka apabila tautan atau banner sahabat diletakkan di halaman depan atau beranda, maka akan memberikan peluang lebih besar untuk dibuka oleh pengunjung karena tautan atau banner tersebut dapat langsung dilihat ketika membuka halaman ‘Beranda’.

Oke, sekarang kita kembali pada pokok bahasan yang sebelumnya, yaitu tentang perubahan atau pembenahan yang saya lakukan untuk tampilan halaman blog ini. Seperti yang telah saya sebutkan di atas, bahwasanya perubahan saya lakukan untuk berbagai elemen yang ada. Dimana salah satunya adalah penggunaan warna gradasi sebagai background untuk masih-masing elemen tersebut. Nah, terkait dengan penggunaan warna gradasi sebagai background, maka dalam artikel ini saya akan menguraikan cara yang digunakan untuk mengubah atau mengganti background halaman blog dengan warna gradasi, karena ulasan untuk penggunaan warna gradasi pada elemen halaman yang lainnya telah saya terbitkan di blog saya yang lain (dalam hal ini saya terbitkan di ‘ILMUDI BLOG’ dalam kategori artikel ‘Pemrograman’), yang diantaranya adalah artikel dengan judul 1) Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog, 2) Cara Membuat Background Dengan Kombinasi Warna Pada Elemen Halaman Blog, 3) Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background, dan 4) Cara Membuat Tombol Read More Dengan Bingkai Efek Warna Background Gradient.

Jadi begini, apabila kita akan mengganti background halaman dengan warna gradasi, maka terlebih dahulu yang perlu kita perhatikan adalah apakah saat ini halaman blog yang kita kelola menggunakan gambar sebagai background atau tidak. Jika saat ini halaman blog yang kita kelola menggunakan gambar sebagai background, maka terlebih dahulu gambar yang digunakan sebagai latar atau background tersebut harus dihapus atau dihilangkan dengan cara: buka menu ‘Template> klik ‘Ubahsesuaikan’ untuk membuka ‘Perancang Template Blogger> klik menu ‘Latar Belakang> dan kemudian klik ‘Hapus Gambar>OK> dan kemudian klik tombol ‘Terapkan ke Blog’ yang terletak di bagian pojok kanan atas halaman. Nah, selanjutnya apabila gambar latar sudah dihapus, klik ‘Kembali ke Blogger’ untuk mengerjakan langkah yang berikutnya.

Setelah kembali ke Blogger, langkah berikutnya klik ‘Edit HTML> klik ‘Lanjutkan> cari kode background: $(body.background); dan kemudian ganti kode tersebut dengan kode CSS untuk membuat warna gradasi. Dimana sebagai contoh kode CSS untuk membuat warna gradasi, misalnya adalah seperti kode di bawah ini.
background: #1f74bf; 
background: -moz-linear-gradient( center top, #1f74bf 60%, #ffffff 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #1f74bf), color-stop(1, #ffffff) );
background-attachment:fixed;

Perhatikan bahwa kode tersebut merupakan kode CSS untuk warna gradasi yang digunakan untuk background halaman ini, sehingga apabila diterapkan maka akan menghasilkan warna background seperti yang tampak pada blog ini.

Kombinasi warna yang digunakan dalam rangkaian kode tersebut adalah warna biru dan putih, sehingga apabila ingin menerapkannya pada halaman blog yang Anda kelola, bisa jadi kombinasi warna yang digunakan perlu disesuaikan terlebih dulu dengan desain tampilan halaman blog Anda. Dalam hal ini penyesuaian dapat dilakukan dengan cara mengganti kode #1f74bf dan #ffffff dengan kode warna yang sesuai. Dan sebagai contoh kombinasi warna gradasi, dapat Anda lihat dengan membuka artikel yang saya posting di ILMUDI BLOG (ilmudi.blogspot.com), dalam hal ini pada artikel yang saya posting dalam kategori ‘Pemrograman’ dengan judul ‘Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background’.

Sedangkan untuk persentase gradasi, dapat Anda sesuaikan dengan mengubah angka 60% dengan persentase gradasi yang Anda inginkan. Dan satu hal yang perlu diingat adalah, jangan mengganti atau menghapus kode background-attachment:fixed; karena kode tersebut dipakai untuk menjadikan background berada pada posisi yang tetap terhadap halaman browser yang digunakan. Sehingga dengan demikian dapat diartikan bahwa background tidak akan mengikuti pergerakan halaman posting ketika halaman posting digulung ke atas maupun ke bawah.

Semoga berguna serta bermanfaat, dan selamat bereksperimen.
Salam.


Katagori: ,
Terdapat 27 komentar pada artikel ini ▶
27/05/12, 17.39 O

boleh juga kawan tips dan triknya :)

Anonim
28/05/12, 00.09 O

@BlogS of HariyantoTerimakasih Sob. :)

06/06/12, 20.17 O

bagus banget blog dengan tampilan backgroud gradasi.

Anonim
25/06/12, 12.54 O

mantab infonya

20/07/12, 05.28 O

artikel menarik,
dan dapat diterapkan dengan chrome,
mohon info lanjutan bagaimana agar hasilnya bisa juga nampak di mozilla firefox

Anonim
21/07/12, 01.49 O

@m hariyantoSobat, teknik ini juga dapat berfungsi pada Firefox, karena kebetulan saya juga memakai browser tersebut.

21/07/12, 20.58 O

ternyata ada kesalahan sedikit dalam penulisan code,
sekarang blog saya (HUKUM KEHUTANAN)terlihat lebih menarik dengan baground gradasi warna baik dengan chrome maupun firefox

09/08/12, 15.00 O

sudah di terapkan..
mantap mantap..
makasih gan atas tutor nya :D

Anonim
09/08/12, 22.36 O

@vie and joeTerimakasih pula atas kunjungan dan komentarnya, Sobat.

15/08/12, 09.49 O

Bila kita sering melakukan perubahan pada template pengaruhnya bagaimana terhadap, posisi blog kita di search engine?

15/08/12, 23.06 O

@goez iniMenurut sepengetahuan saya, apabila perubahan yang dimaksud adalah untuk pembenahan tema atau desain pada template yang sama, maka tak akan berpengaruh terhadap posisi blog dalam SERP.

Berbeda halnya apabila perubahan yang dimaksud adalah pada bagian meta tag. Maka perubahan yang seperti ini sedikit banyak akan mempengaruhi posisi blog dalam SERP.

Sekian dan salam.
CMIIW

31/08/12, 01.06 O

PEMBERITAHUAN
-------------

Pembaca yang terhormat, perlu diketahui bahwasanya telah dilakukan update untuk artikel ini. Dimana update yang dimaksud dapat Anda lihat dalam artikel berikut ini:

"[UPDATE] Cara Membuat Warna Latar Gradasi Untuk Background Halaman Blog"

Sekian, terimakasih, dan salam.

22/09/12, 09.36 O

Thx infonya Mas.

22/09/12, 21.47 O

@CiptaragamkaryaSama-sama Sobat. Terimakasih balik atas kunjungan dan komentar yang telah diberikan. :)

Anonim
06/10/12, 19.24 O

Thans atas infonya gan mantep banget nih jangan lipa yah mampir ke blo aqhuuuuuuuu hehehehehhe

06/10/12, 22.26 O

@agus tianaSama-sama. :)

11/10/12, 00.04 O

Berhasil juga saya mengubah backgroud blog saya. Makasih banyak tutornya mas.

Salam kenal dari Direktori Penerjemah Indonesia.

11/10/12, 09.44 O

@Direktori Penerjemah IndonesiaSama-sama Sobat.

Salam kenal balik dan terimakasih atas berkenannya mengeposkan komentar dalam artikel ini.

01/12/12, 12.55 O

Ciamik gan, satu lagi artikel anda yang bermanfaat bagi blog saya,

05/12/12, 03.37 O

@Hari AgustianSyukurlah bila dapat diambil manfaatnya, Sob. :)

22/01/13, 11.04 O

makasih ya triknya....
tambah sukses blognya sob...

22/01/13, 22.42 O

@Ahmad Kali AkbarSama-sama Sobat.

Terimakasih dan sukses balik untuk Sobat. :)

24/01/13, 14.42 O

Terimakasih mas atas berbagi informasinya, saya coba dulu yah, kebetulan lagi butuh buat ganti background.

24/01/13, 18.59 O

@mariyanto widodoSama-sama Sob.

30/01/13, 13.37 O

@Vie TebeTerimakasih dan salam kenal balik Sobat.

05/10/13, 14.19 O

siph gan, saya coba dulu di blog saya... jngn lupa mampir juga ya sob, ditunggu

06/10/13, 19.54 O

@ibnu uzerOke, silakan Sob. :)