 |
اضافه صندوق التعريف بالكاتب في الشريط الجانبي | اضافات بلوجر 2020
السلام عليكم متابعي مدونه عيون للمعلوميات , في هذا الموضوع سوف نقدم لحضراتكم اداه جديده للتعريف او الترحيب بالكاتب وهذا الموضوع استكمالا للموضوعات الخاصه بقسم اضافات بلوجر والتي قدمنا فيه العديد من الادوات الرائعه التي يمكنك استخدامها لجعل مدونتك ذو شكل جمالي .
اضافه صندوق التعريف بالكاتب في الشريط الجانبي | اضافات بلوجر 2020
أولا : تعريف الاداه
الاداه عباره عن واجهه مربعه يتم من خلالها الترحيب بالكاتب الجديد او اعلان الكاتب المميز علي المدونه او يمكنك استخدامها لتعريف الزائر عن الكاتب الذي يقوم بكتابه المقالات المتواجده علي المدونه ويكون بها رابط للتواصل مع الكاتب او للدخول الي البروفايل الخاص به لمعرفه معلومات اكثر عنه .
ثانيا : شكل الاداه ومقاساتها و اماكن وضعها في المدونه
شكل الاداه :
الاداه عباره عن واجهه مربعه يتم عرض معلومات عن الكاتب من خلالهامقاسات الاداه :
300 * 300 بيكسل
الاماكن المفضله للاداه :
في الشريط الجانبي للمدونه
طريقه تركيب الاداه في الشريط الجانبي للمدونه :
- قم بالدخول الي المدونه التي تريد تركيب الاداه عليها
- قم بالدخول الي قسم التخطيط
- قم بانشاء اداه HTML جديده
- قم بنسخ الكود التالي ولصقه داخل الاداه الجديده
الكود من هنا :
<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/AVvXsEjf9nNlBmWyXIWtTJpZY0mC6Wacy3P9tPPk1mJQkP9NxjNXqoerfbG12R7-gd9itxXAxQCDT_iNC_NBnUFPzYpx9QF87_E18VfFFBFiOx4IHDJRhYb6Nxqxg4Q6B_O79zzgj3iZXcTJZmw/s320/3yoon.jpg" title="AMRO ADEL"/></div>
<img class="profilex" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9nNlBmWyXIWtTJpZY0mC6Wacy3P9tPPk1mJQkP9NxjNXqoerfbG12R7-gd9itxXAxQCDT_iNC_NBnUFPzYpx9QF87_E18VfFFBFiOx4IHDJRhYb6Nxqxg4Q6B_O79zzgj3iZXcTJZmw/s320/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='ضع رابط صفحه التواصل او البروفايل هنا'
- يمكنك تغيير مقاسات الصندوق من خلال تغيير مقاسات العرض و الطول
الي هنا نكون قد وصلنا الي نهايه الشرح النظري لطريقه تركيب الاداه الخاصه بصندوق التعريف بالكاتب و يمكنك متابعه الشرح العملي من خلال الفيديو الخاص بالطريقه .