PENGALAMAN KONYOL SAAT PERTAMA MENERAPKAN CSS KE DALAM ELEMEN HTML TEMA BLOGGER

Saya tidak berhenti belajar dan menulis. Termasuk hal hal baru.

Pengalaman mengajarkan banyak hal, apalagi seorang yang belajar dan melakukan segalanya seorang diri seperti saya, terkadang saya harus melewati banyak kesalahan, kesalahan kesalahan seperti sebuah harga yang harus kita tebus kadang mahal walaupun kadang tidak terlalu menyakitkan juga.

Ada hal hal yang konyol pada saat saya pertama mencoba memasukan kode CSS kedalam template yang sedang saya edit, ketidak tahuan membuat saya melakukannya, contohnya perhatikan kode dibawah ini, saya telah mengamatinya selama berjam jam di halaman HTML blogger dan menandai penggalannya dengan sorot merah:

.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: $(posts.background.color);
min-height: 40px;
padding: 30px 40px;
width: auto;
}

Astaga! Kode tersebut adalah CSS dan CSS memiliki kemampuan mengendalikan warna dan hampir semua bentuk visual template yang terbentuk oleh elemen HTML,  dalam banyak hal, apalagi template Contempo.

Sumber kodenya sendiri saya dapatkan dari teman

Dan, kode tersebut diatas  adalah kode warna latar template Contempo Hybrid yang sedang saya coba edit. Intinya pada logika saya, saya harus menambahkan kode warna HEX, RGB atau semacamnya diantara:

background: <----> $(posts.background.color);

Oleh karena saya ingin merobah warna latar menjadi gradient (kombinasi dua warna halus) maka saya menambahkan kombinasi kode warna CSS yang saya dapatkan dari internet sebagai berikut:

background:-webkit-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-moz-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-o-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-ms-linear-gradient(right,#0F466E0%,#5093C4 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);
height:100px;

Ya itu adalah kode warna gradient seperti yang saya dambakan agar tema editan saya tampak elegan dan terlihat beda. Saya masukan semua dan kelihatannya panjang sekali bukan? Kode ini setelah saya terapkan atau saya tempatkan terlihat begini:

  background: background:#0F466E; background:-webkit-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-moz-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-o-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-ms-linear-gradient(right,#0F466E0%,#5093C4 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);

height:100px; $(posts.background.color);

(saya tempatkan diantara dua kode diatas-diantara kode yang disorot merah). Dan sudah tentu itu sukses merobah warna latar blog menjadi gradient. Saya jadi bangga dong.

KETAHUAN KONYOLNYA....

Hanya saja ketika saya tunjukan pada Anissa yang sedang asik memainkan game di iPhonenya, dia mengernyitkan alis, katanya sesungguhnya saya tidak perlu "merakit" kode sebanyak itu kalau hanya sekedar membuat latar template gradient melalui CSS. sebenarnya hanya cukup:

background: background:#0F466E; background:-webkit-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-moz-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-o-linear-gradient(right,#0F466E0%,#5093C4 75%);
background:-ms-linear-gradient(right,#0F466E0%,#5093C4 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);

height:100px; $(posts.background.color);

Dan dengan dingin dia menghapus  semua kode yang di sorot hitam, katanya itu hanya sampah yang tidak berguna, bagi browser modern. 

Jadi kodenya sebenarnya tidak perlu sepanjang itu alias pendek saja:

background:#0F466E; background:-webkit-linear-gradient(right,#0F466E0%,#5093C4 75%);

 
Dia tanya: Padahal template itu telah dipakai berbulan bulan dengan menyimpan begitu banyak kode sampah didalamnya...?

Namanya juga belajar.

Dan penerapan keseluruhanya apabila sobat ingin merobah latar tema hanya sebagai berikut:

.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: background:#0F466E; background:-webkit-linear-gradient(right,#0F466E 0%,#5093C4 75%); $(posts.background.color);

min-height: 40px;
padding: 30px 40px;
width: auto;
}

 

Satu hal lagi perhatikan juga untaian atau kombinasi kode warna HEX untuk menghasilkan warna gradient ini:

gradient(right,#0F466E 0%,#5093C4 75%);

Perhatikan mengapa yang right, hanya 0% sedangkan  hanya left 75% ? Jangan terbaik right 75% sedangkan lerft 0%  sebenarnya yang right itu boleh diberi nilai prosentasi lebih asalkan tidak melebih besaran nilai yang kiri. Contoh:

Right 12%, left 67% (ok), right 50%, left 50% (tidak ok) warna gradient tidak akan muncul. Untuk membuat satu warna lebih domain dari yang lain sebaiknya dibuat right 25%, left 75%

Belajar membutuhkan proses kadang ketika waktu berlalu ia terasa begitu konyol.