How to make author awesome blog page.
It's very esay way to make for all blog site support. so start now. at first chose you want use this page or this awesome page. then make this page name your wise .
or
01. go to your blogger.com and go page.
02. Make an page name[with your wise]
03. if you can see compose view then active HTML View
04. Copy under CSS code and past your page.
<style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"About"}
/* About Author CSS */ .aboutAuthor{padding:60px 0 20px 0} .aboutAuthor .aboutCont{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} .aboutAuthor .aboutCont img{box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;width:120px;height:120px;position:absolute;border-radius:50%;top:-60px;pointer-events:none} .aboutAuthor .aboutCont p{margin:0;text-align:center;font-family:var(--fontBa)} .drK .aboutAuthor .aboutCont{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)} .drkM .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aboutAuthor .aboutCont img{border-color:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* About Author Button */ .aboutAuthor .aboutCont .athrBtn{text-align:center;position:absolute;bottom:0;left:0;right:0} .aboutAuthor .aboutCont .athrBtn .button{border-radius:50px;margin:0 0 30px} .aboutAuthor .aboutCont .athrBtn .button svg{stroke:var(--darkT);margin-right:5px}
/* Website Stats */ .statsHeading{text-align:center} .statsWebsite{display:flex;flex-wrap:wrap;flex-direction:column;margin:12px auto} .statsCont{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} .statsCont .stats{height:80px;width:200px;display:flex;align-items:center;justify-content:center; flex-direction:column; margin:0 35px} .statsCont .statsName{display:inline-flex;align-items:center;font-size:16px;font-family:var(--fontBa)} .statsCont .statsName svg{margin-right:7px} .statsCont .statsNumber{font-family:var(--fontB);font-size:30px;margin-top:6px;font-weight:normal} .statsNumber.v >span::before{content:attr(data-text)} .drK .statsCont{background-color:var(--darkBs);box-shadow:0 5px 20px rgba(0,0,0,.2)}
/* To change Profile background */
/* Light Mode */
.aboutAuthor .aboutCont img{background-color:#ffeaef}
/* Dark Mode */
.drK .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171)}
/*]]>*/</style>
<style type="text/css">
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}body{font-family:"noto sans",sans-serif;}.timeline{overflow-x:visible;}
.timeline ul{padding:0px 0;}
.timeline ul li{list-style-type:none;position:relative;width:6px;margin:0 auto;padding-top:50px; box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 20%);
background: #41B37590;}
.timeline ul li::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:inherit;z-index:1;}
.timeline ul li div{position:relative;bottom:0;width:400px;padding:15px;background: #ffffff10;box-shadow: 0 10px 40px rgb(0 0 0 / 20%);
border-radius: 10px;}
.timeline ul li div::before{content:"";position:absolute;bottom:7px;width:0;height:0;border-style:solid;}
.timeline ul li:nth-child(odd) div{left:45px;}
.timeline ul li:nth-child(odd) div::before{left:-15px;border-width:8px 16px 8px 0;border-color:transparent #f0f1ff transparent transparent;}
.timeline ul li:nth-child(even) div{left:-439px;}
.timeline ul li:nth-child(even) div::before{right:-15px;border-width:8px 0 8px 16px;border-color:transparent transparent transparent #f0f1ff;}time{display:block;font-size:1.2rem;font-weight:bold;margin-bottom:8px;}
.timeline ul li::after{transition:background 0.5s ease-in-out;}
.timeline ul li.in-view::after{background:#41B375;}
.timeline ul li div{visibility:hidden;opacity:0;transition:all 0.5s ease-in-out;}
.timeline ul li:nth-child(odd) div{transform:translate3d(200px,0,0);}
.timeline ul li:nth-child(even) div{transform:translate3d(-200px,0,0);}
.timeline ul li.in-view div{transform:none;visibility:visible;opacity:1;}@media screen and (max-width:900px){.timeline ul li div{width:200px;}
.timeline ul li:nth-child(even) div{left:-289px;}}@media screen and (max-width:600px){.timeline ul li{margin-left:20px;}
.timeline ul li div{width:calc(100vw - 91px);}
.timeline ul li:nth-child(even) div{left:45px;}
.timeline ul li:nth-child(even) div::before{left:-15px;border-width:8px 16px 8px 0;border-color:transparent #f0f1ff transparent transparent;}}
.timeline-clippy ul li::after{width:40px;height:40px;border-radius:0;}.timeline-rhombus ul li::after{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);}
.timeline-rhombus ul li div::before{bottom:12px;}.timeline-star ul li::after{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.timeline-heptagon ul li::after{clip-path:polygon(50% 0%,90% 20%,100% 60%,75% 100%,25% 100%,0% 60%,10% 20%);}.timeline-infinite ul li::after{animation:scaleAnimation 2s infinite;}
@keyframes scaleAnimation{0%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.25);}100%{transform:translateX(-50%) scale(1);}}
/* Dark Mode */
.drK ..timeline ul li.in-view div .timeline ul li.in-view div img{background-image:linear-gradient(to top right,#363636,#717171)}
</style>
05. Then Under HTML Code copy and past.
<!--[ About Author ]-->
<div class='aboutAuthor'>
<div class='aboutCont'>
<!--[ Author Profile Picture, Recommended Sizes: 1280×1280px, 720×720px below 30KB for fast loading, use transparent picture ]-->
<img alt='alt_here' src='https://blogger.googleusercontent.com/img/a/AVvXsEjVGyOjzXbZGOyB7QrGvq8wYHB1JzceSvxYhZkTtFJTvsklfUcvdfKvJT0Hw4fNfdG4XLMo8ES3aTyLWIbBSzE0uvWGxs9Q_lxDE6nPczRBhA1bLopcHwO5OjUz_k8xOgOdQkmrL9k4ruH5q22K5_GvkxDi8ipRRdRpdZKLZIy6M9IAZ0aN8NSy-j4E=s1005' />
<!--[ Author Description ]-->
<p>Lorem ipsum dolor sit amet. Qui ratione rerum vel odit alias qui totam placeat! Aut esse sint hic possimus reprehenderit et consectetur beatae voluptates fugit. A earum vero et quos ipsa vel voluptatum sequi vel numquam nostrum eum explicabo vero.This is a sample About Us/About Author Page.</p>
<div class='athrBtn'>
</div>
</div>
</div>
<section class="timeline">
<ul>
<li>
<div>
<time>1934</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1937</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1940</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1943</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1946</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1956</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1957</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1967</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1977</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>1985</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>2000</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
<li>
<div>
<time>2005</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
</div>
</li>
</ul>
</section>
Note:
Change Img link , TIME and Text your won style...
06.Under JAVASCRIPT code copy and past same page.
<script>
(function () {
"use strict";
// define variables
var items = document.querySelectorAll(".timeline li");
// check if an element is in viewport
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
// listen for events
window.addEventListener("load", callbackFunc);
window.addEventListener("resize", callbackFunc);
window.addEventListener("scroll", callbackFunc);
})();
function statsPst(json){var el = qSel('.statsNumber.p');el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</span>'};
function statsCmt(json){var el = qSel('.statsNumber.c');el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</span>'};
if(isPrivateBlog!='true'){
Defer.js(blogUrl+'feeds/posts/default?alt=json-in-script&callback=statsPst', 'sts-pst');
Defer.js(blogUrl+'feeds/comments/default?alt=json-in-script&callback=statsCmt', 'sts-cmt');
};
</script>
Related Posts
07. Then publish or save and see this page nice work.
If any part of this post is on your website, please let me know. Then enter your complaint on the contact page of this website. You can add your credit here if you want and then allow. We will try to contact you as soon as possible.
Refrence :
Smart Tech Carry
Rate This Article
Thanks for reading: How to make author/about awesome blogger web page [New Update]:)
Conclusion
In this article, I have shared How to make author/about awesome blogger web page [New Update]. I hope you have liked it Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily. Thank you!