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

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

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

لتركيب الاضافة نتوجه الى لوحة التحكم > القالب > تحرير 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 == &quot;item&quot;'>
<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 " بالروابط الخاصة بحساباتك في مواقع التواصل الاجتماعي اعلاه , ثم احفظ الاداة . لاتترددوا في طرح استفساراتكم و آرائكم في التعليقات , وشكرا لكم .

الكاتب : Unknown

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر

شارك المقال

شاركه على فيسبوكشاركه على جوجل+