Cara Paling Mudah Membuat Background Gradient

Element website modern terdiri dari Code HTML, CSS, Image dan pilihan bahasa pemrograman untuk membuat website seperti PHP, Java dst. Pada postingan ini saya ingin berbagi kepada anda semua yang ingin tahu bagaimana cara yang paling mudah untuk menciptakan background website/blog anda menggunakan CSS gradient color. Tapi sebelum itu kita bahas mengenai CSS terlebih dahulu.

Apa CSS?

Cascading Style Sheet (CSS) ialah code yang berfungsi pengendali yang mengatur komponen-komponen yang ada disebuah HTML code atau bahasa pemrograman lainnya agar hasil pengcodingan menjadi lebih baik, menarik, simple melalui struktur-struktur (tag) yang terdapat pada CSS Code pada layar komputer kita.

Dengan CSS anda bisa mengatur:

  1. Width, height halaman web
  2. Jumlah kolom halaman website
  3. Warna latar (background) halaman web
  4. Jenis, ukuran, warna, style font yang di gunakan
  5. dst

CSS mengatur HTML, dengan CSS anda bisa mengkreasikan beragam macam style yang anda inginkan sesuai dengan selera tanpa terbatas. Dengan CSS maka penggunaan image yang dulu banyak dipakai pada masa sebelum CSS di buat sudah tidak banyak di gunakan lagi.

ID dan Class Pada CSS

Secara umum penggunaan CSS dikelompokan pada penggunan tag yakni ID atau Class. Penggunaan ID biasanya digunakan untuk mengeneralisasikan seluruh element yang terdapat didalam struktur HTML  dan Class baru di gunakan bila menginginkan hasil penampilan yang berbeda seperti yang diatur dalam CSS untuk ID. Untuk menggunakan Class CSS kita tambahkan <class=”nama”> Contoh:

Tulisan ini menggunakan default CSS untuk mengatur atribut HTML yang terdapat didalam tag ID

Dan tulisan ini dibuat menggunakan Class

 Kode yang digunakan:

.contoh {text-align: center; color: red; background: black; padding: 10px 10px;}  

Anda dapat menambahkan code tersebut kedalam CSS yang anda gunakan

Belajar CSS Lengkap dan Terperinci

Tidak cukup 50 halaman website untuk memberikan tutorial cara mempergunakan CSS dengan lengkap pun demikian anda bisa langsung belajar CSS melalui http://www.w3schools.com/css/

Atau anda juga bisa membeli buku-buku mengenai CSS dan mengikuti kursus Website agar bisa mendapatkan ilmu yang sesuai dengan yang di inginkan.

Cara Mudah Membuat Background Gradient Menggunakan CSS

Setelah anda melihat contoh penulisan CSS menggunkan Class sekarang waktunya untuk membuat background gradient (Gradient background=warna latar website yang terdiri dari beberpa warna) memperguanakan CSS background generator/creator online. Cara yang benar-benar gampang dan gratis adalah dengan mengunjungi:

CSS Gradient Background Maker

Dengan bantuan CSS Gradient Background Maker ini anda bisa langsung memilih warna yang ingin digunakan. Warna bisa anda pilih menggunakan color picker yang telah disediakan didalam website tersebut disamping style yang sudah tersedia tinggal di klik.

Ultimate CSS Gradient Generator

Sama seperti referensi pertama CSS Gradient Background Maker anda tinggal menyesuaikan warna kesukaan, lakukan customize sedikit dan code css pun sudah tersedia tinggal di paste kedalam file CSS yang digunakan

CSS dan SEO

Apakah ada hubungannya antara CSS dan SEO? jawaban saya erat sekali hubungan antara CSS dan SEO. Di dalam SEO CSS bisa kita gunakan sebagaimana mestinya dan bisa juga digunakan untuk tidak semestinya misalnya: membuat hidden text, hidden link dan seterusnya yang kemudian disebut dengan tekhnik-tekhnik BlackHat SEO yang saya sebut dengan tekhnik BlackHat SEO Tradisional Warisan Dinasti Ming.

Karena itu sebaiknya setelah anda membuat website menggunakan CSS periksakan website anda ke halaman http://jigsaw.w3.org/css-validator/ dihalaman ini kita tidak saja diberitahu bila ada kesalahan dalam penulisan tapi juga akan diberitahu bila ada penggunaan CSS yang dapat menyebabkan website termasuk kedalam website yang menggunakan tekhnki CSS Blackhat SEO

Tips CSS Untuk SEO

Biasanya kita menempatkan file CSS kedalam sub folder yang ada didalam folder themes bila demikian maka code yang digunakan didalam HTML/PHP page anda berupa “link” seperti:

<link href=”css/menu.css” rel=”stylesheet” type=”text/css” />

Bila seperti ini maka browser akan bekerja 2x yakni mengakses HTML page anda dan file CSS yang anda simpan di sub folder berbeda. Akan lebih baik bila browser hanya bekerja 1x agar load website anda menjadi lebih cepat. Caranya adalah dengan “injection” CSS code kedalam page HTML.

Pengaplikasian CSS menggunakan tekhnik ini bisa berupa CSS, Font yang anda embed dari Google Font atau bahkan bila anda menggunakan web hosting yang di kombinasikan menggunakan tekhnologi CDN.

Bila anda mau melakukan ini sebaiknya pelajari bahasa pemrograman terlebih dahulu, backup file asli dan baru setelah itu lakukan kustomisasi/penyesuaian.

JAVA Script

Hati-hati dengan yang satu ini karena Java bisa menyebabkan proses crawling terganggu yang berakibat pada SERP. Selain itu Java bisa menyebabkan proses rendering menjadi lebih lambat.

Oleh sebab itu bila anda harus menggunakan Java berupa link sebaiknya pindahkan Code Java anda kebagian footer agar proses rendering lebih cepat. Bila anda melihat adanya fitur chat Zopim (yang mana dibuat menggunakan Java) di web ini saya menginject java snipet dari Zopim Live Chat kedalam div footer sebelum </body>

Comments on this entry are closed.