Cara Gampang Menciptakan Blok Warna Dalam Postingan Blog

Blok warna dalam sebuah postingan blog biasanya dipakai untuk menyoroti kalimat/paragraf tertentu dalam postingan/artikel blog supaya terlihat mencolok dan simpel dibaca oleh pengunjung.

Blok warna tersebut biasanya dipakai untuk mengambarkan kalimat penting ataupun kesimpulan dari sebuah artikel yang sedang dibahas. Untuk membuat sebuah blok warna tertentu pada postingan blog, kita spesialuntuk cukup membuat sebuah "class" gres didalam template blog lalu memanggil class tersebut pada dikala ingin memblok text tertentu dengan warna yang sudah kita definisikan didalam class/CSS yang sudahkitabuat sebelumnya. Konsepnya memang sama menyerupai pada artikel Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog , yaitu membuat class CSS lalu memanggilnya

Berikut yaitu Teknik cepatdangampang Membuat Blok Warna Dalam Postingan Blog
1. Seperti biasa masuk ke hidangan Template > Edit HTML
2. Cari arahan <b:skin><![CDATA[/* dan taruh arahan 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, lalu buatlah sebuah postingan atau artikel baru.
4. Buat sebuah text yang ingin diblok memakai warna tertentu
5. Selanjutnya masuk ke dalam mode HTML
6. Terakhir menambahkan "class" pada bab kode<p>, <div> atau <span>

Bila berhasil nanti akan text akan terlihat menyerupai dibawah ini 
 

misal Text yang di blok memakai warna orange, untuk mengaktifkannya Anda spesialuntuk cukup menambahkan/memanggil "class" lalu disusul dengan paramaeter nama class

Bila Anda ingin membuat class atau background warna yang baru, Anda spesialuntuk cukup membuat class gres untuk backgroundnya lalu merubah properti warnanya memakai warna yang lain 
misal misal classnya jadi menyerupai ini

.ahmadganteng{  background-color: #FF0000; }

Selanjutnya nanti Anda tidak perlu membuat class box shadow ataupun transisinya, jadi Anda spesialuntuk cukup menambahkan class "ahmadganteng" ke class "tipsroot" secara berdampingan dengan dipisahkan tanda koma. Kaprikornus nanti properti cssnya akan terlihat menyerupai diberikut

 /*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 spesialuntuk cukup membuat CSS/Class di dalam template lalu memanggilanya di dalam postingan blog. Kemudian untuk membuat blok warna dengan background lain, Anda  spesialuntuk cukup membuat class baruuntuk backgroundnya saja

Share :