Cara Menciptakan Kotak Catatan Berwarna Di Blog

Sering kali saat kita menciptakan sebuah artikel di blog kemudian menambahkan beberapa catatan penting semoga pembaca sanggup mengerti atau paham dengan apa yang disampaikan pada postingan tersebut.

Nah, kali ini aku akan menciptakan sebuah kotak catatan keren dengan warna-warni flat design.

Dengan tampilan kotak catatan yang keren, aku yakin pembaca atau visitor akan lebih gampang mendapatkan dan memahami poin-poin penting yang Anda tulis pada sebuah catatan.

Baik eksklusif saja kita mulai, jikalau Anda tertarik untuk menciptakan kotak catatan dengan warna ini, silahkan ikuti langkah-langkahnya di bawah ini.

Memasang Kotak Catatan Berwarna di Blog

• DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Silahkan Copy kode CSS ini, kemudian Pastesebelum kode ]]></b:skin> atau </style>



/* Material Color Box */  .colorbox{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;font-size:14px}  .colorbox.blue{background:#03a9f4}  .colorbox.green{background:#4CAF50}  .colorbox.red{background:#F44336}  .colorbox.orange{background:#ff9800}  .colorbox.purple{background:#673ab7} 

5. Klik Simpan tema

Untuk menerapkannya pada blog atau postingan, Anda cukup menambahkan salah satu instruksi HTML di bawah ini pada postingan blog Anda di mode HTML bukan Compose:

Kotak Catatan Berwarna Biru

<div class="colorbox blue"> Hello . </div> 

Kotak Catatan Berwarna Hijau

<div class="colorbox green"> Hello . </div> 

Kotak Catatan Berwarna Orange

<div class="colorbox orange"> Hello . </div> 

Kotak Catatan Berwarna Ungu

<div class="colorbox purple"> Hello . </div> 

Kotak Catatan Berwarna Merah

<div class="colorbox red"> Hello . </div> 

Itulah artikel mengenai cara menciptakan kotak catatan warna warni di blog, semoga sanggup bermanfaat.
Sumber https://ramadaniad.blogspot.com/