جرب..ولن تندم

الاثنين، 16 يونيو 2014

إضافة تعريف الكاتب أسفل التدوينة لمدونات بلوجر

1- حول أداة  تعريف الكاتب على مدونات بلوجر وأهميتها:

نموذج أداة تعريف الكاتب لمدونة بلوجر

درس من دروس بلوجر والذي سنرى فيه طريقة إضافة  تعريف كاتب الموضوع أسفل التدونة على مدونات بلوجر. هذه الأداة تتميز بوجود صورة صاحب المدونة، مقدمة مقتضبة تحتوي بعض المعلومات عنه إضافة إلى روابط الشبكات الإجتماعية. أداة عن الكاتب ستظهر أسفل كل المشاركات أو التدوينات الخاصة بمدونتكم بحيث سيتعرف الزوار عنكم. ومن يعجب بما تقدمونه بإمكانه النقر على ازرار الشبكات الإجتماعية لمتابعتكم وهو ما سيسمح لكم بالحصول على المزيد من المتابعين.



2- إضافة أداة حول الكاتب اسفل التدوينات على لمدونات بلوجر:


لإضافة أداة تعريف الكاتب على مدونتكم يرجى تتبع هذه الخطوات:
   * الخطوة 1:
من واجهة التحكم بالمدونة نختار القالب ثم تحرير  HTML
  * الخطوة 2:
من لوحة المفاتيح Ctrl+F ثم قوموا بالبحث عن الكود التالي:
<div class='post-footer-line post-footer-line-1'>
++ ملاحظة: إذا كان الكود موجود لمرتين فيرجى العمل على الثاني وليس الأول.

  * الخطوة3:
بعد ايجادكم للكود،  قوموا بلصق هذا الكود أسفله مباشرة بعد نسخه:

<style>
.wc-aboutauthor{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png');
color:#444444;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
}
.wc-aboutauthor h2
{
color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;

}
.wc-aboutpic{
float:right;
margin:0 0 0 10px;
}
.wc-aboutpic img{
border:1px solid #999999;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}
.wc-aboutpic img:hover{
background:#FFFFFF;
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
.wc-aboutsoc img
{
height:35px;
margin-bottom:-13px;
}
.wc-aboutsoc p
{
font:16px georgia;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='150' src='رابط الصورة' width='150'/>
</div>
<h2 >عن الكاتب:</h2>
<p>تعريف الكاتب في بضعة أسطر.. لا تكتبوا قصة حياتكم هنا .. أنا أمزح معكم فقط يا شباب...  </p>
<div class='wc-aboutsoc'>
<p> للتواصل </p><a href='رابط بروفايل فايسبوك'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a> <a href='رابط بروفايل تويتر'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Twitter'/></a> <a href='رابط بروفايل جوجل بلوس' > <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div>
</div>
</b:if>

3- بعض التغييرات على أداة تعريف الكاتب:

قد ترغبون بالقيام ببعض التغييرات على أداة حول الكاتب التي قمتم بإضافتها، وإليكم بعض الخيارات التي تستطيعون التحكم بها بحسب مدونتكم:

   * باللون الأحمر: هنا ستقومون بإضافة الرابط الخاص بصورتكم. من المستحسن أن تكون بحجم 150 على 150 طول عرض. (طريقة إضافة صورة على بلوجر ونسخ رابطها).
   * باللون الأخضر: روابط البروفيلات الخاصة بكم على الشبكات الإجتماعية
   * لون عن الكاتب ومربع لنتواصل بالأزرق: قوموا بتغيير الكود لتعويض اللون الأزرق   باللون الذي تحبذونه:  0489e6

قوموا بحفظ التغييرات وشاهدوا كيف تمت إضافة صندوق تعريف كاتب الموضوع اسفل التدوينة على مدونتكم بلوجر. هذا كل ما في الأمر يا اصدقائي. لا تنسى المشاركة إذا أعجبك الدرس.

1 on: "إضافة تعريف الكاتب أسفل التدوينة لمدونات بلوجر"
  1. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ السلام عليكم
    حرب التتار - ترافيان كلاسيك
    http://travianr.com/ts7/register.php?ref=96

    ردحذف