![](https://cdn3d.iconscout.com/3d/premium/thumb/under-maintenance-8417950-6672514.png"/)
Thank you for being patient. We are doing some work on the site and will be back shortly.You are looking forvStylish About Author Page For Blogger then this post is just for you.
Stylish About Author Page
You can see the demo here⤵Step 1: Login to your Blogger Dashboard.
Step 2: Create a new Page.
Step 3: Now click on the Pencil icon at top left corner and Switch to HTML view from compose view.
Step 4: Now copy the following codes and paste them.
Edit the text and add your site's description and Logo url and also dont forget to add your social median links!
<div class="Abt-pg">
<img alt="Tecky AaryaN" class="Abt-img" src="https://blogger.googleusercontent.com/img/a/AVvXsEhsw7PUP_5frj-mDVttDrduB9YN2e3b1OtO_UswtTwFc2dURIs_nY3qlZEkXNhwguwTEiWc1Fc_MsFP0mqoKOuFfiK0WxvV8dt5cUIi4lko3m_myOE_OhwXN9q4jQhALElk5aOpDIQqmhRfYA2FzhS1Rp0JUdHrxlFpwaY-qpMIUpZyfN6vHTWzJfd-jWQ=s1453" title="Tecky AaryaN" />
</div>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Rock+Salt|Shadows+Into+Light|Cedarville+Cursive");
.Abt-pg {
text-align: center;
}
.Abt-img {
text-align: center;
width: 180px;
height: 180px!important;
margin: 30px auto!important;
animation: ripple 0.6s linear infinite;
border-radius: 100px!important;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 20px rgba(255, 0, 0, 0.1), 0 0 0 40px rgba(255, 0, 0, 0.1), 0 0 0 60px rgba(255, 0, 0, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.1), 0 0 0 40px rgba(255, 0, 0, 0.1), 0 0 0 60px rgba(255, 0, 0, 0.1), 0 0 0 80px rgba(255, 0, 0, 0.1);
}
}
.st-nm {
color: #555eed;
word-spacing: -8px;
}
.pTtl {
display: none;
}
.pBd h1 {
margin: 1.4em 0 20px;
}
.signature {
font-family: "Cedarville Cursive", cursive;
font-size: 1.4em;
}
.Abt-footer {
margin-top: 65px!important;
font-style: italic;
font-family: cursive;
}
</style>
<style>
/*<![CDATA[*/
/* About Author Page=*/
.aAthrP {
font-size: 0.9rem;
color: #08102b;
}
.aAthrP svg {
width: 18px;
height: 18px;
fill: none!important;
stroke: #fefefe;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
margin-right: 7px;
}
.webSts svg {
stroke: #08102b;
}
.aAdm {
padding: 60px 0 20px 0;
}
.aAdm .aAdmC {
justify-content: center;
position: relative;
display: flex;
max-width: 95%;
margin: auto;
padding: 80px 30px 95px 30px;
background-color: #fff;
box-shadow: 0 10px 40px rgba(149, 157, 165, .2);
border-radius: 20px;
}
.aAdmC img {
position: absolute;
top: -60px;
background-color: #ffeaef;
width: 120px;
height: 120px;
box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
padding: 0;
border: 7px solid #fff;
border-radius: 50%;
pointer-events: none;
}
.aAdmD {
text-align: center;
}
.aAdmD p {
margin: 0;
line-height: 1.7em;
}
.aAdmB {
text-align: center;
position: absolute;
bottom: 30px;
left: 0;
right: 0;
}
.aAdmB .btn {
display: inline-flex;
align-items: center;
margin: 0;
padding: 10px 15px;
outline: 0;
border: 0;
border-radius: 50px;
line-height: 20px;
color: #fefefe;
background-color: #ff0000;
font-size: 13px;
font-family: inherit;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
cursor: pointer;
transition: all 0.3s ease;
}
.aAdmB .btn:hover {
opacity: .8;
transform: scale(0.97);
}
.webStsH {
margin: 15px auto;
text-align: center;
font-size: 1.7rem;
font-weight: 700;
font-family: inherit;
}
.webSts {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 12px auto;
}
.webStsC {
background-color: #fff;
display: flex;
justify-content: center;
padding: 8px;
width: 95%;
margin: 12px auto;
box-shadow: 0 5px 20px rgba(149, 157, 165, .2);
border-radius: 20px;
}
.webStsC .stats {
height: 80px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 35px;
}
.webStsC .statsNa {
display: inline-flex;
align-items: center;
font-size: 16px;
}
.webStsC .statsNu {
font-family: inherit;
font-size: 30px;
margin-top: 6px;
font-weight: normal;
}
.drkM .aAthrP {
color: #fefefe;
}
.drkM .aAdmC {
background-color: #252526;
box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}
.drkM .aAdmC img {
background-image: linear-gradient(to top right, #363636, #717171);
border-color: #252526;
box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}
.drkM .aAdmB .btn {
background-color: #ff0000;
}
.drkM .webStsC {
background-color: #252526;
box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}
.drkM .webSts svg {
stroke: #fefefe;
}
@media screen and (min-width: 641px) {
.aAdm .aAdmC {
max-width: 97%;
}
.webSts {
flex-direction: row;
}
.webStsC {
max-width: 46%;
margin: 12px;
}
}
/*]]>*/
</style>
<script>
/*<![CDATA[*/
function webStats(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t, 10))
}
/*]]>*/
</script>
<!--[ About Author Page ]-->
<div class="aAthrP">
<!--[ About Author ]-->
<div class="aAdm">
<div class="aAdmC">
<!--[ Author Description ]-->
<div class="aAdmD">
<p>Our Website Provides You Information About Blogging, Tips & Tricks, Blogger Widgets, Free Tools To Set Up Your Site And Much More..</p>
</div>
<!--[ Author Button ]-->
<div class="aAdmB">
<a class="btn" href="#">Contact Me</a>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Step 5: Now click on save if you have followed all steps.
Conclusion
I hope you have successfully added your About Page. If you are facing any problem in any section or you have any question then ask us in the comment box.
Copyright: