আপনার ব্লগার ব্লগের পোস্টকে করুন আরও আকর্ষণীয় CSS3 হাইলাইট নোট ব্যবহার করে !!

বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই খুব ভালো আছেন । আমি গত দিন পোস্ট করেছিলাম কিভাবে আপনার ব্লগার ব্লগের ডোমেইন পরিবর্তন করে একটি ফ্রী ডোমেইন সেট করবেন যারা দেখেননি তারা আমার ব্লগে .TK লিখে সার্চ দিয়ে দেখে আসুন । যাই হোক আজকে আমি আপনাদের জন্য খুবি মজার একটি বিষয় নিয়ে এলাম আশাকরি আপনাদের কাজে আসবে । CSS3 হাইলাইট নোট এই স্টাইল ব্যবহার করলে আপনি আপনার কিছু লিখাকে হাইলাইট কালার এর মধ্যে রাখতে পারবেন । ধরুন আপনি কোন কিছু লিখলেন সেই লিখেগুলো পাঠক দের কাছে আপনি অন্য ভাবে তুলে ধরতে চাইছেন তখুন কি করবেন ! তখুন এইCSS3 স্টাইল এর নোট ব্যবহার করে আপনি খুব সহজে যেকোনো লিখাকে হাইলাইট করতে পারবেন । নীচের চিত্রে দেখুন বিস্তারিত বুজতে পারবেন ।

Live Demo

কিভাবে আপনার ব্লগে এটা যুক্ত করবেন এবং ব্যবহার করবেন নীচের স্টেপ দেখুনঃ

☞ কাজটি মোটেও কঠিন কিছু না । আশাকরি উপরের ডেমো দেখে আপনি বুঝেগেছেন এর কাজ কি এবং এটা কতটা সুন্দর । যদি এটা আপনি আপনার ব্লগে ব্যবহার করতে চান তাহলে আমার নীচের ছোট্ট স্টেপ গুলো একটু লক্ষ করুন ।


১// ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।

২// Edit HTML এ ক্লিক করে আপনার কীবোর্ড এর CTRL+F প্রেস করে নীচের ট্যাগটি খুজুন ।

]]></b:skin>

৩// উপরের ট্যাগটি খুজে পেলে তার ঠিক উপরে নীচের CSS3 কোড গুলো কপি পেস্ট করুন ।

.note {
    position:relative;
    width:auto;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    font-size: 20pt;
    font-family: comic sans ms;
    font-weight: normal;
    border-radius: 10px;
    background:#97C02F;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 38px 38px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15;
    display:block; width:0;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

.note.blue {background:#5674f2;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

.note.black {background:#4d4747;}
.note.black:before {border-color:#fff #fff #000000 #000000; background:#4d4747}

.note p {margin:0;}
.note p + p {margin:1.5em 0 0;}

৪// Save Template এ ক্লিক করে বেরিয়ে আসুন । কাজ শেষ এবার ব্যবহার করার পালা ।

কিভাবে এই স্টাইল আপনার ব্লগে ব্যবহার করবেন ! নীচের স্টেপ দেখুনঃ

☞ আপনি যখুন ব্লগে পোস্ট করবেন তখুন নীচের কোড গুলো ব্যবহার করুন নীচে কালার ভিত্তিক আছে যে কালার টি আপনার পছন্দ সেটাই ব্যবহার করতে পারেন ইছে করলে সব কয়টি ব্যবহার করতে পারবেন । এর জন্য আপনাকে পোস্ট করার সময় HTML হিসাবে পোস্ট করতে হবে ।

☞ এবার নীচের কোড গুলো ব্যবহার করুন আর আপনার পোস্টে করে নতুন আরও সুন্দর ।

Green Note

<div class="note">
<p>Your Text Here</p>

Red Note

<div class="note red">
<p>Your Text Here</p>

Blue Note

<div class="note blue">
<p>Your Text Here</p>

Black Note

<div class="note black">
<p>Your Text Here</p>

☞  উপরের কোড এর স্টাইল সব গুলোর এক শুধু কালার আলাদা আপনি আপনার উপরের ডেমো দেখলেই সব বুঝতে পারবেন । তাহলে আশাকরি বুজতে কোন সমস্যা হল না ।

 আগেই এই ধরনের CSS স্টাইল কিছু ব্যবহার করলে এটা কাজ নাও করতে পারে । 

☞ ব্যাস কাজ শেষ এবার তাহলে আপনি ব্যবহার শুরু করবেন মকন রকম সমস্যা হলে অবশ্যই আমাকে একটি কমেন্ট করে যাবেন আমি হেল্প করবো আশাকরি কোন রকম সমস্যা হবার কথা না তবুও । পোস্টটি ভালো লাগলে অবশ্যই আমাকে যাবানে এবং বন্ধুদের সাথে শেয়ার করবেন ।



☞ এই ধরনের নতুন নতুন পোস্ট আপনার ইমেলে আপডেট পেতে উপর থেকে আমার ব্লগে Subscribe করে আসুন না হলে আপনি নতুন নতুন পোস্ট থেকে বঞ্চিত হবে । ভালো থাকবেন সুস্থ । আল্লাহ্‌ হাফেজ ।