October 25, 2012

Apabila sobat sudah pernah melakukan teknik yang saya uraikan sebelumnya yaitu Cara Mengganti Background Header Pada Template Standar Blogger baca disini, dalam uraian tersebut bahwa teknik yang dilakukan adalah mengganti background header dengan menggunakan gambar, maka pada kesempatan ini kita akan melakukan pergantian  atau mengganti background header dengan warna latar gradasi menggunakan kode CSS seperti gambar diatas, sehingga membuat loading blog tidak terlalu berat dan sangat begitu cepat loading ketika blog di buka.

Dalam uji coba yang saya lakukan ketika menggunakan gambar dengan ukuran yang besar tanpa di kompres atau melakukan resize pada gambar tersebut, dimana sangat membuat loading blog ini begitu berat, namun setelah saya uji coba menggunakan kode CSS loading blog inipun mengalami perubahan yang signifikan. Mengganti background header menggunakan warna latar gradasi yang dapat sobat lihat pada blog ini atau contoh gambar diatas sangat jarang dilakukan pada blog lain, dan kebanyakan hanya menggunakan satu warna saja, contoh : warna hitam, namun adapula blog yang suka menggunakan warna latar gradasi sebagai latar background header dan background utama.

Penggunaan warna latar gradasi dengan mengunakan kode CSS ini, ketika di buka memakai Mozila kadang warna yang dihasilkan tidak sesuai ketika browsing mengunakan Internet Explorer atau browser lain, karna saya sendiri saat ini menggukan Mozila. Oleh karena itu dengan berbagai pertimbangan kode CSS yang nantinya akan digunakan sudah mendukung untuk semua tampilan pada browser yang sobat pakai, sehingga apabila dibuka menggunakan browser yang lain seperti Internet Explorer, Opera dan lain-lain maka hasil yang di tampilkanpun akan sama.

Kita kembali ke topik pembahasan, adapun beberapa warna latar gradasi yang telah saya sediakan disini dapat sobat lihat pada contoh gambar di bawah ini :

Untuk mengganti background header sebaiknya baca terlebih dahulu artikel sebelumnya yang pernah saya terbitkan sehingga mudah untuk melakukan cara atau teknik yang akan disampaikan dibawah ini dan bagi yang sudah terbiasa atau mahir dalam editing template mari kita kerjakan langkah-langkah berikut :

Pertama, login ke akun blog blogger sobat.
Kedua, pilih Template.
Ketiga, untuk menjaga template, silahkan download template, klik Dawnload Template Lengkap yang berada pada samping pojok kanan.
Keempat, klik Edit HTML, klik Lanjutkan, kemudian jangan lupa untuk Expand Template Widget.
Kelima, gunakan Ctrl + F Cari kode berikut pada template anda : .header-outer {

Struktur susunan template yang saya uji coba yaitu pada template standar blogger Jendela Gambar yang tampak seperti kode dibawah ini : 


.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;

color: $(header.text.color);

-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

Untuk mempermudah fokuskan pencarian pada .header-outer { , jika sudah ditemukan perhatikan struktur kode dibawah ini,  hapus mulai dari bagian yang telah diberikan tanda :

.header-outer { 
hapus dari sini >>>>| background: $(header.background.color) $(header.background.gradient) |<<<< sampai pada bagian ini.

repeat-x scroll top left;

Lalu masukkan dan copy salah satu kode CSS di bawah ini sesuai warna yang sobat perlukan, kemudian letakkan pada struktur template yang sudah sobat hapus tadi.

Kode CSS Black Gloss:

background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */


Kode CSS Brown Gloss:

background: rgb(240,183,161); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */


Kode CSS Blue Pipe:

background: rgb(208,228,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9


Kode CSS White Gloss:

background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */

Keenam, klik Pritinjau untuk melihat tidak terjadi kesalahan eror pada saat edit template, jika sudah klik Simpan Template dan lihat hasilnya.

Perlu diketahui : Pertama, penggunaan warna latar gradasi yang telah saya jelaskan sebelumnya bahwa percobaan diatas dilakukan atau telah di uji coba menggunaan template standar blogger Jendela Gambar dan apabila sobat menggunakan template oleh atau dari pihak ketiga cara inipun bisa, tetapi perlu memahami bagian dari struktur template yang sobat gunakan agar tidak terjadi kekeliruan.
Kedua, setelah teknik ini dilakukan silahkan mencoba membuka dengan browse lain yang digunakan pada komputer sobat.

Selamat Mencoba. Sekian dan Terima Kasih. Salam

Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Cara Mengganti Background Header Dengan Warna Latar Gradasi Menggunakan Kode CSS diposting oleh Kraeng Francisco pada October 25, 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

31 comments:

  1. Salam sahabat; makasih ya, tipsnya sangat bermanfaat bagi saya. Siapa tahu, suatu saat nanti saya berniat merubah tampilan header blog saya dengan BG CSS color. By the way, saya follow andika #45 (lina cahndeso), bila berkenan sudilah follow balik. Toast, Brur....

    ReplyDelete
    Replies
    1. Silahkan sob, apabila di perlukan...Blog sobat sudah lama saya Follow dan mungkin sobat belum memerikasa kembali. Trima kasih. Salam

      Delete
  2. wes mantep nih sob,komplit dengan kode css
    saya mau pelajari dulu,soalnya template q hasil download
    mksh infonya sob

    ReplyDelete
    Replies
    1. Silahkan sobat...apabila berkenan menerapkan Trik ini, Trima kasih. salam

      Delete
  3. Saya sebenarnya suka dengan gradient, gan. Permasalahannya, saya kurang/belum bisa menyesuaikan kontras warna sehingga cuma akrab dengan warna-warna natural. Meskipun ada yang menggunakan gradient, itupun persentasinya sangat kecil untuk elemen-elemen tertentu.

    ReplyDelete
    Replies
    1. gpp sobat, sementara warna yang di hasilkan pada blog ini sudah cukup menurut saya walaupun demikian bukan berarti suatu saat saya akan merubahnya kembali. Trima kasih sob.

      Delete
  4. Wah,,, mantap gan,, nambah lg ilmu sya brkat sahabat,.. bsa d coba neh...
    Happy blogging sahabat.. :)

    ReplyDelete
    Replies
    1. berbagi itu indah sob dan senang bisa berbagi ilmu. semoga apa yang saya terapkan disini dapat bermanfaat bagi semua. Trima kasih, salam.

      Delete
  5. sebenarnya pengen ganti pake gambar tapi gak tau caranya,,yang ini sangat membantu

    ReplyDelete
    Replies
    1. Ok sobat, apabila ingin menerapkan dengan cara ini silahkan. Salam

      Delete
  6. Hehe...simple dan mudah dimengerti nih tipsnya.Thks Mas :)

    ReplyDelete
  7. Sob ada saran dikit nihh, judul header mu bisa dikasih dengan efek text shadow dengan keren dan tanpa efek loading apa-apa, coba di sini sob. Salam blogger.

    Jangan lupa visit D-Copy Blog lagi.

    ReplyDelete
    Replies
    1. boleh juga itu, saran yang bagus. Trima kasih

      Delete
  8. Lumayan ,tapi ane sudah sreg sama themes blog ane hehe Mantab

    ReplyDelete
    Replies
    1. Sudah saya kunjungi blog sobat, Tetap dipertahankan bila menurut sobat itu yang terbagus, Thx kunjungannya shabat.

      Delete
  9. follow back sukses sobat...semangat terus yaa bloggingnya sobat...

    ReplyDelete
    Replies
    1. Trima kasih sudah berkenan Folback. Salam

      Delete
  10. thank Tutornya sob .. Gue baru Bikin Blog sob .. bila berkenan "Join this site" ..

    ReplyDelete
    Replies
    1. Sama-sama dan Terima kasih sudah Follow Blog Kraeng Francisco yg sederhana ini.

      Blog sobat sudah saya folback.

      Salam....

      Delete
  11. Gue selalu terbentur bila ada pengeditan di code ini .header-outer { dan banyak code"lainnya yg ga ada di Edit HTML gue .. mungkin ini di karenakan Blog baru sekarang menggunakan Kode" baru jadi ga sama .. :( , sementara gue simpan dulu tutornya .. pasti berguna di suatu saat ,,

    Thanks Folbacknya .. :) ..salam balik ..

    ReplyDelete
    Replies
    1. Betul sobat seperti yg saya jelaskan bahwa percobaan ini saya lakukan pada template standar blogger , apabila sobat tidak menemukan kode tersebut coba cari kode header saja pada template sobat dan perhatikan kode seperti dibawah ini :

      /* Header
      ---- */
      nah dibawah kode tersebut perhatikan struktur pada template sobat dan lakukan seperti yg sudah saya jelaskan ditas, dilakukan penambahan background tersebut.

      Semoga dapat membantu sobat.

      Delete
  12. Mantap banget kang makasih tutorialnya. salam kenal dan salam blogger

    ReplyDelete
  13. wahh mantap ni sob,,nambah ilmu bagi ane yg pemula ni,,kunbal ya mohon sarannya..tks.

    ReplyDelete
  14. Makasih bos atas sharenya.. langsung dicoba deh..

    ReplyDelete
    Replies
    1. ia sob sama-sama dan semoga blog sobat lebih bagus dari sebelumnya.

      Delete
  15. Mantap info2nya sob... thx
    Salam kenal :)
    visit me back blog baru sy ya di whatskpop.blogspot.com

    ReplyDelete
    Replies
    1. Sama-sama sob, semoga trik diatas bermanfaat. Salam

      Delete