Cara Membuat Box Quotes Peringatan Keren - ACREZY

Saya sering menemui orang memberikan info hanya dengan mem-bold atau memberi efek italic pada kata tersebut.

Menurut saya sendiri hal tersebut kurang menarik, karen bisa saja pengunjung blog mengabaikannya.

Nah, agar terlihat lebih menarik mata pengunjung untuk membaca apa yang kita sampaikan, saya sarankan untuk mempercantiknya.

Pada kali ini saya akan memberikan Cara Membuat Box Peringatan, yang mana akan sangat berguna sekali.

Silahkan ikuti langkah-langkahnya!

Cara Membuat Box Peringatan

---

Letakan kode berikut ini sebelum atau diatas ]]></b:skin> atau </style>

/* CSS Box Peringatan - Acrezy Blog */
.info, .ask, .tips, .warn, .danger, .dl {
font-family: 'Open Sans', "Segoe UI" ,Arial,Tahoma, sans-serif;
font-weight:400;
font-size:14px;
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info, .ask, .tips, .warn, .danger, .dl {
color: #fff
}
.info {
background: #91C9E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsipGJNoM_g93xXrxpFvLexbZJOQDUroUZuRCg8oCiVBcfIz-KIZXlUmHxAcS6B5xFtH4qSklhKGA_G2luW9RP2kDRorKw6V3zFhJ_0qnjY66ItiZeaMeZmy6I6NtNEpTJjRlKkDPPO24l/s1600/info.png) no-repeat 12px 8px;
}
.ask {
background: #7CADDE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8f_smdmY8nADS6e04T0QBzx9oVj-g7xPkMg8gOYlTQQEDKs3NKeZqmZ3zwBJh2Nx1WB_KSEPRj1Z-p31kfO6qnVXF1zQ2Y9-OiRCErFhaL_N55FKA_7GhhafismqQPMtIPhfeZFLclj9Y/s1600/ask.png) no-repeat 12px 8px;
}
.tips {
background: #BFBFBF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTi6VPvFXq9S7M64jfTYKttuBImCLXt0LCLYi3Gy7Od9i5IPk-BIri01yoWUr1v_w9KFtSC5wwZWZzY2q7n5TV_OQrLTiHkEY0xGFM5J6gmjNW-3Ds01SOMPe78NROwWEpPcJnePUK-Ic/s1600/tips.png) no-repeat 12px 8px;
}
.danger {
 background: #DB6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmqUWy2sMDAbEuXfZbbZn2idBdts8wNFzRMg5IyaBUbwRy2V1plxDEWpJF8xWNqcEcLADUa_0dn50GGqR47OzgKra1xmnpO5DVn0WPFC6ZKPmeZY-cPF4YuacjWnfYKqf9m32jYDfVug/s1600/warning.png) no-repeat 12px 8px;
}
.warn {
background: #F4B350 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAmfxkRpHGOFfwc2jkdtCNNfTAb0cm4Rbyl8Gouso_HvKfoH5OYgodRBds54Bb1neBg_Y_kEcSRaisJHYn-jR3zD0BaBlk5W92O5SoPd9zyXgH5-Z67njJ_T58xS3keakJOTyXS-KkZ3mR/s1600/warn.png) no-repeat 12px 8px;
}
.dl {
background: #444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP16RIhzM3ZeSHQAYXFePas9WNSNJEX_HO3qR9mc5rz_u6BvasPU_xLlCii5EeKuvOGQr8QL4UmAI8Mu7xuQA4CK4oKU1YcjKI2wK19dPA0cWoLTFKtIodC0TXG5HL01apl-F_nKKLzA5I/s1600/dl.png) no-repeat 12px 8px;
}

Jangan lupa untuk klik Simpan

Kemudian kode berikut adalah untuk menampilkan Box Peringatannya

Silahkan salin yang kamu perlu lalu letakan pada postingan kamu

Jangan lupa ubah mode Compose menjadi HTML

Untuk perbedaan tiap box silahkan lihat Demo yang sudah saya buatkan

    <div class="info">
Maaf untuk para pengunjung Kita Info, karena kita tidak memiliki info apapun untuk dipublikasi. Jadi sangat percuma jika berkunjung kesini</div>
    <div class="ask">
Jika kamu ada request silahkan berkomentar di Page yang sudah disiapkan atau hubungi kami lewat sosial media</div>
    <div class="tips">
Binggung cara Download? silahkan baca Tutorial yang telah kami buatkan dan untuk menuju kesana silahkan <a href="https://www.blogger.com/faq-page">klik disini</a></div>
    <div class="danger">
Dilarang komentar SPAM, SARA dan Pornografi, silahkan berkomentar dengan baik dan sopan</div>
    <div class="warn">
Jika kamu menemukan link download yang error silahkan langsung komentar di bawah ini. Admin akan segera memperbaikinya, terima kasih!</div>
    <div class="dl">
Beberpa rilisan sudah di update silahkan pilih server GDrive, Bagi kumpul, Mediapi, dan Zipeser untuk mengunduh</div>

Untuk demo dari tiap Box silahkan klik tombol berikut ini

Result

Sekian postingan tentang Cara Membuat Box Peringatan, semoga bermanfaat bagi kamu dan terima kasih telah berkunjung, sampai jumpa!