আজ শুধু ব্লগস্পট নয়, নিয়ে এলাম ব্লগস্পট এবং ওয়ার্ডপ্রেস উভয় প্লাটফর্মে তৈরি যেকোন ব্লগের জন্য মেট্রো স্টাইলের আকর্ষণীয় Alert Box । আপনারা অনেক ব্লগের পোস্টের মাঝে বিভিন্ন রকম নোটিশের Alert Box দেখতে পেয়ে থাকেন। এগুলোকেই ব্লগের Alert Box বলা হয়ে থাকে। পোস্ট সম্পর্কিত কোন তথ্য হাইলাইট করে তুলে ধরার জন্য এই বক্স ব্যবহার করতে পারেন। আজ আপনাদের সাথে শেয়ার করছি চার ডিজাইনের ভিন্ন চার ধরনের Alert Box যথাক্রমে Error Message Box, Success Message Box, Warning Message Box এবং Information Alert Box। Alert Box ডেমো লিংক ।

কিভাবে ব্লগে Alert Box যোগ করব?

• আপনি ব্লগস্পট ব্লগের ব্যবহারকারী হয়ে থাকলে ব্লগস্পট ড্যাশবোর্ড থেকে Template > Edit HTML অপশনে গিয়ে টেমপ্লেটের কোডগুলো থেকে ]]></b:skin> কোডটি খুঁজে বের করুন এবং কোডটুকু খুঁজে পেলে এই কোডটির উপরে নিচে দেয়া কোডগুলো বসান।

.info, .success, .warning, .error {
background-repeat: no-repeat;
background-position: 10px center;
border: 1px solid;
margin: 10px 0;
padding: 14px 9px 14px 48px;
}

.info {
color: #0D81E9;
background-color: #C8E9F8;
background-image: url(http://2.bp.blogspot.com/-d2cv8pI-jfM/Ulw6L5EShdI/AAAAAAAAFK4/oFwO7EjbdME/s1600/tbm_info.png);
}

.success {
color: #0D8F07;
background-color: #E5FAC3;
background-image: url(http://2.bp.blogspot.com/-xMBjARKE2dU/Ulw6Lwjm6PI/AAAAAAAAFLA/CIl8ftuS3ho/s1600/tbm_success.png);
}

.warning {
color: #DD8500;
background-color: #EBDCA3;
background-image: url(http://4.bp.blogspot.com/-pZIq9VNFwjU/Ulw6MmosfPI/AAAAAAAAFLQ/EttTXiUCK4w/s1600/tbm_warning.png);
}

.error {
color: #DF000C;
background-color: #F5C8C8;
background-image: url(http://4.bp.blogspot.com/-KG0amzHF73Y/Ulw6LxQOepI/AAAAAAAAFK8/f4fWxfCBVOE/s1600/tbm_error.png);
}

• এবার টেমপ্লেটটি  Save করুন।
• ব্লগস্পট ব্লগের জন্য এটাই ছিল প্রাথমিক কাজ। তাই একটু বিশ্রাম নিন। ততক্ষনে ওয়ার্ডপ্রেস ব্যবহারকারীদেরকেও তাদের ধাপটি শিখিয়ে দেই।
• হুম, এবার আসি ওয়ার্ডপ্রেস প্লাটফর্মে। যারা ওয়ার্ডপ্রেসে ব্লগ বানিয়েছেন এবং এই বক্সটি ব্লগে যোগ করতে চাচ্ছেন তাঁরা ওয়ার্ডপ্রেস ড্যাশবোর্ডে Appearance > Editor > style.css অপশনে যান এবং উপরে যে সিএসএস কোডগুলো দিয়েছি সেগুলো style.css -এ যোগ করুন।
• ওয়ার্ডপ্রেস ব্যবহারকারীরা একটুকু হলেও এক্সপার্ট। তাই তাদেরকে বিস্তারিত ভাবে বুঝিয়ে বললাম না। তবুও নতুনরা না বুঝলে জানাবেন।

কিভাবে ব্লগের পোস্টের মাঝে Alert Box টি ব্যবহার করব?

• আমরা ইতিমধ্যে ব্লগে Alert Box টি যোগ করার প্রাথমিক কাজ শেষ করেছি। এখন শুধু দেখাব কিভাবে আপনি পোস্টে Alert Box টি ব্যবহার করবেন।

<div>Error message</div>

• উপরের কোডটি লক্ষ্য করুন। এখানে আমি চার স্টাইলের Alert Box এর মধ্য থেকে Error Message স্টাইলের বক্সটির কোড উল্লেখ করেছি। আপনি কোন পোস্টের ভেতর যদি এই Error Message স্টাইলের বক্সটি বসাতে চান তবে সেখানে উপরের কোডটি বসাবেন আর Error message লেখাটার জায়গায় আপনি যে মেসেজ দিতে চান সেটি দিবেন। এভাবে বাকি স্টাইলের মেসেজ বক্স গুলোও ব্যবহার করবেন। নিচে আমি সব স্টাইলের মেসেজ বক্সগুলোর কোড উল্লেখ করছি।

 <div>Info message</div>
<div>Successful operation message</div>
<div>Warning message</div>
<div>Error message</div>

তবে একটি কথা মনে রাখবেন, পোস্টের মাঝে এই কোডগুলো দেওয়ার সময় পোস্টটি ব্লগস্পটে হলে HTML Mode এ রাখবেন আর ওয়ার্ডপ্রেস হলে Text Mode এ রাখবেন। কেমন লাগলো জানাবেন কিন্তু। আর কিছু বুঝতে সমস্যা হলে সেটাই জানাতে ভুলবেন না। সময় করে ঘুরে আসতে পারেন "ব্লগার মারুফ ডট কম" সাইটটিও। ধন্যবাদ