Hello! Welcome to
Tecky AaryaN.
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:
