الشرح طريقة مقدم من
http://technology4ar.blogspot.com/20...r-blogger.html





السلام عليكم و رحمة الله و بركاته



احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى وان قمت بتطويرها من حيث الشكل واضافة الشبكات الاجتماعية و زر الاشتراك بالمدونة blog


سوف نشرح طريقة اليوم باذن الله اضافة تعريف الكاتب لبلوجر و هى من الاضافات المهمة جدا للتعريف بكاتب الموضوع و التواصل معه و هذه الاضافة تفوق حتى الووردبريس من الناحية الجمالية و تتميز بوجود المتابعة عن طريق الشبكات الاجتماعية لمتابعة كاتب الموضوع و معرفة اخر اخباره او التواصل معه كما تتميز بزر رائع قمت باضافته اذا رغب الزائر فى الالتحاق بفريق العمل فى المدونة blog .... بدون اطالة

معاينة الاضافة ( من مدونتى فى اخر الموضوع )
http://technology4ar.blogspot.com/20...r-blogger.html

- شرح طريقة الاضافة


  • ادخل الى لوحة تحكم بلوجر > ثم اضغط على قالب template
  • قم باخذ نسخة احتياطية من القالب template فى حالة حدوث اى مشاكل
  • اضغط على " تحرير html "
  • قم بالبحث عن الكود code التالى عن طريق الضغط على ctrl+f


رمز PHP:
<code style="white-space:nowrap"> <code> &#93;&#93;></b:skin>
</code> </code>


  • ثم قم بلصق الكود code التالى قبله :

رمز PHP:
<code style="white-space:nowrap"> <code> /* AuthorBio By Arab Technology
----------------------------------------------- */

#mblrib {
width: 111px;
height: 111px;
margin-right:-35px;
margin-top:-15px;
background: url(https://lh4.googleusercontent.com/-1v4mDvEDEvM/UUyT59ggkVI/AAAAAAAABXs/ZQbl6vXEiEE/s109/1rib.png) no-repeat;
z-index: 7;
position:absolute;
}
.mblautbox { width:610px;}
.authorinfoname { padding-bottom:8px;padding-right:35px;width:180px;display: inline-block;background: url(http://1.bp.blogspot.com/-4a_-1hRDqKs/UgkX9z0K3PI/AAAAAAAAA_4/WaQgu2o00Ss/s1600/line.png) no-repeat 50% bottom;}
.authorinfodescription {}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #afafaf;
text-decoration: none;
outline: none;

}
.mblautinfo {
background: #f5f5f5;
margin-left:20px;
-webkit-box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
-moz-box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.75);
float:right; padding:2px;margin-right: 0px;height:110px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.mblautbox{
direction:rtl;
background:#222222;
float:center;
padding:10px 10px 10px 10px;
margin:20px 0px 5px 0;
color: #eeeeee;
font-family:GESSTwoMediumRegular;
font-size: 14px;
line-height: 26px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px;
}
#socialcontact {
direction:rtl;
float:right;
background: #12bde9;
width:400px;
margin: -5px 0px 0 0;
}
#socialcontact img {
float:right;
margin: 0 8px 0;
}
#joinus {
background: #0c96ba;
float:right;
width:230px;
height:48px;
margin-top:-5px;
}
</code> </code>

ثم قم بالبحث عن الكود code التالى

رمز PHP:
<code style="white-space:nowrap"> <code> <div class='post-footer'>
</code> </code>


  • الصق بعده مباشرة الكود code التالى

رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mblautbox'>
<div id='mblrib'>
</div>
<a class='authorinfolink' href='https://plus.google.com/u/0/103499777490414306950?rel=author' title='jalal'>
<img border='1' class='mblautinfo' src='https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/487292_327202174037831_1400015829_n.jpg' title='albaadani'/>
</a><br/>
<div>
<div class='mblautobox'>
<span class='authorinfoname'>بقلم : اسم الكاتب</span></div>
<div class='authorinfodescription'> نبذه عن الكاتب
<br/>
</div>
</div>
<div style='clear: both;'>
</div>
</div>
<div id='socialcontact'>
<a href='https://www.facebook.com/technology4ar/'><img alt='تابعنا على facebook' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png' title='تابعنى على فيس بوك'/></a>
<a href='https://www.twitter.com/technology4ar/'><img alt='تابعنا على twitter' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png' title='تابعنى على تويتر'/>
</a>
<a href='https://plus.google.com/u/0/118081890189193484869/posts'><img alt='تابعنا على google+' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png' title='تابعنى على جوجل GOOGLE بلس'/></a>
<a href='https://www.youtube.com/'><img alt='تابعنا على youtube' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-youtube.png' title='تابعنى على يوتيوب'/>
</a>
<a href='http://www.stumbleupon.com/stumbler/tpage920'><img alt='تابعنا على stumbleuop' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-stumbleupon.png' title='تابعنى على stumbleupon'/>
</a>
<a href='http://pinterest.com/spiderman0100/pins/'><img alt='تابعنا على pinterest' src='http://img01.arabsh.com/uploads/image/2014/08/19/0c34434c6df406.png' title='تابعنى على pinterest'/>
</a>

</div>
<div id='joinus'>
<a href='http://technology4ar.blogspot.com/p/blog-page.html'><img alt='انضم الى فريق العمل' src='http://img02.arabsh.com/uploads/image/2014/08/19/0c34434d66f101.png' title='انضم الى فريق العمل'/>
</a>
</div>

</b:if>
</code> </code>


- تعديلات


  • استبدل اسم الكاتب باسم صاحب التدوينة
  • استبدل نبذه عن الكاتب بنبذه مختصره عن صاحب التدوينة لا تتعدى ثلاثة اسطر حتى لا تخرب شكل الاضافة
  • استبدل روابط المتابعة على الشبكات الاجتماعية بالروابط الخاصة بالكاتب مثال : استبدل https://www.facebook.com/technology4ar/ برابط الفيس الخاص بصاحب التدوينه
  • نصيحة لاتغير روابط صور الشبكات الجتماعية لانى معدل ابعادها لتتناسب مع الاضافة
  • اى احد له الحق فى تطوير الاضافة لكن دون ازالة الحقوق
  • احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى و لكنى قمت بتطويرهـــــا



الشرح طريقة مقدم من
http://technology4ar.blogspot.com/20...r-blogger.html






©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©