مدونة هلا تك

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

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

بعدة خطوات بسيطة جدا

الاضافة مهمة و تعطي جمالية للقالب و هي متجاوبة

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

نذهب الى المظهر و نبحث عن ]]></b:skin> و نوضع الكود التالي فوقه

.authorboxwrap{background: #fff; border-bottom: 4px solid #eee; padding: 15px 0;overflow: hidden;} .avatar-container {float:right; border: 4px solid #ef5350; border-radius: 6px;} .avatar-container img{width:100px;height:auto;max-width:100%!important} .author_description_container h4{font-weight:600;font-size:16px; padding: 0px 135px 5px 5px; border-bottom:4px solid #EF5350;display:block;margin:0;margin-bottom:2px} .author_description_container h4 a{color:#333} .author_description_container h4 a:hover{color:#404040} .author_description_container p{margin:0;color:#333;font-size:17px; padding: 0px 135px 5px 5px;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 i { background: #f0f0f0; color: #787878; font-size: 17px; text-align: center; display: inline-block; padding: 7px 25px; margin: 0px 3px;border-radius:60px; } .author-box .avatar{margin-left: 2.4rem; float: right !important; border: 2px solid #F0F0F0; padding: 2px;}i.fa.fa-laptop:hover { color: #ffffff;background: #ff5e00;}i.fa.fa-facebook:hover { background: #3b5998;color: white;}i.fa.fa-twitter:hover {background: #55acee;color: white;}i.fa.fa-google-plus:hover {background: #9e0000;color: white;}i.fa.fa-envelope-o:hover {background: #ff0000;color: white;}

الكود التالي يوضع في المكان المناسب مثلا فوق ازرار التواصل الاجتماعي الموجودة بداخل المواضيع او

فوق مواضيع ذات صلة

<b:if cond='data:blog.pageType == "item"'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img src="https://i.imgur.com/hF94ahW.jpg"/>
</a>
</div>
<div class='author_description_container'>
<h4><span>كاتب الموضوع : </span><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:rgb(17, 143, 249);font-size:16px;' title='Verified Author'/> </h4>
<p>
مدونة هلا تك مدونة تقنية تهتم بكل ما هو جديد في عالم التقنية .
</p>
</div>
</div>
<ul class='social-links'>
<li class='first'><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<li><a class='email-link' href='mailto:yourmail@domain.com'><i class='fa fa-envelope-o'/></a></li>
<li class='last'><a href='/'><i class='fa fa-laptop'/> </a></li>
</ul>
</div>
</b:if>

اذا لم تظهر الايقونات يجب اضافة الكود التالي اسفل <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

ملاحظة

قم بتغير # برابط صفحتك و غير الصورة بصورة مناسبة

و نقوم بالحفظ و مبروك الاضافة المميزة

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب صندوق تعريف الكاتب لقوالب البلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.