إضافة صندوق تعريف الكاتب v2

الكاتب بتاريخ عدد التعليقات : 9

مرحبا بكم اصدقائي بعد غياب لمدة طويلة دامت والان اعود اليكم لوضع بعض المواضيع الجميلة عن بلوجر واشياء اخرى وموضوعنا لليوم عن إضافة صندوق تعريف الكاتب اسفل المواضيع وبطريقة جديدة وبسيطة وإحترافية جدا.
1-اولا ادخل الى المدونة والقالب
2-إبحث عن ]]></b:skin>
3-ضع الكود التالي فوقه:
/* عن الكاتب th3geekweb3 */
.authorbox{background:#313B42;position:relative;height:125px;margin:10px 0;padding:20px;}
.imgavatar{float: right; position: relative; padding: 0; bottom: 15px;}
.imgavatar img{height:110px;width:110px;border:0;}
.urladmin{background:#3498db;display:block;line-height:20px;height:20px;margin-right:-44px;position:absolute;bottom:-10px;right:50%;text-align:center;width:86px;}
.urladmin a{font-family: 'Josefin Sans', sans-serif;color:#fff}
.isibox{margin-right:125px}
.authorbox h3{font-size:12px;font-weight:400;color:#fff;line-height:1.8em;border:none;text-transform:uppercase;text-decoration:none;transition:all .2s ease-in-out;margin:0}
.authorbox p{font: 14px/18px tahoma;color:#f1f1f1;line-height:23px;text-align:justify;margin:0}
.adminbox{display:inline-block;width:auto;padding:0 0;position:relative;}
.adminbox h2 {font-weight:700;font-family: 'Noto Sans Kufi Arabic', sans-serif;font-size:20px; color:#eee}
.socialadmin{display:inline-block;padding:0 0 10px;float:left}
.socialadmin a{font-size:12px;text-transform:none;padding:3px;display:inline-block;background:#fff;color:#777;border-radius:2px;text-align:center;width: 20px;}
.socialadmin a:hover{background:#3498db;color:#fff}
4-إبحث  عن: <data:post.body/>
او إبحث عن اي إضافة داخل المواضيع مثلا ازرار المشاركات معلومات التدوينة
5-ضع الكود التالي تحت ثالث واحدة:
<div class='authorbox'>
<div class='imgavatar'>
<img alt='About Author' src='//cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-35-512.png'/>
<div class='urladmin'><a expr:href='data:post.authorProfileUrl' rel='author' target='_blank'><data:post.author/></a></div>
</div>
<div class='isibox'>
<div class='adminbox'><h2>عن الكاتب</h2></div>
<div class='socialadmin'>
<a class='fa fa-twitter social-icon  size-m' href='http://www.twitter.com'/>
<a class='fa fa-facebook social-icon  size-m' href='http://www.facebook.com'/>
<a class='fa fa-google-plus social-icon  size-m' href='https://plus.google.com'/>
<a class='fa fa-youtube social-icon  size-m' href='http://www.youtube.com'/>
</div>
<p>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى</p>
</div>
</div>
6-قم بحفظ القالب واذهب للمعاينة.
إنشاء الله سوف تنجح واذا حدث اي شئ ضعه في تعلي حتى لو كلمة شكر :) انتظرونا في مواضيع اخرى.

9 تعليقات على موضوع " إضافة صندوق تعريف الكاتب v2 "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء