Membuat Garis Pelangi Dengan CSS di Blog

Membuat Garis Pelangi Dengan CSS di Blog - Ficri Pebriyana

Membuat Garis Pelangi Dengan CSS di Blog - Cara membuat garis di blog warna-warni seperti pelangi di blog memang sangat bagus terlihat lebih berwarna, sebelumnya saya juga pernah membuat artikel mengenai cara membuat efek teks pelangi sekarang saya memberikan tutorial membuat garis pelangi dengan css di blog. Garis ini sangat cocok digunakan untuk di bagian header blog atau bagian footer blog agar desainnya terlihat lebih berwarna dan sangat menarik untuk di lihat oleh pengunjung blog.

Dengan menggunakan CSS tentunya tidak akan membuat loading blog menjadi lambat, berbeda lagi jika kita menggunakan gambar untuk garisnya akan sedikit berpengaruh kepada loading blog kita namun dengan css ini loading blog tidak akan berpengaruh. Membuat garis dengan efek rainbow atau warna-warni di blog tentunya sangat mudah, namun kita harus pandai-pandai memasangnya dan mengatur kode cssnya agar ketika kita pasang di blog tidak terlalu berantakan.

Bagi Anda yang ingin mencoba memasang garis berwarna seperti pelangi ini mungkin bisa mencobanya dengan menggunakan kode css yang saya bagikan ini, untuk demo atau previewnya bisa lihat dibawah ini :


Cara Memasang di Blog :
1. Masuk ke Blogger.com
2. Klik Template > Edit HTML
3. Copy kode CSS dibawah ini, lalu pasang diatas kode ]]></b:skin> atau </style>
.site-top {left: 0px;position: absolute;content:&#39;&#39;;display: block;width: 100%;height: 0.75em;background-image: linear-gradient(to right, #3498DB 0px, #3498DB 13%, #2ECC71 26%, #F4CB0D 39%, #F4CB0D 52%, #E73C91 65%, #9B59B6 78%, #566090 91%);background-repeat: repeat-x;opacity: 0.5;}

4. Kemudian Copy kode HTML dibawah ini, lalu letakan dimana Anda ingin melihat garisnya
<div class='site-top'></div>

Untuk mengsettingnya Anda bisa coba mengganti kode css diatas, untuk mengganti warnanya silahkan Anda bisa gunakan tools Warna HTML.

Sekian artikel mengenai Membuat Garis Pelangi Dengan CSS di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

34 Komentar untuk "Membuat Garis Pelangi Dengan CSS di Blog"

  1. Asik juga nih efeknya, bisa saya coba makasih skripnya mas.

    BalasHapus
  2. Saya belum pernah coba sih kang yang beginian tapi mungkin ini bisa jadi pengalaman saya untuk mencoba yang pertama kalinya, ahi hi hi.

    BalasHapus
  3. menarik juga nih untuk di coba :) agar tampilan menjadi berwarna di tidak membosankan :)

    BalasHapus
    Balasan
    1. hehe iya, biar hidupmu lebih berwarna wkwkw :D

      Hapus
    2. Memang nya hidupku ini hitam putih ? :P

      Hapus
  4. kalau digunakan untuk wordpress yg dirubah bagian mana ya mas?

    BalasHapus
    Balasan
    1. <style type='text/css'>
      .site-top {left: 0px;position: absolute;content:&#39;&#39;;display: block;width: 100%;height: 0.75em;background-image: linear-gradient(to right, #3498DB 0px, #3498DB 13%, #2ECC71 26%, #F4CB0D 39%, #F4CB0D 52%, #E73C91 65%, #9B59B6 78%, #566090 91%);background-repeat: repeat-x;opacity: 0.5;}
      </style>
      <div class='site-top'></div>

      tambahin juga kode css top:0; biar mentok di atas
      coba tinggal pasang saja kode di atas biar gak ribet

      Hapus
  5. Garis pelangi di blog biar tambah manis ya kang blognya... hehehehehehe :D

    BalasHapus
  6. widih keren banget garis pelanginya mas... saya comot ya caranya :)

    BalasHapus
  7. yang kaya gini nih yang saya suka heheh,,,
    Saya juga lagi butuh garis untuk di artikel,, cuma garisnya bukan garis kek gitu,, garis biasa aja,,
    makasih tutornya kang,,, nambah- nambah ilmu nih :D

    BalasHapus
    Balasan
    1. wkwkw, garis biasa mah pake solid aja kang :D

      Hapus
  8. wih! mantap, warnanya indah. bagus buat dijadiin pembatas tulisan. makasih mas ilmunya! :)

    BalasHapus
    Balasan
    1. iya gan buat pembatas apa aja bisa, asal bisa settingnya hehe :D

      Hapus
  9. Untuk warna menu juga cantik yah dibuat ginian

    BalasHapus
  10. Tampilannya jadi cantik ya. sepertinya keren juga kalo diterapkan di blog nih

    BalasHapus
    Balasan
    1. silahkan dicoba, siapa tau jadi cakep om :D

      Hapus
  11. sepertinya cukup menari nih mas garis pelanginya...lumayanlah buat nambah item di tampilan home....oky trims artikelnya...sukses selalu...

    BalasHapus
  12. keren buangeet ya mas hasilnya, terima kasih dah mau berbagi

    BalasHapus
  13. saya mau coba ni tips nya gan ... :-d

    BalasHapus
  14. bang minta code komen kyk gini ada ga

    BalasHapus
  15. ini blog berasa rainbow cake hehehe keren bro

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting