ব্লগারে সুন্দর সুন্দর এলার্ট বক্স যেগুলো আপনি আপনার সাইটে ব্যাবহার করতে পারবেন কোনো কোডিং ছাড়াই। Stylish Alert box for Blogger - peak Fiction

ব্লগারে স্টাইলিশ এলার্ট বক্স এড করার উপায় | Stylish alert box for blogger | Peak Fiction
এলার্ট বক্স নিয়ে এটি আমাদের দ্বিতীয় পোস্ট। আগের পোস্টে আমি কিভাবে আপনারা এলার্ট বক্স এড করবেন তা দেখিয়েছি কিন্তু সেই পোষ্টের মধ্যে কোনো আইকন ছিল না যার কারণে দেখতে একটু খারাপ লাগতে পারে। তবে এই পোস্টে খুব সহজে আইকন সহ কিভাবে এলার্ট বক্স এড করবেন কোনো কোডিং ছাড়াই তা দেখাব। এটি খুবই সহজ এবং রেপন্সিভ। উপরে দেওয়া ছবিতে ডেমো হিসেবে দেখতে পারেন। এর জন্য আলাদা করে কোনো কোড এডিটিং করা লাগবে না।

Stylish alert box blogger html

স্টেপ ১:
আপনার যেই পোস্টে এলার্ট বক্স এড করতে চান সেটি ওপেন করতে হবে এবং "Html View" সিলেক্ট করতে হবে।
নিচে ৪টি কোড দেওয়া আছে সব গুলোই মার্ক করা আছে। আপনার যেই সময় যেই এলার্ট বক্স দরকার তা এখান থেকে কপি করে পেস্ট করে দিলেই হবে। 
স্টেপ ২: 
এরপর আপনার যেই জায়গায় এই কোড বক্স গুলো এড করবেন সেইখানে শুধু পেস্ট করে মার্ক করা জায়গায় আপনার নিজের লিখা লিখে দিন।
<!-- 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>