Cara Mudah Membuat Blok Warna 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

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 
 

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

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple