Membuat Garis Pelangi Dengan CSS di Blog
14.52.00
34 Komentar
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:'';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...
Asik juga nih efeknya, bisa saya coba makasih skripnya mas.
BalasHapusya lumayan lah buat pemanis :D
HapusIya mas pemanis yang elegan. :)
HapusSaya belum pernah coba sih kang yang beginian tapi mungkin ini bisa jadi pengalaman saya untuk mencoba yang pertama kalinya, ahi hi hi.
BalasHapussilahkan di coba kang :D
Hapuswah, bagus gan
BalasHapussemoga bermanfaat gan
Hapusmenarik juga nih untuk di coba :) agar tampilan menjadi berwarna di tidak membosankan :)
BalasHapushehe iya, biar hidupmu lebih berwarna wkwkw :D
HapusMemang nya hidupku ini hitam putih ? :P
Hapuskalau digunakan untuk wordpress yg dirubah bagian mana ya mas?
BalasHapus<style type='text/css'>
Hapus.site-top {left: 0px;position: absolute;content:'';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
ok mas,akan saya coba
HapusGaris pelangi di blog biar tambah manis ya kang blognya... hehehehehehe :D
BalasHapusiya dong, siapa yang gak naksir coba :D
Hapuswidih keren banget garis pelanginya mas... saya comot ya caranya :)
BalasHapussiap, comot mas pake sambel enak =D
Hapusyang kaya gini nih yang saya suka heheh,,,
BalasHapusSaya juga lagi butuh garis untuk di artikel,, cuma garisnya bukan garis kek gitu,, garis biasa aja,,
makasih tutornya kang,,, nambah- nambah ilmu nih :D
wkwkw, garis biasa mah pake solid aja kang :D
Hapuswih! mantap, warnanya indah. bagus buat dijadiin pembatas tulisan. makasih mas ilmunya! :)
BalasHapusiya gan buat pembatas apa aja bisa, asal bisa settingnya hehe :D
Hapusbagus ya jd ceria :)
BalasHapusiya dong, secerianya wajah mba diana =D
HapusUntuk warna menu juga cantik yah dibuat ginian
BalasHapussangat cocok mas buat warna menu... :D
HapusTampilannya jadi cantik ya. sepertinya keren juga kalo diterapkan di blog nih
BalasHapussilahkan dicoba, siapa tau jadi cakep om :D
Hapussepertinya cukup menari nih mas garis pelanginya...lumayanlah buat nambah item di tampilan home....oky trims artikelnya...sukses selalu...
BalasHapuskeren buangeet ya mas hasilnya, terima kasih dah mau berbagi
BalasHapussaya mau coba ni tips nya gan ... :-d
BalasHapusiya silahkan sob
Hapuskeren gan.. (y)
BalasHapusbang minta code komen kyk gini ada ga
BalasHapusini blog berasa rainbow cake hehehe keren bro
BalasHapus