صورة للإضافة
شرح طريقة التركيب
أولا, وكالعادة نبدأ بوضع أكواد Css, نقوم بالبحث بواسطة Ctrl+F عن الوسم ]]></b:skin> ونضع فوقه مباشرة الأكواد التالية..author-nak1ha h3 span{ color:#465769;}ثانيا, نقوم بوضع أكواد Html لتظهر الإضافة, عليك وضعها في المكان الذي تريد أن تظهر فيها بين <body> و </body>
.author-nak1ha h3{ color: #fff; font-size: 23px;
font-weight: 100;}
.author-nak1ha p{color: #fff}
.author-nak1ha 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-nak1ha{
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/AVvXsEhgQU82zmQJ8vwCeos-vIPv1M1Y_zdlrPtBJjMClaMf4F04CmGcE52dABXjL9s8fSl59dlcUpIJptzsjlbtVyT_8LW5phOUlfyN0KvEO625xbV30t8H5-qLgxb03gOrdVaSGFdM6SWNoOc/s1600/Nature_Persian-Star.png);
padding-top: 64px;
color: #fff;
margin: 42px auto;
margin-bottom: 12PX;
width: 100%;
}
.author-nak1ha a {
color: #fff;
}
<b:if cond='data:blog.pageType == "item"'>
<div class="author-nak1ha">
<img alt="نكهة التقنية" 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>
مدون مغربي, 17سنة مصمم قوالب بلوجر ومهووس بالتقنية هذفي هو نشر المحتوى الحصري لارتقاء الويب العربي, قمت بإنشاء مدونة نكهة التقنية سنة 2016 وأسعى إلى أن تكون من إحدى أفضل المدونات المغربية. </p>
</div>
</b:if>
وأخيرا, غير التعريف الملون بـالأزرق بما يناسبك واحفظ القالب
إلى هنا نكون وصلنا الى آخر الموضوع وكالعادة لا تبخلو علينا بآرائكم في التعليقات لتشجيعنا على تقديم المزيد..
اشكرك و لكنني لا يمكنني تحديد الكودات هل من الممكن ان ترفعهم عن طريق احد مراكز الرفع و شكرا لك
ردحذف