Cara Mudah Membuat Blok Warna Dalam Postingan Blog
Blogger, CSS, Web Programming Edit
Blok warna dalam sebuah postingan blog biasanya digunakan untuk menyoroti kalimat/paragraf tertentu dalam postingan/artikel blog agar terlihat mencolok dan mudah dibaca oleh pengunjung.
Blok warna tersebut biasanya digunakan untuk menunjukan kalimat penting ataupun kesimpulan dari sebuah artikel yang sedang dibahas. Untuk membuat sebuah blok warna tertentu pada postingan blog, kita hanya cukup membuat sebuah "class" baru didalam template blog kemudian memanggil class tersebut pada saat ingin memblok text tertentu dengan warna yang sudah kita definisikan didalam class/CSS yang telahkitabuat sebelumnya. Konsepnya memang sama seperti pada artikel Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog , yaitu membuat class CSS kemudian memanggilnya
Berikut adalah Cara Mudah Membuat Blok Warna Dalam Postingan Blog
1. Seperti biasa masuk ke menu Template > Edit HTML
2. Cari kode <b:skin><
Bila berhasil nanti akan text akan terlihat seperti dibawah ini
Contoh Text yang di blok menggunakan warna orange, untuk mengaktifkannya Anda hanya cukup menambahkan/memanggil "class" kemudian disusul dengan paramaeter nama class
Bila Anda ingin membuat class atau background warna yang baru, Anda hanya cukup membuat class baru untuk backgroundnya kemudian merubah properti warnanya menggunakan warna yang lain
Contoh misal classnya jadi seperti ini
.ahmadganteng{
background-color: #FF0000;
}
Selanjutnya nanti Anda tidak perlu membuat class box shadow ataupun transisinya, jadi Anda hanya cukup menambahkan class "ahmadganteng" ke class "tipsroot" secara berdampingan dengan dipisahkan tanda koma. Jadi nanti properti cssnya akan terlihat seperti berikut
/*Blok Warna Dalam Postingan */
.tipsroot93{
background-color: #E99333;
.ahmadganteng{
background-color: #FF0000;
}
.tipsroot93, .ahmadganteng{
overflow: hidden;
position: relative;
margin: .5rem 0 1rem;
transition: box-shadow .25s;
border-radius: 2px;
color: #fff;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding: 20px;
}
Kesimpulan Jadi untuk membuat blok warna dalam postingan/artikel blog, maka Anda hanya cukup membuat CSS/Class di dalam template kemudian memanggilanya di dalam postingan blog. Kemudian untuk membuat blok warna dengan background lain, Anda hanya cukup membuat class baruuntuk backgroundnya saja
Info bagus nih, Mas.
ReplyDeleteThanks. Mungkin Nanti saya coba di postingan saya selanjutnya.
coba ajah gan... saiapa tahu beruntung
Deletewah lumayan mas....buat koleksi background.....langsung coba ah....
ReplyDeleteLanghsung di praktekin mas, biar nggak lupa
Deletelangsung saja praktekin mas... :D
DeleteJadi keren ya mas blognya makasih nih
ReplyDeleteiya dong kang,,, yang punya nya aja keren :v
DeleteSaya jadi tertarik mengganti warna
ReplyDeleteSupaya blog berwarna bunga
Indah dilihat mata
Dan betah kan sang pembaca,...
Mba ayu memang seorang pembuat puisi sjati,,, komennya saja berirama dan berakhiran 'a" :D
Delete