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

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

belajar coding adalah wajib bagi seorang yang menginginkan jadi desainer tema blogger
Tapi saya tidak berhenti menulis.

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 desain, 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.

Dan, kode tersebut diatas  adalah kode warna latar template Contempo Hybrid yang sedang saya coba kembangkan. 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 seorang pelajar SMA (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 ekstrem itu, katanya itu hanya sampah yang tidak berguna. Gantian saya yang mengernyit ngernyitkan kening, mencoba mengerti.

Jadi kodenya sebenarnya tidak perlu sepanjang itu alias pendek saja:

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

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

Sebagai jawaban saya hanya nyengir nyengir, namanya juga belajar.

Itulah sebabnya pada saat dimasukan ke minify CSS saya memperhatikan banyak kode menjadi hilang namun tool minify masih memiliki banyak keterbatasan. Pemotongan kode yang tidak diperlukan ternyata  lumayan mempercepat loading blog.

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%);

 Anisa menjelaskan:
Perhatikan mengapa yang right, hanya 0% sedangkan  hanya left 75% ? Jangan terbalik 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%

Saya hanya bisa garuk garuk kepala karena gimana gitu ya... padahal keinginan saya adalah menulis desain yang bersih, rapi dan fast loading.

Beri Komentar ya...

6 Comments

  1. Jadi Annisa tuh masih SMA ?
    Kereeen

    ReplyDelete
    Replies
    1. jago coding yah. Mantap

      Delete
    2. Kurang tau juga 😀 kayaknya orangnya cuek banget. Tapi hampir tau banyak sekali pengetahuan: matimatik, musik, sains.. .

      Delete
  2. Bener juga Annisa, komposisi persentase kiri dan kanan akan menentukan cascading itu sendiri (style)

    ReplyDelete
    Replies
    1. Alhamdulilah sekarang saya mengerti banyak hal, berkat belajar keras. Tidak ada kata terlambat untuk belajar dan juga harus rajin mengikuti forum hack dan koding global.

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik