إضافة صندوق الكاتب بجانب المدونة سايدبار بشكل أنيق و جذاب مرحبا أصدقائي
الكرام كما وعدناكم في الدروس السابقة بتقديم أفضل قوالب و إضافات بلوجر
للمدونين و المبتدئين في التدوين، اليوم سأقدم لكم إضافة احترافية من أفضل
إضافات بلوجر الحصرية التي نراها على أشهر المواقع و مدونات بلوجر المميزة.
طريقة تركيب صندوق الكاتب لمدونات بلوجر :
- توجه الى لوحة تحكم بلوجر
- تخطيط ثم حدد مكان في السيدبار الجانبي للمدونة و قم بإضافة أداة جديدة
- حدد أداة html/JavaScript
- قم لصق الكود التالي في الصندوق ثم قم بحفظ :
1234567891011121314151617181920212223 <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='هنا رابط صفحتك على الفايسبوك'
وهنا تكونوا انتهينا من موضوع اليوم حول إضافة صندوق الكاتب بجانب المدونة سايدبار بشكل أنيق و جذاب أتمنى أن تكونوا قد استفدتما من درس اليوم و ندعوكم الي متابعتنا على مواقع تواصل اجتماعي حتى تتوصلوا بكل مواضيع القادمة من إضافات و قوالب بلوجر الجديدة إنشاء الله و شكرا لكم.
لا تقرأ وترحل .. شارك قول رأيك
0 تعليقات:
لتضمين -رابط- نص قابل للنقر إستعمل:
لتضمين شريحة صور إستعمل:
لتضمين إقتباس فقرة إستعمل:
لتضمين فيديو من يوتيوب إستعمل: