إضافة صندوق الكاتب في الشريط الجانبي sidebar

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

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

 

طريقة تركيب صندوق الكاتب لمدونات بلوجر :

1. توجه الى لوحة تحكم بلوجر 
2. تخطيط ثم حدد مكان في السيدبار الجانبي للمدونة و قم بإضافة أداة جديدة 
3. حدد أداة html/JavaScript 
4. قم لصق الكود التالي في الصندوق ثم قم بحفظ :

 <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk6mJC1MRZx0FrZ2sJqhiUGcJgFkbB1hhsION6wR6txdiYI-w9kth1jR07CxyvtsXBbe7HmkuEOw2O10rzt8-_FgREntVs6FQYTd32MMz4Jo5QirJYpkVWXdQkyrBdS8SEvIZSFoLOrXo/s1600/ayudadeblogger-page.png" alt="Ayudadeblogger" title="Luis Chávez"/></div>
 <img class="profilex" src="https://lh5.googleusercontent.com/-wHTrVSEur8U/AAAAAAAAAAI/AAAAAAAAGOg/SUsmoFlYwRE/s512-c/photo.jpg" title="Luis Chávez"/>
 <h4>المحترف العربي</h4>
 <p>مدون على منصة بلوجر و محترف في مجموعة من مجالات الويب كا التصميم و كتابة المحتوى التقني و ووو</p>
 <a class="mibutton linkcircle" href="https://plus.google.com/u/0/+proarabic"><i class="fa fa-user"></i></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> 

• تعديل على الصندوق

قم بتغيراسم الكاتب داخل الكود
لاضافة رابط صفحتك على الفيسبوك او تويتر غير الكود https://plus.google.com/u/0/+proarabic'  ب href='هنا رابط صفحتك على الفايسبوك'
وهنا تكونوا انتهينا من موضوع اليوم حول إضافة صندوق الكاتب بجانب المدونة سايدبار بشكل أنيق و جذاب أتمنى أن تكونوا قد استفدتما من درس اليوم و ندعوكم الي متابعتنا على مواقع تواصل اجتماعي حتى تتوصلوا بكل مواضيع القادمة من إضافات و قوالب بلوجر الجديدة إنشاء الله و شكرا لكم.