With the help of this tutorial you can add animated slider to your blog headings or text that you want to highlight.
This effect gives a cool animated slider on hover on any heading or text.
This effect gives a cool animated slider on hover on any heading or text.
Demo
To start just follow these steps:-
- Open Blogger.
- Copy and paste this code in
Template > Customise > Advanced > Add CSS
/* Start Underline Slider By Tutes Inside*/
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #333;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #333;
}
/* End Underline Slider By Tutes Inside*/
Note- Add <div class="uslide">The Text You Want Underline</div> in HTML mode.
|
Add uslide in the Text you want Underline from Left to Right and uslide2 in the text you want Underline from Right to Left. |
|---|
