ব্লগারে সুন্দর সুন্দর এলার্ট বক্স যেগুলো আপনি আপনার সাইটে ব্যাবহার করতে পারবেন কোনো কোডিং ছাড়াই। Stylish Alert box for Blogger - peak Fiction
Stylish alert box blogger html
<!-- Warning -->
<div style="padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: flex; align-items: center; background-color: #fff3cd; border-color: #ffeeba; color: #856404;">
<span style="width: 24px; height: 24px; margin-right: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</span>
<div>
<h3 style="margin: 0; font-size: 18px; margin-bottom: 5px;">Warning!</h3>
<p>This is a warning message.</p>
</div>
</div>
<!-- Success -->
<div style="padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: flex; align-items: center; background-color: #d4edda; border-color: #c3e6cb; color: #155724;">
<span style="width: 24px; height: 24px; margin-right: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 14h-2v-2h2v2zm0-4h-2V7h2v5z"/>
</svg>
</span>
<div>
<h3 style="margin: 0; font-size: 18px; margin-bottom: 5px;">Success!</h3>
<p>This is a success message.</p>
</div>
</div>
<!-- Error -->
<div style="padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: flex; align-items: center; background-color: #f8d7da; border-color: #f5c6cb; color: #721c24;">
<span style="width: 24px; height: 24px; margin-right: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M20 2.1l-2.1 2.1C16.9 3.3 14.9 2 12 2c-3.9 0-7 3.1-7 7v5c0 3.9 3.1 7 7 7h5c3.9 0 7-3.1 7-7 0-2.9-1.3-4.9-2.1-6.9zM17 12h-5v1h3c.6 0 1 .4 1 1v1h1v-3zM6.6 7c1-1 2.8-1.6 5.4-1.6 2.7 0 4.6 1.1 5.6 2.1l-1.4 1.4C15.6 8.5 14 8 12 8s-3.6.5-4.8 1.3L6.6 7z"/>
</svg>
</span>
<div>
<h3 style="margin: 0; font-size: 18px; margin-bottom: 5px;">Error!</h3>
<p>This is an error message.</p>
</div>
</div>
<!-- Info -->
<div style="padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: flex; align-items: center; background-color: #d1ecf1; border-color: #bee5eb; color: #0c5460;">
<span style="width: 24px; height: 24px; margin-right: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 14h-2v-2h2v2zm0-4h-2V7h2v5z"/>
</svg>
</span>
<div>
<h3 style="margin: 0; font-size: 18px; margin-bottom: 5px;">Info!</h3>
<p>This is an informational message.</p>
</div>
</div>