اضافة تعريف الكاتب بشكل مميز واحترافى لمدونات بلوجر

اضافة تعريف كاتب "Author Bio" بطريقة احترافية اسفل كل التدوينة في مدونة بلوجر.
هناك العديد من اشكال لإضافة تعريف كاتب وفي هذه التدوينة سنقدم لكم اضفة احترافية لهذه اضافة، كما ان هذه اضافة تحتوي على روابطك الشخصية على مواقع التواصل الاجتماعي، كما ان هذه اضافة ذات تصميم انيق وجميل، ولتركيب هذه اضافة تابع معنا الشرح التالي.
اضافة تعريف الكاتب بشكل مميز واحترافى لمدونات بلوجر

كيفية تركيب اضافة على المدونة:

- من لوحة تحكم مدونتك ثم المظهر بعدها تحرير html ابحث عن الوسم التالي.
</b:skin>
بعد ايجاده ضع الكود التالي فوقه.
#author-box{margin:10px 0;}
#author-box a:hover{background:none!important;}
#author-box .row-1{background:#333;padding:20px;}
#author-box .row-1 .avatar{float:right;line-height:1;-moz-box-shadow:0 0 10px #FFF;-webkit-box-shadow:0 0 10px #FFF;box-shadow:0 0 10px #FFF;}
#author-box .row-1 .info{margin:0 110px 0 0;}
#author-box .row-1 .info h6{color:#FFF;font-size:20px;margin:-4px 0 0;}
#author-box .row-1 .info h6 span{font-size:11px;font-weight:400;background:#1BA1E2;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;filter:alpha(opacity=60);opacity:0.6;margin:0 1em 0 0;padding:1px 9px 2px;}
#author-box .row-1 .info p{color:#DDD;font-weight:400;font-size:14px;margin:0;}
#author-box .row-2 {background:#666;}
#author-box .row-2 a.social-item{display:block;float:right;color:#FFF;text-align:center;padding:15px;}
#author-box .row-2 .social-item .icon{height:32px;width:32px;}
#author-box .row-2 .social-item > span{display:block;text-align:center;margin:auto;}
#author-box .row-2 .social-item .label{font-weight:700;font-size:13px;}
#author-box .row-2 a.social-item:hover{background:#1BA1E2!important;}
#author-box .row-2 .social-item.twitter .icon{background-position:0 -32px;}
#author-box .row-2 .social-item.facebook .icon{background-position:0 -64px;}
#author-box .row-2 .social-item.gplus .icon{background-position:0 -96px;}
#author-box .row-2 .social-item.linkedin .icon{background-position:0 -128px;}
#author-box .row-2 .social-item.youtube .icon{background-position:0 -160px;}
#author-box .row-2 .social-item.pinterest .icon{background-position:0 -192px;}
#author-box .social-item .icon{background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;background-repeat:no-repeat;}
- الان اعد البحث عن الكود التالي.
<div class='post-footer'>
بعد عثورك عليه ضع الكود التالي اسفله.
<div id='author-box'><div class='row row-1'><div class='avatar'>
<a href='http://xxxxx.blogspot.com/'>
<img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://s-media-cache-ak0.pinimg.com/564x/05/8d/fb/058dfbc365f2e8b0a900c4a338e8326e.jpg' width='90'/>
</a></div><div class='info'><h6><span>هنا تكتب اسمك</span></h6>
<p><strong>هنا قم بكتابة معلومات عنك و المهارات التي تتمتع بها او اي شيء تريده</strong>
<strong>هنا الفقرة الثانية تكملة للفقرة الاولى اكتب اي شيء تريده واي شيء تتمتع به سواء عمرك او تاريخ بدايتك في التدوين</strong>
</p></div><div class='clear'/></div>
<div class='row row-2'>
<a class='social-item website' href='https://yourblog.blogspot.com/' meta='website' target='_blank'>
<span class='icon'/><span class='label'>الموقع</span></a>
<a class='social-item twitter' href='https://yourblog.blogspot.com' meta='twitter' target='_blank'>
<span class='icon'/><span class='label'>التويتر</span></a>
<a class='social-item facebook' href='https://yourblog.blogspot.com' meta='face' target='_blank'>
<span class='icon'/><span class='label'>الفيسبوك</span></a>
<a class='social-item gplus' href='https://yourblog.blogspot.com' meta='gplus' target='_blank'>
<span class='icon'/><span class='label'>جوجل +</span></a>
<a class='social-item linkedin' href='https://yourblog.blogspot.com' meta='linkedin' target='_blank'>
<span class='icon'/><span class='label'>لينكدين</span></a>
<a class='social-item youtube' href='https://yourblog.blogspot.com' meta='youtube' target='_blank'>
<span class='icon'/><span class='label'>يوتيوب</span></a>
<div class='clear'/></div></div>
الان قم بتغير رابط https://yourblog.blogspot.com بروابط الخاصة بك.
كما لا تنسى تغيير رابط الصورة الفتاة
https://s-media-cache-ak0.pinimg.com/564x/05/8d/fb/058dfbc365f2e8b0a900c4a338e8326e.jpg
برابط صورتك.
وكذلك لا تنسى اضافة اسمك وكتابة نبذة تعريفية عنك ، ثم اضغط على حفظ وشاهد النتيجة.