ব্লগার সাইটে থাম্বনাইলের সাথে ল্যাবেল/ক্যাটাগরি আইকন

আশা করি সবাই ভালো আছেন। আমিও ভালো আছি।

 ITsayeem.Com এর সাথে থাকলে সবাই ভালো থাকে।

থাম্বনাইলের সাথে ল্যাবেল/ক্যাটাগরি আইকন 

আর পরম করুনা ময় সৃষ্টি কর্তার কাছে প্রার্থনা করি যেন তিনি সবাই কে ভালো রাখেন।

আজ আমি আবার একটি বিষয়ে লিখতে চাচ্ছি। 

ব্লগার সাইটে থাম্বনাইলের সাথে ল্যাবেল/ক্যাটাগরি আইকন

অনেকেই এই বিষয় পারেন।কিন্তু আমি আজ এই টিউটোরিয়াল দিচ্ছি তাদের জন্য যারা পারেন না।

আর যারা পারেন তাদের কে অসংখ্য ধন্যবাদ।

তবে শুরু করা যাক...

প্রথমে বলে রাখি এই কাজ আমি আপনাদের রিপ্লেস এর মাধ্যমে করে দেখাব।

বিস্তারিত ভাবে বলতে গেলে , আপনার সাইট এর যে ক্যাটাগরি আছে অর্থাৎ সাম্প্রতিক/রিসেন্ট পোস্টের সাথে ল্যাবেল গুলো শো করানো বা দেখানো।

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

আপনাদের মনে প্রশ্ন থাকতে পারে এটা করে লাভ কি ?

আমরা জানি ১ টি সাইট যত টা সুন্দর হবে , ভিসিটর এক বার আসলে ঐ সাইট এর প্রতি এক ধরনের আকৃষ্ট অনুভব করবে।

ফলে প্রতি নিয়ত অই সাইট ভিসিট করতে থাকবে।

আর আমাদের টার্গেট সাইট এ ভিসিটর নিয়ে আসা এবং ধরে রাখা।

এই ল্যাবেল আইকন গুলা সাইট এর সৌন্দর্য্য বারাতে সাহায্য করে।

আজ আমরা তাই করব।

আজ একটু বেশিই বকবক করে ফেললাম , আশা করি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।

আপনার ব্লগারে প্রবেশ করুন ...

আপনার টেমপ্লেট টি ব্যাকআপ করে নিন।

এখন এডিট মুডে প্রবেশ করুন। এবং

Search করুন

<b:if cond='data:post.thumbnailUrl'>

সার্চ করতে কীবোর্ডে চাপুন  ctrl + f

একটি বক্স দেখতে পারবেন , সেখানে উক্ত লাইন টি কপি করে পেস্ট করুন এবং ইন্টার প্রেস করুন।

প্রতেক টি টেম্পলেটে আপনি উক্ত লাইন ২ টি দেখতে পারবেন।

১ টি মোবাইল ভার্সন এর জন্য অন্য টি ডেস্কটপ ভার্সন এর জন্য।

আপনি উক্ত লাইন এর ঠিক উপরে ২ যায়গাতেই নিচের কোড টি বসাবেন।

১ম কোড টি মোবাইল ভার্সনের জন্য এবং ২য় টি ডেক্সটপ ভার্সনের জন্য।

কোড নং- ০১

<!-- label tag mobile  by SMsudipBD.Com start  -->

<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:if cond='data:post.labels'> <span class='label-info-mobile'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;' rel='tag'><span class='label-icon-sudip' id='label-icon-sudip' name='label-icon-sudip'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'/> </b:loop></span> </b:if> </b:if>

<!-- label tag mobile by SMsudipBD.Com end -->

কোড নং- ০২

<!-- label tag desktop by SMsudipBD.Com start  -->

<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:if cond='data:post.labels'> <span class='label-info'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;' rel='tag'><span class='label-icon-sudip' id='label-icon-sudip' name='label-icon-sudip'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'/> </b:loop></span> </b:if> </b:if>

<!-- label tag desktop by SMsudipBD.Com end -->

এবার আবার 

সার্চ করতে কীবোর্ডে চাপুন  ctrl + f

এবং </head> সার্চ করুন।

নিচের স্টাইল সি এস এস টি </head> এর পূর্বে কোথাও এড করে নিন।

কোড নং- ০৩

<style type='text/css'>

/*-- thumbnail label add css (start) --*/

.post .label-info {} .label-info a{position: absolute;margin-right:5px;background-image: linear-gradient(50deg,#ff12cf,#4f37ac);color:#fff;font-size:15px;display:block;float:left;padding:12px 10px;transition: all .3s ease-out;border-radius: 5px;z-index:1;} .label-info a:hover{background-image: linear-gradient(50deg,#4f37ac,#ff12cf);color:#fff;} .label-info a:nth-child(n+3){display:none;} @media only screen and (max-width:640px){ .label-info {display:none;}}

.label-info a::after{content:&quot;&quot;;border-color:#ff12cf transparent transparent;position:absolute;top:39px;left:0px;width:0;height:0;border-style:solid;border-width:10px 17px 0;border-color:#d51bc7 transparent transparent;}

/*-- thumbnail label add css (mobile view) --*/

.label-info-mobile a{margin-top:5px;background-image:linear-gradient(50deg,#ff12cf,#4f37ac);color:#fff !important;font-size:13px !important;display:block;float:left;padding:12px 10px;transition:all .3s ease-out;border-radius:5px;position:absolute;z-index:1;}

.label-info-mobile a::after{content:&quot;&quot;;border-color:#ff12cf transparent transparent;position:absolute;top:39px;left:0px;width:0;height:0;border-style:solid;border-width:10px 17px 0;border-color:#d51bc7 transparent transparent;}

/*-- thumbnail label add css (end) --*/

</style>

এবার আবার 

সার্চ করতে কীবোর্ডে চাপুন  ctrl + f

এবং </body> সার্চ করুন।

নিচের স্টাইল সি এস এস টি </body> এর পূর্বে এড করে নিন।

কোড নং- ০৪

<!-- Label replace js start -->

<script async='async' language='javascript'>

//<![CDATA[

var msg=document.getElementsByName("label-icon-sudip");

for(var i=0;i<msg.length;i++){ var txt=document.getElementsByName("label-icon-sudip")[i].innerHTML;

txt=txt.replace(/Code/g, "<i class='fa fa-code'></i>");

txt=txt.replace(/Wapkiz/g, "<i class='fa fa-wikipedia-w'></i>");

txt=txt.replace(/Wordpress/g, "<i class='fa fa-wordpress'></i>");

txt=txt.replace(/Love story/g, "<i class='fa fa-heart'></i>");

txt=txt.replace(/Life story/g, "<i class='fas fa-heart-broken'></i>");

txt=txt.replace(/Education/g, "<i class='fa fa-graduation-cap'></i>");

txt=txt.replace(/featured/g, "<i class='fas fa-thumbtack'></i>");

txt=txt.replace(/Funny Jokes/g, "<i class='fa fa-smile-o'></i>");

txt=txt.replace(/Hindu/g, "<i class='fas fa-om'></i>");

txt=txt.replace(/Music/g, "<i class='fa fa-music'></i>");

txt=txt.replace(/Sports/g, "<i class='far fa-futbol'></i>");

txt=txt.replace(/Technology/g, "<i class='fa fa-lightbulb-o'></i>");

txt=txt.replace(/Tips/g, "<i class='fas fa-seedling'></i>");

txt=txt.replace(/Blogspot/g, "<i class='fab fa-blogger-b'></i>");

txt=txt.replace(/Poem/g, "<i class='fas fa-book-open'></i>");

txt=txt.replace(/Download/g, "<i class='fa fa-cloud-download'></i>");

txt=txt.replace(/CSS/g, "<i class='fa fa-asterisk'></i>");

txt=txt.replace(/Web Design/g, "<i class='fas fa-hammer'></i>");

txt=txt.replace(/Widgets/g, "<i class='fas fa-fan'></i>");

txt=txt.replace(/Free Template/g, "<i class='far fa-file-code'></i>");

txt=txt.replace(/SMS/g, "<i class='fas fa-sms'></i>");

txt=txt.replace(/News/g, "<i class='fa fa-newspaper-o'></i>");

document.getElementsByName("label-icon-sudip")[i].innerHTML=txt;

}

//]]>

</script>

<!-- Label replace js end -->

NB:- label-icon-sudip এই class name টি অবশ্যই আপনার সাইট এর css দ্বারা পরিবর্তন করে নিবেন।

উক্ত class name এর মাঝে যদি আমাদের দেওয়া লাবেল নাম মিলে যায় তখনি এটি রিপ্লেস করে আইকন শো করাবে / দেখাবে।

Example: - 

<div name='label-icon-sudip'>your all recent post/post view code here</div>

উক্ত কোড টি জাভাস্ক্রিপ্ত আপনি আপনার ল্যাবেল এড করে নিবেন অথবা পরিবর্তন করে নিবেন।

নতুন ল্যাবেল এড করতে নিচের কোড টি ফলো করুন ...

txt=txt.replace(/your categories name here/g, "<i class='your fa fa icon here'></i>");

উক্ত লাইন টি

document.getElementsByName("label-icon-sudip")[i].innerHTML=txt;

এর পূর্বে বসাবেন।

এখন টেমপ্লেট টি save করুন।

অনেক সময় ব্যয় করে ১ টি টিউন বানাই , অথচ আপনাদের মন্তব্য আমি পাই না। তখন মনে হয় আমার টিউন গুলো কারো উপকারে আসে না।

আপনাদের মন্তব্য পেলে নতুন আরেক টিউন নিয়ে হাজির হব খুব শিগ্রই।

আগামি টিউন হবেঃ-

কিভাবে নিজের ১ টি About us পেজ প্রফেশনাল লুক দিয়ে বানাবেন।

কোন অসুবিধা মনে হলে নিচের কমেন্ট বক্সে কমেন্ট করে জানাবেন।আজ আর বেশি কিছু লিখছি না।

অবশ্যই আমার ভুল গুলো ধরায় দিবেন , আমি চেস্টা করব আমার ভুল গুলো শোধরানোর।

সকলের মঙ্গল ময় জীবন, সুসাস্থ কামনা করে আজকের টিউটোরিয়াল এখানেই শেষ করতেছি।

ভালো থাকবেন।

টাটা। 

By

     SMsudipBD.Com

আরও নতুন পোষ্ট পরবর্তী পোষ্ট