Membuat Garis Pelangi Dengan CSS di Blog

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..
http://www.ficripebriyana.com/2016/07/membuat-garis-pelangi-dengan-css-di-blog.html
Previous
Next Post »