বন্ধুরা আপনারা সকলে কেমন আছেন। নিশ্চয় ভাল আছেন। আর আপনাদের সকলে মঙ্গল কামনা করে আমার আজকের লেখা শুরু করলাম। আজ আমি আপনাদের নতুন ও মজার একটি ...
বন্ধুরা আপনারা সকলে কেমন আছেন। নিশ্চয় ভাল আছেন। আর আপনাদের সকলে মঙ্গল কামনা করে আমার আজকের লেখা শুরু করলাম। আজ আমি আপনাদের নতুন ও মজার একটি বিষয় নিয়ে হাজির হয়েছি। আমরা বিভিন্ন ব্লগ সাইটে যখন কোন পোষ্ট পড়ার জন্য ওপেন করি তখন দেখা যায় বিভিন্ন ডিজাইনে পোষ্ট আপনার সামনে হাজির হয়। কিন্তু সেটা কিভাবে সম্ভব ভেবে পাই না। তাই আমি আজ আপনাদের সাথে সেরকমই এই টিউন শেয়ার করলাম। দেখুন তাহলে নিচের চিত্রের মত????
১// প্রথমে আপনার ব্লগার সাইটের ড্যাশবোর্ডে প্রবেশ করুন
২// তার পরে ড্রাপ ডাউন মেনু হতে টেমপ্লেট নির্বাচন করুন।
৩// Edit HTML ক্লিক করুন।
]]></b:skin>৪। সর্বশেষ নিচের কোডগুলো কপি করুন এবং ]]></b:skin> উপরে যুক্ত করুন।
@font-face {৫// টেমপ্লেটটি সেভ করুন।
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
.message_box {
margin:15px 0;
}
.note {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #FDEBA5;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAr8PEI84hujJmab83kNXV6w-bJ5FTp9O38uC6G_-gbNpwxcCDF6HUleSKwwblM-pcavsa-PTzpGFh4_itIjFKnqD010a94OcaDd97TjMHU5PU2GSGmObvrcqJ24AMLGo4BYDFhXytXEED/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
padding:.5em 1em .5em 3em;
}
.announce {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #BEE5F8;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0T_r9JEoF-_-Pu-v1W1OdeAkQLvcQg3veXX2iTO7laGAweJYC0PAqseCRq0EsYhgkY9FOxmhHOoMBlBMEe70JM4-fcfDgxvEilqxmCXDRRfGqqHuzPsrQ4pitX6mHE8ISDY2Cutt8tWoP/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
padding:.5em 1em .5em 3em;
}
.success {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #DEF1BF;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzI3jIwbcB-T0zJ4d8fhcg4NlJbEOoyxTi0bc5oZ32v8zOYhXFkLvI2gNucwtwr-az6Pfzqeg0mglJTp_P07ltAniX4LdSshpsFF7nYrcDfUjf0rPRwIP71Q0Xiesr3fefexf0CQWipbU/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
padding:.5em 1em .5em 3em;
}
.warning {
color:#666;
font-family:"Open Sans";
font-size:16px;
border:1px solid #FFDBDB;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM50JGGaJJrbXTyeXNStuMWzFGUtmI0HaT2CSaV-wUahr9bbM3_UavXy8zLwBRwklHNGwLMLqJQYbcNoLVd8Zxdh9IFaL1qlsKohXVCv1nyuhCiuQczNEnNsDnQzNTRaHdS2IyIMlAASSJ/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
padding:.5em 1em .5em 3em;
}
১// প্রথমে আপনার ব্লগ পোষ্ট করার জন্য নিউ পোষ্ট নির্বাচন করুন।
২// তার পরে HTML নির্বাচন করুন।
৩// আপনার যখন যে ধরনের কোন প্রয়োজন সে কোডটুকু কপি করে পেষ্ট করুন।
Note Box :
<div class="message_box note">
Hi, I am Mr.Noter. I'll notify your readers about the news.
</div>
Announce Box :
<div class="message_box announce">
Mr.Annoucer is having meetup with Blogger Yard's Readers.
</div>
Success Box :
<div class="message_box success">
Mr.Success. Never give up! A day wil come when you will catch me.
</div>
Warning Box :
<div class="message_box warning">
Mr.Warner. I will try my best to warn from such worst things.
</div>
ব্যস আপনার কাজ শেষ।
আল্লাহ হাফেজ।
COMMENTS