اهلا بكم في مدونة انا مدون اليوم اقدم لكم اضافة مميزة وجميلة الا وهي صندوق معلومات الكاتب اسفل التدوينة التصميم بسيط جداَ , يعتمد على HTML + CSS فقط لذا فهي خفيفة جداَ ولن تؤثر في سرعة القالب .
هذا الصندوق يتميز عن غيره بكونه تلقائيا اي ان معلومات الكاتب تضاف تلقائيا وخذا مهم بالنسبة لمدونات التي تتوفر على اكثر من كاتب واحد
صورة للصندوق
طريقة تركيب صندوق معلومات الكاتب اسفل التدوينة
- ادخل الى لوحة تحكم مدونتك . ولا تنسى ان تأخد نسخة احطياطية
- ثم القالب .تم تحرر القالب
- ابحث في القالب عن ]]></b:skin> و اضف الكود التالي فقه مباشرة
/* Author Box By anamudwn */
.authorboxwrap{background: #404040;margin: 0 auto 20px;padding: 20px;overflow: hidden;width: 100%;}
.avatar-container {float:right;margin-left:20px;}
.avatar-container img{width:110px;height:auto;padding:10px;background:#4a4a4a}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:15px}
.author_description_container h4 a{color:#fff}
.author_description_container h4 a:hover{color:#ddd}
.author_description_container p{margin:0;color:#ccc;font-size:95%;}
.authorsocial a{display:inline-block;text-align:center;margin-left:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {-webkit-box-sizing:initial;box-sizing:initial;background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {-webkit-box-sizing:initial;box-sizing:initial;background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {-webkit-box-sizing:initial;box-sizing:initial;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.8;}
.authorsocial {float: left;}
- ابحث في القالب عن <data:post.body/>
ستجد أكثر من واحد " يمكن خمس او اربع " ضع الكود اسفل الأخير , واذا لم ينجح الامر, جرب التي قبلها وهكذا الى ان تنجح معك.
- هذا هو الكود
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
و لا تنسي تغير رمز # بروابط التي تناسبك
ملاحظة مهمة :
المعلومات التي ستظهر هي نفسها التي كتبتها في ملفك الشخصي في google plusاتمنى ان تمون الاضافة قد نالت اعجابكم
أزال أحد مشرفي المدونة هذا التعليق.
ردحذف