How To Add Label Icon Blogger Last Updates ।। কিভাবে ব্লগার লাস্ট আপডেটে ক্যাটাগরি আইকন যুক্ত করবেন।

লিখেছেনঃ
প্রকাশিতঃ

How To Add Label Icon Blogger Last Updates ।। কিভাবে ব্লগার লাস্ট আপডেটে ক্যাটাগরি আইকন যুক্ত করবেন।


How To Add Label Icon Blogger Last Updates

How To Add Label Icon Blogger Last Updates

Hellow Friends , Today I Am Back. I Am Fine And I Am Sharing How To Add Label Icon Blogger Last Updates.It Is Very Easy. You Want This Then Follow Me And Try It. Ok.


  1. At First Login Your Blogger Site.
  2. Go To Theme & Backup Your Template.
  3. Then Edit Your Blogger Template.
  4. Now Press ctrl + f  , Search box Open.
  5. Paste <b:includable id='post' var='post'> And Search It.
I Given A Label Code. Just Add This Code <b:includable id='post' var='post'> First div class area.

<!-- label tag by SMsudipBD.Com start  -->
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'>
<a class='category' expr:href='data:label.url' expr:title='data:label.name' rel='category tag'><div class='label-tags'><data:label.name/></div></a>
</b:if>

</b:loop>
</b:if>
<!-- label tag by SMsudipBD.Com end -->

If First div class <div class='col-md-50'>
Simply Change It <div class='col-md-50'  name='label-icon-sudip'>


Now Again Search It ]]></b:skin>
And Add This CSS Style Above The ]]></b:skin>

/* label-tag */
.label-tags{color: transparent;}
.label-tag{font-size:22px;width:34px;height:42px;line-height:42px;text-align:center;position:absolute;top:0;left:8px;box-sizing:border-box;color:#fff;z-index:2;border-radius:0 0 2px 2px}
.label-tag i{font-size:12px;color:#fff;border:1px solid;border-radius:50%;padding:0;height:23px;width:23px;text-align:center;line-height:22.5px}
.label-tag.windows{background-color:#0077db}
.label-tag.wordpress{background-color:#ff12cf}
.label-tag.blogger{background-color:#f66400}
.label-tag.facebook{background-color:#4267b2}
.label-tag.code{background-color:#D80F16}
.label-tag.education{background-color:#9A12B3}
.label-tag:after{content:"";position:absolute;top:41px;left:0;width:0;height:0;border-style:solid;border-width:10px 17px 0;border-color:#f90 transparent transparent}

.label-tag.windows:after{content:"";border-color:#0077db transparent transparent}
.label-tag.wordpress:after{content:"";border-color:#ff12cf transparent transparent}
.label-tag.blogger:after{content:"";border-color:#f66400 transparent transparent}
.label-tag.facebook:after{content:"";border-color:#4267b2 transparent transparent}
.label-tag.education:after{content:"";border-color:#9A12B3 transparent transparent}
.label-tag.code:after{content:"";border-color:#D80F16 transparent transparent}

Now Again Search It </body> Tag.
And Add This Javascript Above The </body> Tag.

<!-- 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, "<span class='label-tag code'><i class='fa fa-code'></i>");
txt=txt.replace(/Wordpress/g, "<span class='label-tag wordpress'><i class='fa fa-wordpress'></i></span>");
txt=txt.replace(/Education/g, "<span class='label-tag education'><i class='fa fa-graduation-cap'></i></span>");
txt=txt.replace(/Blogger/g, "<span class='label-tag blogger'><i class='fab fa-blogger-b'></i></span>");
txt=txt.replace(/Facebook/g, "<span class='label-tag facebook'><i class='fa fa-facebook-f'></i></span>");
txt=txt.replace(/Windows/g, "<span class='label-tag windows'><i class='fa fa-windows'></i></span>");
document.getElementsByName("label-icon-sudip")[i].innerHTML=txt;
}
//]]>
</script>
<!-- Label replace js end -->
OH ! You Are Successfully Done Added Label Icon Blogger Last Updates.
Label Icon Showing In Last Updates , Just Add Label Code , Wordpress , Education , Blogger , Facebook And Windows.


If You Want Add New Label Icon.
Just Add This Line In Our Javascript Code. Ok.

txt=txt.replace(/Here Label Name/g, "<span class='label-tag Here Label Name'><i class='Here Label Icon Code'></i></span>");

And Add Css Style

.label-tag.Here Label Name{background-color:background color code here}
.label-tag.Here Label Name:after{content:"";border-color:Same As background color code here transparent transparent}

Friends We Are Done The Work. So , Face You Any Problem , Please Full Free Comment Here.
No More Today. Spelling Mistake Or Others Worng. Please Excuse Me.
Thanks All.
God Bless You.
Bye. TaTa.

Credit By SMsudipBD.Com
Tags:- How To Add Label Icon Blogger Last Updates ।। কিভাবে ব্লগার লাস্ট আপডেটে ক্যাটাগরি আইকন যুক্ত করবেন।,আপনার ব্লগার ব্লগের Favicon Icon কিভাবে পরিবর্তন করবেন,ইউটিউব ভিডিও ব্লগের পোস্টে কিভাবে দেখাবেন,ব্লগার (blogger) ব্লগে আর্টিকেল লিখার নিয়ম,blogger ব্লগের জন্য Category Widget Menu কিভাবে তৈরি করবেন।
পোস্ট রেটিং করুন
ট্যাগঃ ,
About Author


টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!