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

বন্ধুরা সবাই ক্যামন আছেন আশাকরি সবাই খুব ভালো আছেন । আমি গত দিন পোস্ট করেছিলাম কিভাবে আপনার ব্লগার ব্লগের ডোমেইন পরিবর্তন করে এ...

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









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



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


১// ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে 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 করে আসুন না হলে আপনি নতুন নতুন পোস্ট থেকে বঞ্চিত হবে । ভালো থাকবেন সুস্থ । আল্লাহ্‌ হাফেজ ।

COMMENTS

নাম

অনলাইন ইনকাম,11,অন্যান্য,13,অ্যাডসেন্স,6,অ্যান্টিভাইরাস,6,আইটি নিউজ,11,আলেক্সা,6,ইন্টারনেট,63,ইসলামিক,8,উইন্ডোজ,35,উইন্ডোজ ১০,3,উবুটু,1,এইচটিএমএল,60,এনড্রয়েড,56,ওয়ার্ডপ্রেস,11,ওয়ালপেপার,12,ওয়েডগেট,77,ওয়েব ব্রাউজার,7,ওয়েব হোস্টিং,1,কবিতা,1,ক্র্যাক,18,খবর,3,গুগল অ্যাডসেন্স,2,গেম,8,টিপস অ্যান্ড ট্রিকস,121,টেম্পেলেট,53,ডাউনলোড,74,নোটিফিকেশন,1,পিসি টিপস,14,পোর্টবেল,3,ফীডবার্নার,4,ফেসবুক,29,ফ্রীলান্সিং,1,বাংলা ইবুক,11,বিনোদন,8,ব্লগার,419,ব্লগার টিপস,194,মিডিয়া,1,মিডিয়া প্লেয়ার,1,মুভি,2,সফটওয়্যার,16,CSS ( সিএসএস ),8,Mp3 গান,1,SEO,27,WhatsApp,3,
ltr
item
এসো বন্ধু: আপনার ব্লগার ব্লগের পোস্টকে করুন আরও আকর্ষণীয় CSS3 হাইলাইট নোট ব্যবহার করে !!
আপনার ব্লগার ব্লগের পোস্টকে করুন আরও আকর্ষণীয় CSS3 হাইলাইট নোট ব্যবহার করে !!
http://3.bp.blogspot.com/-viUBKnpCEtE/U7Y4aCUixuI/AAAAAAAAEK8/qCyDyApWITE/s1600/blogger+blog+css3+note+style.png
http://3.bp.blogspot.com/-viUBKnpCEtE/U7Y4aCUixuI/AAAAAAAAEK8/qCyDyApWITE/s72-c/blogger+blog+css3+note+style.png
এসো বন্ধু
http://www.esobondhu.com/2014/07/css3.html
http://www.esobondhu.com/
http://www.esobondhu.com/
http://www.esobondhu.com/2014/07/css3.html
true
8212991989234450027
UTF-8
Loaded All Posts Not found any posts আরও দেখুন বিস্তারিত পড়ুন Reply Cancel reply Delete By মূল পাতা PAGES POSTS View All আরও কিছু পোস্ট ARCHIVE সার্চ করুন সকল পোস্ট সমূহ Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy