Buat Box Info, Tips, dan Warning di Website

Hallo sobat rzkyyds.co, kali ini saya akan membagikan cara membuat Box Tips, Peringatan, dan Catatan.

Daripada bingung mau Update Post apa, jadi saya membuat post ini. Bagi yang sudah mahir CSS, pasti sudah tidak asing dengan Code yang akan saya bagikan.

Sebelum liat cara buatnya, liat Demonya dulu nih dibawah :

Kalian semua suci aku penuh dosa

Warnet mank juned ada GTA V

Dijjah yellow cantik

Untuk Box Pertama itu box Info, Box Kedua itu box Tips, Box ketiga itu Box Warning.
Langsung saja Copy code CSS dibawah, dan Pastekan diatas kode </style>

CSS :

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJ_8HpuFxVw-t4rLKHxSYcwntJ62ENDGexXg5qVgQk-KS_58-uM7rbyL7UJjJrQh9wzKAH_k6qg181b4qH8apGaEA37Lf-VXo3ayhaZiyc3vrKM2s2e6XRGr-XCLpJGbP4Nr5Mb9S9j8/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHdf3JFegG80zvxJmieqjFn2bJ95lXkGApqePBViIAzHssmiiGziWl8oU9uBitmRvyTsw3-xdPFvcBG3XvuYtlkklvVWKL_dYgtsdySGy4M5iqftj7WvnHSBKDrp2vZaxuhbpwUAliGc0/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrkKDDZx2KFl9RnaYeoRkaafO-QMnZrZNqe94-z2ffMcu7Md9TNM7kEMsCZgHT2ZdqVlXxgaCA9AyBd_z-1c9tou2_rsfp5gykpgtSWxw7ggNoIcJPGgyumyax_619sJTxO6lif08lP4E/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Penerapan pada Website :

Gunakan code dibawah untuk menerapkan box pada Konten website.

<div class='info'>
Tulis tulisannya disini..
</div>

Yang ini untuk Box Info, kalau mau ganti ke box Warning atau tips tinggal code "info" dengan Warning atau Tips. Sekian dari saya, mudah mudahan kalian bisa memahami, dan juga bisa menerapkan. Jangan lupa klik share.

kiky Saturday, November 12, 2016 script