Stylish Profile Widget With With Photo on Blogger
September 30, 2023 ・0 comments ・Topic： Blogger
Hello!
Dear friends my name is ARYA today I am going to show you! how to add a professional author profile to our blogger site.
We all want to add a unique author profile to our site. Author profiles give a more professional look to your blog. so we are going to use an HTML author code.
All you have to do is head on over to your Layout page, click the Widget link, scroll down, and click the HTML/JavaScript then paste your HTML code.
<div class="about-us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOsBaWFYE9hIzudRvXNODPsZ_VLWs5-v_Al975pCXvMOzoUbTGsXRXSh1I077uK0kH7I1cMV46Zh2fZsD4UI6bAYaAdLGLePq5I8HUQ3aMggfbaWm5FYocBA66fRKt6etfJkcdyNRStUg/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!
Post a Comment
Please do not enter any spam link in the comment box.
If you have any doubts, Pease let me know.
If you can't commemt, try using Chrome instead.