طريقة اضافة تعريف الكاتب لقوالب بلوجر

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

تعريف الكاتب من الاضافات المميزة في منصة بلوجر فهي تعطى نبذه تعريفية عن كاتب المقال و تمكنك من التواصل معه من خلال ايقونات التواصل الموجودة بداخلها , واليوم نقدمها لكم بتصميم فريد من نوعه مع شرح لطريقة تركيبها .

لتركيب الاضافة نتوجه الى لوحة التحكم > القالب > تحرير HTML ونبحث عن الوسم :

]]></b:skin>

ونلصق فوقه الكود التالي :

.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-family:Open Sans; font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px;font-family: Open Sans;}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

ثم نبحث عن الوسم :

<data:post.body/>

ونلصق بعده الكود التالي :

<b:if cond='data:blog.pageType == "item"'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href='http://www.ar-cher.blogspot.com'>
<img src='رابط الصورة' class='author_avatar' expr:alt='data:post.author' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4>الكاتب : <a rel='author'><data:post.author/></a></h4>
<p>
نبذة مختصرة
<data:post.authorAboutMe/>
</p>
<div class='authorsocial'>
<a class='img-circle1' facebook' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle3' href='google'nofollow' target='_blank'><i class='fa fa-google-plus'/></a><div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

ثم استبدل الكلمات " رابط الصورة " برابط صورة مناسبة خاصة بك بمقاس 110x 110 , واستبدل عبارة " نبذة مختصرة " بنبذة مختصرة عنك , بعدها قم تبديل الكلمات " facebook , google " بالروابط الخاصة بحساباتك في مواقع التواصل الاجتماعي اعلاه , ثم احفظ الاداة . لاتترددوا في طرح استفساراتكم و آرائكم في التعليقات , وشكرا لكم .