اضافة تعريف الكاتب لبلوجر

ان اضافة تعريف الكاتب او صاحب التدوينة في نهاية المقال في مدونات بلوجر اصبحت من الاضافات المهمة لمدونة بلوجر لانه يجعل من مدونتك مدونة احترافية و يعطي نبذا عنك لزوار مدونتك ليكونوا من متابعيك.


هناك الكثيير من الاضافات في الانترنت و كلها جميلة و لكن تنقصها شيء ما من الجودة و الاحترافية والبساطة اللازمة و معظمها 
لذلك ساقدم لكم باسم مدونة ابوقاعود اداة تعريف كاتب الموضوع الاحترافية 2017

الاضافة التي ساقدمها فيها نبذة عن الكاتب و اسمه الصورة الخاص به مع 5 من المواقع الاجتماعية الشهيرة و بازرار رائعة و مناسبة لاي مدونة



لن اطيل عليكم , المهم الاضافة هي كود css يعمل في جميع المدونات و المواقع


الخطوة الاولى

اتجه الى مدونتك  

تم اذهب الى  >> المظهر >> تحرير html >> ثم ابحث عن الكود التالي باستخدام زر CTRL+F

<div class='post-footer-line post-footer-line-1'>

ان لم تجد هذا الكود ابحث عن الكود التالي


 <b:if cond='data:post.authorAboutMe'>

الخطوة الثانية : اضف الكود التالي

                                                                                                               <div class="beh-entry-author">
<div class="author-header main-color-bg">
</div>
<div class='author-wrap'>
<div class='author-avatar'>
<img alt='author-avatar' class='avatar avatar-80 photo' height='80' src='https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/487292_327202174037831_1400015829_n.jpg' width='80'/>
</div>
<div class='author-description'>
/* هنا تكتب نبذة عن نفسك */
انا شاب في 24 من العمر بلدي الأردن و انا صاحب مدونة ابوقاعود اسعى دائما الى تقديم مقالات و شروحات لاثراء المحتوى العربي
<div class='author-link'>
/* هنا تضع رابطك في جوجل بلس */
<a href='https://plus.google.com/' rel='author'>
/* هنا تضع اسمك */
بقلم : مصعب ابوقاعود
<span class='meta-nav'/>
</a>
</div>
</div>
</div>
</div>

<div class='entry-social'>
<div class='fb'>
<a href='https://www.facebook.com' target='_blank'>Facebook</a>
</div>
<div class='twitter'>
<a href='www.twitter.com' target='_blank'>Twitter</a>
</div>
<div class='gplus'>
<a href='https://plus.google.com' target='_blank'>Google+</a>
</div>
<div class='linkedin'>
<a href='Your_Linkedin_Profile' target='_blank'>Linkedin</a>
</div>
<div class='pinterest'>
<a href='http://pinterest.com/' target='_blank'>Pinterest</a>
</div>

<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%70%20%73%74%79%6C%65%3D%22%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%30%70%78%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%37%70%78%3B%20%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%20%74%65%78%74%2D%61%6C%69%67%6E%3A%72%69%67%68%74%22%3E%3C%61%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%23%44%33%44%33%44%33%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%22%3E%50%6C%75%67%69%6E%20%62%79%3A%20%42%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%3C%2F%61%3E%3C%2F%70%3E%20'));
//-->
</Script>
</div>

<style>

.entry-social {
margin-bottom: 10px;
overflow: hidden;
}
.entry-social a {
color: #FFFFFF !important;
display: block;
font-family: &quot;Open Sans&quot;,&quot;Tahoma&quot;,&quot;Verdana&quot;,&quot;Arial&quot;,sans-serif;
font-weight: 400;
padding-left: 20px;
}
.entry-social div {
float: right;
margin-right: 10px;
width: 138px;
}
.entry-social .fb a {
background: url(&quot;http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png&quot;) no-repeat scroll 10px center #3B5999;
padding: 7px 10px 7px 10px;
}
.entry-social .fb a:hover {
background: url(&quot;http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png&quot;) no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
background: url(&quot;http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png&quot;) no-repeat scroll 8px center #01BBF6;
padding: 7px 10px 7px 10px;
}
.entry-social .twitter a:hover {
background: url(&quot;http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png&quot;) no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
background: url(&quot;http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png&quot;) no-repeat scroll 10px center #D54135;
padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
background: url(&quot;http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png&quot;) no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
background: url(&quot;http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png&quot;) no-repeat scroll 10px center #167FB1;
padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
background: url(&quot;http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png&quot;) no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
background: url(&quot;http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png&quot;) no-repeat scroll 10px center #CB2027;
padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
background: url(&quot;http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png&quot;) no-repeat scroll 10px center #B01C23;
}



.beh-entry-author {
margin-bottom: 20px;
}
.beh-entry-author .author-header {
padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
color: #000000;
}
.beh-entry-author .author-header h4 a {
color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
.beh-entry-author .author-wrap {
border: 1px solid #EEEEEE;
overflow: hidden;
padding: 12px 15px;
}
.beh-entry-author .author-avatar {
float: left;
height: 80px;
margin-right: 30px;
width: 80px;
}
.beh-entry-author .author-link {
margin-top: 5px;
}
.main-color-bg {
background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
color: #3A3A3A;
outline: 0 none;
text-decoration: none;
transition: all 0.2s ease 0s;
}
.entry-social a {
color: #3A3A3A;
outline: 0 none;
text-decoration: none;
transition: all 0.2s ease 0s;
}

</style>
*/end of the code




غير ما يوجد باللون الاحمر الى مايناسب مدونتك و يمكنك كذلك تغيير حجم الازرار و التحكم في الوانها
كلمات البحث :
اضافات بلوجر
اضافة بلوجر احترافية
اضافة تعريف الكاتب لبلوجر

  1. التدوينة التالية
  2. التدوينة السابقة
    تعليقات الموقع
    تعليقات فيسبوك
جارى التحميل ...