whycomputer.com >> Jaringan komputer >  >> Internet

Panduan Membuat Latar Belakang Gradien di WordPress

CSS Cascading Style Sheet memungkinkan penggunaan gradien, sehingga Anda dapat menambahkan latar belakang gradien hanya dengan CSS di situs WordPress Anda tanpa memerlukan gambar terpotong.

Di WordPress, Anda tidak bisa menambahkan gradien langsung ke tag body seperti pada latar belakang solid. Sebagai gantinya, gunakan sebuah elemen div yang membungkus seluruh situs. Banyak tema yang sudah dilengkapi dengan div semacam ini, namun bila tema Anda tidak memilikinya, Anda dapat menambahkannya.

Langkah 1

Masuk ke direktori wp-admin situs Anda dan login ke dasbor WordPress. Buka menu Appearance lalu klik Editor. Klik header.php di bawah heading Templates untuk membuka file HTML yang berisi tag body situs Anda.

Langkah 2

Cari sebuah div dengan id="container" langsung di bawah tag body pada file header.php. Jika tidak ada, tambahkan satu. Berikut contoh struktur yang diharapkan:

<body>
  <div id="container">
    
  </div>

Simak file dengan klik tombol Update File. Bila Anda menambahkan div, buka footer.php di editor dan tambahkan baris berikut di atas </body> untuk menutup div:

</div>

Langkah 3

Buka style.css di editor. Tambahkan kode berikut di bagian paling bawah file:

#container {
  background-color: #038394;
  background-image: linear-gradient(top, #038394, #00CCCC);
  background-image: -webkit-linear-gradient(top, #038394, #00CCCC);
  background-image: -moz-linear-gradient(top, #038394, #00CCCC);
}

Baris kode di atas menyediakan fallback untuk browser yang tidak mendukung gradien. Dengan menetapkan background-image ke linear-gradient, latar belakang gradien akan muncul. Pastikan Anda menentukan arah gradien dan dua warna yang saling bergradasi. Tambahkan baris tersebut dua kali lagi dengan prefix -webkit- dan -moz- untuk Chrome, Safari, dan Firefox.

Tekan tombol Update File untuk menyimpan style.css. Latar belakang gradien kini tampil di setiap halaman situs WordPress Anda.

Tip

  • Atur semua margin menjadi nol pada div container jika Anda melihat ruang putih di sekitar gradien.

URL:https://komputer.whycomputer.com/Internet/101307234.html

Internet
  • Panduan Membuat Kolase Foto di Photobucket

    Photobucket adalah situs web yang memudahkan pengguna komputer mengunggah dan berbagi foto digital mereka. Antarmuka yang ramah pengguna menyediakan berbagai opsi untuk mengedit dan menyimpan foto secara online. Salah satu fitur unggulan Photobucket adalah kemampuan membuat kolase scrapbook profesio

  • Cara Menghasilkan Uang lewat Metacafe

    Internet telah membuka peluang baru bagi siapa saja—baik profesional maupun amatir—untuk menghasilkan uang. Di Metacafe, kesuksesan tergantung pada sedikit keahlian web dan video yang lucu. Berikut panduan lengkapnya. Langkah‑langkah Bergabung dan Menghasilkan Uang Langkah 1: Daftar sebagai Mitra Ko

  • Membuat Situs Web Gratis di Hotmail

    Perlu diketahui bahwa Windows Live Spaces sudah dihentikan sejak 2014. Tutorial ini hanya sebagai referensi historis tentang cara membuat situs web gratis di Hotmail dan menyesuaikannya dengan kebutuhan pribadi atau bisnis. Pengaturan Awal Langkah 1 Masuk ke Hotmail.com menggunakan ID Windows Live d

Jaringan komputer © https://komputer.whycomputer.com