اضافة صندوق تعريف الكاتب لقوالب البلوجر بشكل جديد 2020
اضافة مهمة و جميلة جدا يمكن اضافتها بشكل سريع و سهولة تامة
بعدة خطوات بسيطة جدا
الاضافة مهمة و تعطي جمالية للقالب و هي متجاوبة
نذهب الى المظهر و نبحث عن ]]> و نوضع الكود التالي فوقه
.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=""></data:post></a> <i class="fa fa-check-circle" style="color: #118ff9; font-size: 16px;" title="Verified Author"> </i></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"></i></a></li>
<li><a class="external external-link" href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a class="external external-link" href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a class="email-link" href="mailto:yourmail@domain.com"><i class="fa fa-envelope-o"></i></a></li>
<li class="last"><a href="/"><i class="fa fa-laptop"> </i></a></li>
</ul>
</div>
</b:if>
اذا لم تظهر الايقونات يجب اضافة الكود التالي اسفل <head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>
قم بتغير # برابط صفحتك و غير الصورة بصورة مناسبة
و نقوم بالحفظ و مبروك الاضافة المميزة</head>