How to install text highlighter on Blogger

Nowadays all bloggers know about code highlighter but 90% of people don't know about text highlighter, this why I get so many comments about how can add this type of stylish text on the post😂. So in this article, we will know about how we can add stylish text highlighter on Blogger.
DEMO

About text highlighter

So now let me tell you more about text highlighter for an example you want to give a small code on the post text now you want to highlight it so now 90% of people use the text background color tool but at the end of the post, you see it does not look so good. Now how can you fix this problem there is only 1 way to fix this problem and this solution is to use text highlighter. Now they're so much HTML tag for making this highlighter with CSS but the problem is all HTML tag is not google schema friendly this why I m use kbd tag now if you want to know more about kbd tag then go to this URL (https://www.w3schools.com/tags/tag_kbd.asp) So you can know more about kbd code form here.

Feature of this text highlighter

Show any text by highlight like this.
Double click for copy popup when mouse hover.
Make your article more stylish.
Seo friendly for keyword placing.
More use of keyword-friendly tag kbd.
Kbd code is also more google friendly from the bold tags.
Many more see on the live demo.

How to add this text highlighter

Before adding the CSS you need to know how to use the kbd tag on post. Now imaging you are writing a post and add now how can you add the kbd tag? It's so easy just go to the HTML view of your post and add kbd code like this <kbd>Text Here</kbd> now add your kbd code like this and on the text here is your main text which one you want to highlight. After all your kbd code adding done. Now, how you can make it's stylish like the demo. Open your blogger dashboard then go to theme edit and search for </style> tag and add the below CSS code after </style> tag.

kbd {
  border-radius: 2px;
  padding: 2px;
  border: 1px solid black;
}
kbd{font-size:90%;overflow-wrap:break-word;word-wrap:break-word;position:relative;color:#222;font-weight:500;font-family:monospace;background:linear-gradient(to right,#fce3ec,#ffe8cc);padding:.05rem .5rem .15rem;border-radius:99em}kbd:before{font-family:Google Sans;width:135px;position:absolute;content:'Double click to select';display:table;bottom:0;left:0;background:#28a1f0;color:#fff;padding:6px;border-radius:99em;font-size:75%;line-height:1;opacity:0;visibility:hidden;text-align:center;z-index:2;transition:all .3s}kbd:hover:before{bottom:28px;opacity:1;visibility:visible}cite,em,i{font-style:italic}ul,dl{margin:.2em 0 .2em 1em}ol{list-style:decimal outside}ul{list-style:disc outside}li{margin:0}dt{font-weight:500}dd{margin:0 0 .5em 2em}.post ul li span{position:relative;display:block;margin:0;padding:5px 8px;margin-bottom:10px;text-decoration:none;transition:all .3s ease-out}ol{counter-reset:li;list-style:none;padding:0}.post-body li{list-style-type:square}ol ol{margin:0 0 0 2em}.post ol li{position:relative;display:block;padding:.1em;margin:.2em 0 .2em 2.5em;text-decoration:none;transition:all .3s}.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;width:2em;text-align:center}strong,b{font-weight:500}.hero,.content{text-align:center;position:relative;width:100%}

Now after adding the CSS code just save your theme and your work is finished now. Now chill bro.

Final word

So many people ask me for text highlighter but 90% of people don't know what is text highlighter this why I am trying my best to explain to you what is text highlighter and also provide you a stylish text highlighter for kbd tag. If you have any kind problem with this article then please comment down below on the comment box. Thanks for reading us.