صندوق نبذة تعريفية عن الكاتب بشكل لطيف أسفل التدوينات

بسم الله الرحمن الرحيم

إضافة نبذة تعريفيه عن الكاتب أو المدون أسفل كل تدوينة بشكل جديد وحصرى ورائع جداً + أيقونات المتابعه على الجنب الكود رائع جداً ومطلوب فهو مهم جداً للزائر حتى يتعرف عليك من خلال تدويناتك التى تتدونها على مدونتك سواء كانت مدونة فردية أو جماعية والآن مع شرح تركيب الكود + والمعاينة المباشرة .

معاينة

لوحة التحكم / تحرير القالب / إبحث عن هذا الكود <data:post.body/>  وضع أسفله مبتشرة الكود التالى

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='about-author'>
<h3 class='boxtitle'>عن الكاتب</h3>
<div class='authorbox'>
<div class='authorsocial'>
  <li><a class='fb' href='http://facebook.com/mdwanblog' rel='nofollow'/></li>
  <li><a class='twitter' href='http://twitter.com/mdwanblog' rel='nofollow'/></li>
  <li><a class='google' href='https://plus.google.com/mdwanblog' rel='author'/></li>
  <li><a class='in' href='http://sa.linkedin.com/in/mdwanblog' rel='nofollow'/></li>
</div>
  <div class='authorinfo'>
<img src='http://ar-bl.net/up/uploads/13840352511.png'/>
<p>تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -<a href='#'>تعرف على أكثر</a></p>
</div>
</div>
</div>
</b:if>

مع تغير ما باللون       بالروابط الخاصة بك

الخطوة الثانية تركيب جزء الـ css:

إبحث عن هذا الوسم وضع فوقه مباشرة الكود التالى  ]]></b:skin> 

.about-author {
    width: 100%;
}
.authorbox {
    overflow: hidden;
    padding: 0;
    background: #333;
    color: #ccc;
}
.authorbox .authorinfo {
    color: #ccc;
}
.authorbox .authorsocial {
    float: left;
}
.authorbox .authorsocial li {
    list-style: none;
    margin: 0;
    position: relative;
}
.authorbox .authorsocial li a {
    width: 32px;
    display: block;
    background: url(&quot;http://softglad.at.ua/images/social-logo32.png&quot;);
    height: 32px;
    margin: 0;
}
.authorbox .authorinfo img {
    float: left;
    margin: 4px 10px 4px 5px;
    border-radius: 100%;
    width: 17%;
    background: #fff;
    padding: 5px;
}
.authorbox .authorinfo p {
    margin: 0;
    font-size: 18px;
    padding: 0 5px;
    line-height: 25px!important;
    font: 15px &quot;Armata&quot;, Arial;
    text-align: left;
}
.authorinfo p a {
    text-decoration:none;
    color:#fff;
}
.authorbox h3 {
    margin: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    font: bold 20px Arial;
    padding: 5px 20px;
}
h3.boxtitle {
    background: #333;
    color: #fff;
    margin: 0 auto;
    width: 25%;
    text-align:center;
    font: bold 16px &quot;Armata&quot;, Arial
}
.authorbox .authorsocial li .fb {
    background-position: 0px 0px;
}
.authorbox .authorsocial li .twitter {
    background-position: 0px -32px;
}
.authorbox .authorsocial li .google {
    background-position: 0px -64px;
}
.authorbox .authorsocial li .in {
    background-position: 0px -96px;
}
.authorbox .authorsocial li .in:hover {
    background-position: -32px -96px;
}
.authorbox .authorsocial li .google:hover {
    background-position: -32px -64px;
}
.authorbox .authorsocial li .twitter:hover {
    background-position: -32px -32px;
}
.authorbox .authorsocial li .fb:hover {
    background-position: -32px 0px;
}
.authorbox:hover img {
    background: #1BC3F8;
}
.authorbox .authorinfo img, .authorbox .authorsocial li a {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

وأخيراً قم بحفظ قالبك