اضافة صندوق التعريف عن الكاتب اسفل مشاركات مدونة بلوجر author box

اضافة التعريف عن الكاتب اسفل المشاركات مع ايقونات مواقع التواصل الاجتماعى بشكل منسق وبخاصية Css ابرزهم موقع الفيس بوك facebook وموقع تويتر twitter وجوجل بلس plus.google اعتقد هم الأهم والأفضل من حيث عملية اشهار مدونتك .

الاضافة لا تحتوى على اى صور خارجية حتى تعمل الاضافة بشكل اسرع ولا تزعج الزوار فى فتح اى مشاركة فالأيقونات المضافة تم تصميمها بواسطة لغة Css .

فائدة الاضافة : كتابة نبذة عن الكاتب او عن المدونة كما تحب لكى يتم التعارف عليك من قبل المشاركين او الزوار فالأضافة قمت بتجربتها اولا حتى يتم التأكد من انها تعمل بشكل سليم قبل ان اضعها لكم .

صورة لشكل اضافة صندوق نبذه عن الكاتب :

اذا اعجبتك هذه الاضافة وتريد وضعها فى مدونتك عليك بمتابعة هذا الدرس البسيط وكيفية تركيبها بأبسط الطرق .

كيفية اضافة صندوق عن الكاتب اسفل المشاركات

بالبداية اذهب الى لوحة تحكم المدونة ومنها اختار المظهر ومن بعدها اضغط على تحرير HTML ثم اضغط على CTRL + F من لوحة المفاتيح الكيبورد لظهور خانة البحث .

الان عليك بالبحث عن هذا الكود :

]]></b:skin>

ضع فى اعلاه مباشرة هذا الكود :

/* Multiple Author Box CSS Code*/

.authorboxwrap{background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border-top:4px solid #bdc3c7;}

.avatar-container{float:left;padding:10px;margin:0 20px 0 0;background:rgba(0,0,0,0.07);border-radius:100%}

.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}

.avatar-container img:hover{transform:rotate(-15deg)}

.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}

.author_description_container h4 a{color:#333}

.author_description_container p{margin:0;color:#333;font-size:16px;margin-bottom:8px;line-height:25px;font-weight:400}

.social-links li{list-style:none!important;float:left}

.social-links a{border-bottom:none}

.social-links a:after,.social-links a:before{content:none!important}

.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}

.social-links li:nth-child(1) a{background:#516ca4;}

.social-links li:nth-child(2) a{background:#00c3f3;}

.social-links li:nth-child(3) a{background:#f20000;}

.social-links li a:hover{opacity:.9;color:#fff}

/* Multiple Author Box CSS Code*/

ثم قم بالبحث عن هذا الكود :

<div class='post-footer'>

حيث ان هذا الكود مكرر المطلوب هو الكود الثانى 

الأن ضع فى اسفلة مباشرة هذا الكود :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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='90' width='90'/>

</a>

</div>

<div class='author_description_container'>

<h4><a href='#' rel='author'><data:post.author/></a>

<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>

<p><data:post.authorAboutMe/>مدونة كينج نت هى مدونة عربية تهتم بأنشاء وتطوير مدونة بلوجر بوضع اهم المشاركات من دروس بلوجر واضافات بلوجر<b/>

</p>

<div class='social-links'>

<li><a class='external external-link' href='https://www.facebook.com/blog.kingnt' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>

<li><a class='external external-link' href='https://twitter.com/kingntblog' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>

<li><a class='external external-link' href='https://plus.google.com/101218667290115588531/posts' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>

<div class='clr'/>

</div>

</div>

</div>

</div>

<div style='clear:both'/>

</b:if>

قبل ان تحفظ متغيرات القالب عليك بعمل هذا التغيرات 

1- الكود المحدد باللون الأخضر خاص بعرض محتوى عن الكاتب اكتب ما تريد .

2- الكود المحدد باللون الأزرق خاص برابط الفيس بوك ضع رابط صفحتك .

3- الكود المحدد باللون السماوى خاص برابط تويتر ضع رابط صفحتك .

4- الكود المحدد باللون الأحمر خاص برابط جوجل بلس ضع رابط صفحتك .

بعد ان قمت بعمل هذه التغيرات اضغط على حفظ 

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

اتمنى بأن هذا الدرس اعجبكم وانتظرونى قريبا بدرس اخر من دروس بلوجر واى استفسار او اى مشكلة تواجهك اترك تعليق وان شاء الله ستجد الحل .