ব্লগার ওয়েবসাইটে আকর্ষণীয় Label Widget যুক্ত করুন (কাস্টম CSS)!
 |
| Create Label widget with custom CSS |
ব্লগার ব্লগে ভিজিটরদের দ্রুত যেকোনো পোস্ট ক্যাটাগরীতে পাঠানোর সবচেয়ে সহজ উপায় হলো Label Widget যুক্ত করা।
তবে আমরা সবাই জানি ব্লগারের সাথে যে ডিফল্ট Label widget থাকে তা দেখতে তেমন একটা আকর্ষণীয় নয়। তাই আমরা এই ফিচারটিকে সাধারণত এড়িয়ে চলি। তবে ব্লগে ভিজিটরদের আকর্ষণ বাড়ানোর জন্য আমাদের ওয়েবসাইটে অবশ্য label widget থাকা জরুরি।
আর এই সমস্যার সমাধানের জন্যই সাউট-অন-বাংলা আজ আপনাদের জন্য নিয়ে এসেছে কাস্টমস্ css যুক্ত label widget।
যা সহজেই আপনার ব্লগের ভিজিটরদের দৃষ্টি কাড়বে এবং আপনার ব্লগকে করে তুলবে আকর্ষণীয়। এই label widget টি আপনার ব্লগে যুক্ত করার জন্য নিচের পদধতি অবলম্বন করুন।
টিপস্ঃ ব্লগার ওয়েবসাইট ইউআরএল থেকে ?m=1 রিমুভ করুন
কিভাবে আপনার ব্লগে custom CSS যুক্ত label widget যুক্ত করবেন?
আপনার ব্লগে label widget যুক্ত করার জন্য নিচের যেকোনো একটি কোড ব্যবহার করুন।
তাহলে চলুন শুরু করা যাক ব্লগারে কাস্টমস css যুক্ত আকর্ষণীয় label widget যুক্ত করার পদ্ধতিঃ
- সর্বপ্রথম আপনার ব্লগার একাউন্টে লগইন করুন।
- এরপর ব্লগারের Layout অপশনে ক্লিক করুন।
- এবার আপনার ব্লগের যেই স্থানে label widget দেখাতে চান সেখানে Add Gadget অপশনে ক্লিক করুন।
- এখান থেকে Label widget অপশনে ক্লিক করুন। (Select Cloud Style)
- এরপর Save বাটনে ক্লিক করুন।
- এবার ব্লগারের ড্যাশবোর্ড হতে Template tab এ যেতে হবে।
- Edit html এ ক্লিক করতে হবে।
- এবার কোনো ফাঁকা স্থানে কার্সর রেখে কীবোর্ড হতে ctrl + f কি চেপে ]]></b:skin> অংশটুকু সার্চ করতে হবে।
- এবার নিচের যেকেনো একটি CSS কোড ]]></b:skin> এর ঠিক উপরে পেস্ট করুন।
কোড-১ঃ
/* cloud label by www.ShoutOnBangla.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
কোড-২ঃ
/* cloud label by www.ShoutOnBangla.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
কোড-৩ঃ
/* cloud label by www.ShoutOnBangla.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
কোড-৪ঃ
/* cloud label by www.ShoutOnBangla.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
কোড-৫ঃ
/* cloud label by www.ShoutOnBangla.com */ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { background:#08A2FA; border-radius: 30px; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { background:#000000; } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#000000; color:#fff !important; } .label-size { line-height:1.2 }
এবার আপনার template টি save করুন।
টিপস্ঃ গুগল এডসেন্স কি এবং কিভাবে কাজ করে?
এখন আপনি আপনার ব্লগে ভিজিট করুন। দেখবেন আপনার ব্লগে অনেক সুন্দর ও আকর্ষণীয় label widget দেখা যাচ্ছে।
উপরের পদ্ধতি গুলিতে আমরা শুধুমাত্র CSS Style Sheet যুক্ত করেছি। সে জন্য এটি Apply করতে আপনার কোন সমস্যা হবে বলে আমার মনে হয় না। তারপরও যদি কারো কোন অংশে কোনো সমস্যা হয়, তাহলে আমাদেরকে কমেন্ট করে জানাতে পারেন। অবশ্যই এর সমাধয়ন পাবেন।