15482721749897530
recent
أخبار ساخنة

اضافة تعريف الكاتب بشكل جديد ومميز لمدونات بلوجر

الخط

اضافة تعريف الكاتب بشكل جديد ومميز لمدونات بلوجر 

اليكم كيفية اضافة صندوق تعريف المدون او الكاتب بطريقة احترافية في السايدبار 
اضافة تعريف الكاتب


السلام عليكم متابعينا من كل انحاء الوطن العربي اتمني ان تكونوا بخير , انتظرو قريبا جيف اواي علي قالب ادس بلس لمتابعينا ,
ولندخل في موضوع اليوم وهو ضافة تعريف الكاتب بشكل جديد هذه الاضافة موجودة بالفعل في قالب ادس بلس وتستطيع معاينتها بنفسك ميزة هذه الاضافة انها سريعة ولن تؤثر علي سرعة  الموقع لان ليس بها اكواد جافا فقط html وcss ولن تحتاج منك سوي خبرات بسيطة جدا في التعامل مع الاكواد ,ولندخل في شرح اليوم لوضع اضافة تعريف الكاتب في موقعك , 


الشرح 

قم بالذهاب الي التخطيط ثم قم باضافة أداة HTML/JavaScript
وقم باضافة هذا الكود بداخلها 



<div class="widget-content">
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="aboutme-img">
<img alt="Author" class="img-responsive" height="auto" src="https://yt3.ggpht.com/a/AGF-l78Knbb2pW7osryy-I_u54InCjhc8oNy-NiBWw=s900-c-k-c0xffffffff-no-rj-mo" title="Author" width="300" />
</div>
</div>
<div class="aboutme-info">
<h4>اسم المدون</h4>
<p>Blogger مصري 20 سنة خبرة في Blogger وخبرة متوسطة في SEO حاصل علي شهادة المليون مبرمج عربي في تطوير المواقع وشهادة جوجل للتسويق الالكتروني , وحاصل علي شهادة في ال SEO, احب التدوين في مجال التقنية و محركات البحث </p>
</div>
<div class="aboutme-wrpicon">
<ul class="extender">
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
<style>
.aboutme-img {
position: relative;
max-height: 150px;
overflow: hidden;
}
.aboutme-img img {
max-width: 100%;
width: 100%;
}
.aboutme-info {
margin-top: 20px;
font-size: 13px;
}
.aboutme-info h4 {
margin-bottom: 10px;
font-size: 16px;
text-transform: uppercase;
color: #888;
font-weight: 700;
}
.aboutme-info p {
margin: 5px 0;
}
.aboutme-wrpicon {
display: block;
margin: 15px auto 10px auto;
position: relative;
}
.aboutme-wrpicon .extender {
width: 100%;
display: block;
}
.extender {
text-align: center;
font-size: 16px;
}
.extender .aboutme-icon {
background: rgba(0,0,0,.06);
display: inline-block;
border: 0;
margin: 0;
padding: 0;
border-radius: 3px;
}
.extender .aboutme-icon a {
display: inline-block;
font-family: fontawesome;
font-weight: 400;
color: #aaa;
height: 32px;
width: 32px;
line-height: 32px;
border-radius: 3px;
}
</style>
</div>


والرابط الملون باللون الاحمر في الاعلي هو رابط صورة المدون قم بتبديلها بما يناسبك , واسم المدون قم تغييره ايضا الي اسمك مع الوصف الذي يبدا من اول blogger مصري , وعلامة ال هاشتاج (#) قم بتبديلها بروابط التواصل الاجتماعي الخاصة بك وبعدها قم بحفظ القالب وستعمل مع الاضافة بنجاح , افضل مكان لوضع الاضافة هو السايدبار ( الشريط الجانبي) 
 انتهي موضوع اليوم لاتنسي زيارة اقسام الموقع لمزيد من الشروحات واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات  

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

نموذج الاتصال
الاسمبريد إلكترونيرسالة