Triks CSS background template blogger

Era website modern adalah berkembangnya teknik HTML dan pengaturan CSS yang membuat desain bertambah seru, ramah, sederhana dan ringan. Dan peranan CSS menjadi semakin besar porsinya di dalam template berbasis HTML.

Css bundle untuk background blog


Betapa tidak, suatu untaian perintah atau pengaturan CSS dapat merobah tampilan halaman blog menjadi berbeda dan memberikan sentuhan pengalaman yang berbeda kepada pengunjungnya. Contohnya CSS yang dapat di timpakan (override) ke dalam pengaturan halaman HTML template  blog berikut, dapat merobah background header bagian atasnavigasi blog seperti yang di tampilkan pada halaman blog editblogtema:

header { background: linear-gradient(-50deg, #660066, #FFB6C1, #CC0066, #87CEFA);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 11s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}};font:$(Unifraktur Maguntia);font-size:17px;color:#fff;text-transform:uppercase}
padding: 5px;
border-radius: 10px 0px 0px 0px;
}
nav {
width: fit-content;
background: black;
margin: 20px auto;
padding: 0px;
}

Perhatikan kode warna merah 'header' jika di robah menjadi 'body' maka background halaman blog-lah yang akan berubah. Mengapa? Karena itu adalah perintah yang langsung di tujukan pada struktur atau bagian utama suatu template.

Adapun bagian template HTML itu tidak jauh jauh dari susunan berikut:

struktur dasar template blog

Jadi dengan merobah perintah dari header{ ke body{ ke sidebar{ sesuai dengan class atau ID penulisannya di dalam template, kalian dapat merobah warna bagian manapun di pada tampilan halaman blog yang diinginkan.

Cara memasang atau meletakannya ke dalam template adalah sebagai berikut:
  • Masuk ke dalam pengaturan blogger
  • Pilih Tema
  • Pilih Edit HTML
Di dalam halaman editor HTML blogger cari kode ]]></b:skin dan letakan kode CSS di atas tepat di atas kode yang baru saja kita sebutkan tadi. Silahkan merobah warna dengan menggangi kode warna yang saya tulis biru pada kode CSS di atas. Jangan lupa save template.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

6 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...


  1. Gimana cara buat background animasi css

    BalasHapus

  2. Sip aku ambil kodenya buat koleksi. 👍

    Skrg blogku templatenya gak pakai thumbnail maupun related post, jadi lebih ringan, pagespeed 0.6 detik selaju motorGP 🤣

    Tapi aku kurang paham soal second dan milionsecond (ms) yg paling cepat yg mana ya?

    BalasHapus
    Balasan
    1. wow, keren sec sama ms tentu ms yang lebih cepat karena mampu menempuh waktu lebih singkat...Itu biasanya berlaku pada satuan waktu termasuk keepatan rana pada saat pengambilan gambar melalui kamera DSLR...ya kan.

      Hapus
    2. Hihi iya aku sempat bingung waktu ngecek LCP di Gmetrix, sebelum saya buang gambar LCPnya 0.7 s pas gambar dihidden kok jadi 400an ms, saya ga perhatikan tulisan s/ms nya, cuma fokus lihat angka 400'an, waduh pikir saya kok hidden gambar malah makin berat yg tadinya 0.7s jadi 400ms hihi ternyata ms lbh cpt daripada s 🤣

      Hapus
    3. Sebenarnya gambar tidak terlalu memberatkan loading halaman asalkan :

      1.jelas ukuran dimensinya
      2.format gambar terbaru spt webp, jpg dst.
      3.tidak melebihi 80kb..

      Ini berdasarkan pengalaman saja yoi

      Hapus
Lebih baru Lebih lama

Formulir Kontak