0:00
Hi everyone, welcome to Key2Blogging and in this video, I will show you how you can add
0:04
an animated hover effect to your links. So let me just show you how it works
0:09
So let me just scroll down and when I hover this link, it will show an animated hover
0:15
effect and add an underline just below the links. So let's check how you can apply the same technique to your blogger and WordPress website
0:25
So let's start the video. So if you found this video helpful, then make sure to hit the like button
0:32
So first of all, let's check how we can do it in blogger
0:36
So first of all, you have to go to your blogger dashboard and under the theme section, you
0:41
have to click on edit HTML. Now you need to find the CSS code of your website
0:47
So let me just scroll down as you can see, these are the CSS codes
0:51
So let me just scroll down all the way to the bottom. So here the CSS code ends
0:57
So you have to paste it just above the style tag or base skin tag
1:01
And if you don't want to add the CSS code, then you have to scroll down all the way to
1:05
the bottom and search for closing body tag and you have to paste a code like this
1:11
So if you want to add the code in just above the body tag, then you have to copy the code
1:16
and add a style tag. So let me just show you how you can do that
1:22
So I will paste the code just above the body tag and I will wrap this code with the style tag
1:39
Like this. So you have to wrap this code between the style tag
1:44
Then let me just save the code. Okay. So let's go to the website and let me just refresh this page
1:54
And let's scroll down and as you can see, when I hover over the link, it will add an
1:59
underlying effect like this, but it will affect all the codes or all the links that are present
2:05
in this web page. So we need to target only the post section
2:10
So for this, we need to add a class of the post section
2:14
So let me just inspect the code. Now let me just select this post section only
2:22
And here this is the post body. So let me just copy the post body class only
2:28
And I will go to the theme editor and I will add the class above just before the anchor tag
2:35
So I will type dot post body. Then I will copy the same class and I will add it just before the anchor tag
2:47
Like this. So we have excluded all other links and only included the post body anchor tags
2:54
So let me just save the code. Now let me just refresh this page
3:02
Now scroll down and as you can see, the underlying hover effect is still working
3:06
But when I hover this link, then it will not show. So in this way, you can target a specific element of your website and add an animated
3:15
hover effect in the links. So let's check how you can add the same technique to WordPress
3:22
So for this, I will go to WordPress dashboard and I will go to appearance and I will click
3:25
on customize. Now I will scroll down and find the additional CSS section
3:31
So we will find this section in all themes. So let me just paste the CSS code here
3:38
So let's copy the code. Now let's paste the code. Now we need to copy the class of the post section
3:47
So for this, I will click on inspect element. Now you need to find the class of the section
3:53
So let me just select this button and I will highlight this and I will find this class
3:58
like entry content. So it will highlight all the paragraphs in this page
4:05
So let's select this class entry content and we need to add the class before the anchor tag
4:12
So I will type dot and I will add the class. Now I will copy the same class target here and I will paste the code just before the
4:23
a tag. Now I will find this third one and I will change it here like this
4:31
Now let's publish this. Okay. So let's go to the blog post and let me just refresh this page
4:41
Now scroll down and as you can see, when I hover this link, it will add an underlying
4:46
effect like this. So in this way, you can exclude all other elements and target only specific anchor tag
4:53
of your website. So if you like this content, then make sure to hit the like button and tell me your feedback
5:00
in the comment section. And I will see you in the next video
