إضافة عن الكاتب بشكل إحترافي

طريقة التركيب

.author-technomee h3 span{ color:#465769;}
.author-technomee h3{     color: #fff;    font-size: 23px;
font-weight: 100;}
.author-technomee p{color: #fff}
.author-technomee img{         width: 100px;
height: 100px;
text-align: center;
border: 2px solid #ffffff;
border-radius: 90px;
position: absolute;
right: 0;
left: 0;
top: -50px;
margin: auto;}
.author-technomee{
border:1px solid #2a4057;
border-left: 0;
text-align: center;
position: relative;
border-right: 0;
padding: 20px 0;
background: rgb(36, 55, 80) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_u_z2CUXpsol03SxGiFVyfXvEFA7456cgzuHtBuGLAlNcBfojJGYK23hDxNnsZv3QAskLpHpGx7Kta3jjYNnMR9why2iKpab4ibXFsj40xV9dsBJHnbmPK5PD4xP1zWRrOj1CmQEUGo/s1600/Nature_Persian-Star.png);
padding-top: 64px;
color: #fff;
margin: 42px auto;
margin-bottom: 12PX;
width: 100%;
}
.author-technomee a {
color: #fff;
}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="author-technomee">
<img alt="technomee" class="author_avatar" expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' width='100%'/>
<h3>
  الكاتب : <span>
<a href="#" rel="author"><data:post.author/></a>
</span>
</h3>
<p>
مدون جزائري, 13 سنة مصمم قوالب بلوجر ومهووس بالتقنية هذفي هو نشر المحتوى الحصري لارتقاء الويب العربي, قمت بإنشاء مدونة technomee سنة 2021 وأسعى إلى أن تكون من إحدى أفضل المدونات العربية.  </p>
</div>
</b:if>