السلام عليكم و رحمة الله و بركاته
سوف نشرح اليوم باذن الله اضافة تعريف الكاتب لبلوجر و هى من الاضافات المهمة جدا للتعريف بكاتب الموضوع و التواصل معه و هذه الاضافة تفوق حتى الووردبريس من الناحية الجمالية و تتميز بوجود المتابعة عن طريق الشبكات الاجتماعية لمتابعة كاتب الموضوع و معرفة اخر اخباره او التواصل معه كما تتميز بزر رائع قمت باضافته اذا رغب الزائر فى الالتحاق بفريق العمل فى المدونة .... بدون اطالة
- شرح الاضافة
- ادخل الى لوحة تحكم بلوجر > ثم اضغط على قالب
- قم باخذ نسخة احتياطية من القالب فى حالة حدوث اى مشاكل
- اضغط على " تحرير html "
- قم بالبحث عن الكود التالى عن طريق الضغط على ctrl+f
]]></b:skin>
- ثم قم بلصق الكود التالى قبله :
/* AuthorBio By Arab Technology
----------------------------------------------- */
#mblrib {
width: 111px;
height: 111px;
margin-right:-35px;
margin-top:-15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9kSaExOMLSdy4bdUP9GADmpGZWFhVtNl63SHLAaDkmTchKh8SN2DvU1U9knQaeBR98PwvBn15lEPyurVwgaw39b4riUcOxREzj6IL1tZWTXckiT88u8IRyXsGwKYlyn4weOkxzXGnHTMI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGN3PQJ_IvPkHaAHELg2oSUDi5AYivX_UNut_pkOadM3crjjsBiVod7iKTrOqQj2bdcqVg-xBTYWznoTbHh_rShYrshLSD4T41yEvydskm-s26EvaNgch3GZjdXcSc_p_AfDeZEMmqfK0/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;
}
- ثم قم بالبحث عن الكود التالى
<div class='post-footer'>
- الصق بعده مباشرة الكود التالى
<b:if cond='data:blog.pageType == "item"'>
<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='تابعنى على جوجل بلس'/></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/2013/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/2013/08/19/0c34434d66f101.png' title='انضم الى فريق العمل'/>
</a>
</div>
</b:if>
- تعديلات
- استبدل اسم الكاتب باسم صاحي التدوينة
- استبدل نبذه عن الكاتب بنذه مختصره عن صاحب التدوينة لا تتعدى ثلاثة اسطر حتى لا تخرب شكل الاضافة
- استبدل روابط المتابعة على الشبكات الاجتماعية بالروابط الخاصة بالكاتب مثال : استبدل https://www.facebook.com/technology4ar/ برابط الفيس الخاص بصاحب التدوينه
- نصيحة لاتغير روابط صور الشبكات الجتماعية لانى معدل ابعادها لتتناسب مع الاضافة
- اى احد له الحق فى تطوير الاضافة لكن دون ازالة الحقوق
- احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى و لكنى قمت بتطويرهـــــا