اضافة تعريف الكاتب بشكل جديد ومميز لمدونات بلوجر
اليكم كيفية اضافة صندوق تعريف المدون او الكاتب بطريقة احترافية في السايدبار
السلام عليكم متابعينا من كل انحاء الوطن العربي اتمني ان تكونوا بخير , انتظرو قريبا جيف اواي علي قالب ادس بلس لمتابعينا ,
ولندخل في موضوع اليوم وهو ضافة تعريف الكاتب بشكل جديد هذه الاضافة موجودة بالفعل في قالب ادس بلس وتستطيع معاينتها بنفسك ميزة هذه الاضافة انها سريعة ولن تؤثر علي سرعة الموقع لان ليس بها اكواد جافا فقط html وcss ولن تحتاج منك سوي خبرات بسيطة جدا في التعامل مع الاكواد ,ولندخل في شرح اليوم لوضع اضافة تعريف الكاتب في موقعك ,
وقم باضافة هذا الكود بداخلها
<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>
الشرح
قم بالذهاب الي التخطيط ثم قم باضافة أداة 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 لاتتردد في كتابته في التعليقات
تعليقات
إرسال تعليق