Caranya Membuat Blok Warna di Dalam Postingan Blog
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
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><![CDATA[/* dan taruh kode ini dibawahnya atau taruh pada pada sekitar susunan CSS yang sudah ada dalam template blog
/*Blok Warna Dalam Postingan */
.tipsroot93{
background-color: #E99333;
}
.tipsroot93{
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;
}
3. Simpan template, kemudian buatlah sebuah postingan atau artikel baru.
4. Buat sebuah text yang ingin diblok menggunakan warna tertentu
5. Selanjutnya masuk ke dalam mode HTML
6. Terakhir tambahkan "class" pada bagian kode<p>, <div> atau <span>
Bila berhasil nanti akan text akan terlihat seperti dibawah ini
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;
}