Home » » Cara membuat blockquote menggunakan CSS gradient di blog

Cara membuat blockquote menggunakan CSS gradient di blog

Pada posting kali ini taukahbahwa.blogspot.com akan menyampaikan posting tentang Cara membuat blockquote menggunakan CSS gradient di blog. Semoga dengan artikel Cara membuat blockquote menggunakan CSS gradient di blog akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com


CARA MENAMBAHKANNYA DI BLOG
  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template-> Edit HTML 
  • Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
  • Berikutnya kopi dan pastekan salah satu kode CSS diatas tepat diatas kode  ]]></b:skin>  

KUSTOMISASI

Ada 2 cara untuk menggunakan Blockquote CSS gradient  ini di postingan blog anda :
  • Dengan cara manual ( di postingan HTML bukan Compose)
<blockquote>isi teks</blockquote>


KODE CSS
blockquote {
background: -moz-linear-gradient(left, #f7ea00 2%, #00c10c 10%, #0072ff 43%, #ff0000 81%, #e000e0 96%);
background: -webkit-gradient(linear, left top, right top, color-stop(2%,#f7ea00), color-stop(10%,#00c10c), color-stop(43%,#0072ff), color-stop(81%,#ff0000), color-stop(96%,#e000e0));
background: -webkit-linear-gradient(left, #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
background: -o-linear-gradient(left, #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
background: -ms-linear-gradient(left, #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
background: linear-gradient(to right, #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
background-color:#F1FDFE;
background-repeat:no-repeat;
background-size:100% 5px;
font-size:16px;
line-height:1.4;
margin:10px auto;
padding:10px;
width:90%;
}




 KODE CSS  

blockquote {
background: -moz-linear-gradient(left, #f4f466 10%, #26c14a 10%, #26c14a 20%, #7db9e8 20%, #7db9e8 30%, #ff0000 30%, #ff0000 40%, #0029e0 40%, #0029e0 50%, #ad9000 50%, #ad9000 60%, #eacf00 60%, #eacf00 70%, #e000e0 70%, #e000e0 80%, #db006d 80%, #db006d 90%, #aad100 90%);
background: -webkit-gradient(linear, left top, right top, color-stop(10%,#f4f466), color-stop(10%,#26c14a), color-stop(20%,#26c14a), color-stop(20%,#7db9e8), color-stop(30%,#7db9e8), color-stop(30%,#ff0000), color-stop(40%,#ff0000), color-stop(40%,#0029e0), color-stop(50%,#0029e0), color-stop(50%,#ad9000), color-stop(60%,#ad9000), color-stop(60%,#eacf00), color-stop(70%,#eacf00), color-stop(70%,#e000e0), color-stop(80%,#e000e0), color-stop(80%,#db006d), color-stop(90%,#db006d), color-stop(90%,#aad100));
background: -webkit-linear-gradient(left, #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
background: -o-linear-gradient(left, #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
background: -ms-linear-gradient(left, #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
background: linear-gradient(to right, #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
background-color:#F1FDFE;
background-repeat:no-repeat;
background-size:100% 5px;
font-size:16px;
line-height:1.4;
margin:10px auto;
padding:10px;
width:90%;
}

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Cara membuat blockquote menggunakan CSS gradient di blog. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/cara-membuat-blockquote-menggunakan-css.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar