اضافه صندوق التعريف بالكاتب في الشريط الجانبي | اضافات بلوجر 2020

<style>
 #perfil-wrapper{font-family:'tharabic',Arial;padding:0 0 20px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);max-width:400px}
 #perfil-wrapper .perfilimg{width:100%;height:130px;float:right;overflow:hidden}
 img.profilex{width:60px;border-radius:100%;float:right;margin:-35px 20px 0;box-shadow:rgba(0, 0, 0, 0.2) 0px 8px 17px 0px, rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px}#perfil-wrapper p{padding:0 20px}
 a.linkcircle{color:#fff;background-color:#2DCC70;position:absolute;top:120px;left:30px;border-radius:100%;height:20px}
 a.linkcircle:hover{background-color:#22A65A;color:#fff}
 #perfil-wrapper h4{line-height:3;font-weight:400;font-size:15px}
 .mibutton{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}
 .mibutton:hover, #perfil-wrapper:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
 .mibutton.red{background:#2DCC70}
 </style>
 <div id="perfil-wrapper">
 <div class="perfilimg">
 <img src="https://1.bp.blogspot.com/-0dtWFMGQE48/XkU-jNHOVVI/AAAAAAAAB0I/IY9tulHLEVQFCJAHw7-mtr0PZPwxY0qbQCLcBGAsYHQ/s1600/3yoon.jpg" title="AMRO ADEL"/></div>
 <img class="profilex" src="https://1.bp.blogspot.com/-0dtWFMGQE48/XkU-jNHOVVI/AAAAAAAAB0I/IY9tulHLEVQFCJAHw7-mtr0PZPwxY0qbQCLcBGAsYHQ/s1600/3yoon.jpg" title="AMRO ADEL"/>
 <h4><span style="font-weight:bold;">مدونه عيون للمعلوميات</span></h4>
<span style="font-weight:bold;"> <p><blockquote>مدون على منصة بلوجر و محترف في مجموعة من مجالات الويب كا التصميم و كتابة المحتوى التقني و ووو</blockquote></p>
</span> <a class="mibutton linkcircle" href="https://www.3yooon.com/"></a>
 </div>
 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
 <style>
 body{margin:0;padding:0 0 1px}.content-outer,.header-outer,.tabs-outer,.main-outer,.main-inner,.footer-outer,.post,.comments,.widget,.date-header,.inline-ad{position:relative;min-height:0;_position:static;_height:1%}.footer-outer{margin-bottom:-1px}.content-inner{padding:10px}.tabs-inner{padding:0 15px}.main-inner{padding:30px 0}.main-inner .column-center-inner,.main-inner .column-right-inner,.main-inner .column-left-inner{padding:0 15px}
 </style>

طريقه تعديل الصور و التفاصيل

• لتعديل الصور و اللينكات :

قم برفع الصور التي تريدها في صفحه خاصه علي مدونتك ثم قم بنسخ رابط الصوره ووضعه بدلا من روابط الصور في المربع التعريفي و لاضافة رابط بروفايل الكاتب او اي لينك لموقع تواصل اخر قم بتغيير الكود ليصبح بهذا الشكل التالي 
 href=’ضع رابط صفحه التواصل او البروفايل هنا’

• يمكنك تغيير مقاسات الصندوق من خلال تغيير مقاسات العرض و الطول