Stylish Profile Widget With With Photo on Blogger
Hello!
We all want to add a unique author profile on our site. Author profile give a more professional look to your blog. so we are going to use a HTML author code.
All you have to do is head on over to your Layout page, click the Widget link, and scroll down and click the HTML/JavaScript than paste your HTML code.
<div class="about-us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0CLdpoUCyHxUroNOiGpvFbgSFHCR94aSiJp10camVC85BCBMVusnJc5Bg9P9gc5zOqz4P8W42rr3tDcjkKABN_xb7h5K_NCC4GRFtH8Rp1nNfHnL6A8DdgS2TJKZYPBofr6RqmxB_vbd/w236-h280-p/20200525_150801.jpg" />
<br /><br />
<center><b>Arya Khan</b><br />Author's short Bio here.</center>
</div>
<style>
.about-us {
font-family: 'Magra', arial;
font-size: 14px;
color: #ADACAC;
line-height: 23px;
text-align: justify;
}
.about-us img {
float: left;
margin-right: 10px;
box-shadow: 0px 0px 0px 1px red;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
opacity: 50%;
border-radius: 100%;
cursor: pointer;
overflow: hidden;
width: 100px;
border-top: 5px solid #050505;
border-right: 5px solid #949494;
border-bottom: 5px solid #050505;
border-left: 5px solid #888888;
}
.about-us:hover img {
box-shadow: 5em 5em 25em 1em #ff0000;
opacity: 100%;
overflow: hidden;
margin-top: 10px;
}
</style>
Note:
Please change image link and enter your bio.
That’s all! Of course, don’t forget to Save your changes. Thank You!
