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

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

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

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

]]></b:skin>

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

/* 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;
}

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

<div class=’post-footer’>

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

<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/048×048/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/048×048/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/048×048/icontexto-inside-google.png’ title=’تابعنى على جوجل بلس’/></a>
<a href=’https://www.youtube.com/’><img alt=’تابعنا على youtube’ src=’https://cdn1.iconfinder.com/data/icons/inside/PNG/048×048/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/048×048/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/ برابط الفيس الخاص بصاحب التدوينه 
  • نصيحة لاتغير روابط صور الشبكات الجتماعية لانى معدل ابعادها لتتناسب مع الاضافة
  • اى احد له الحق فى تطوير الاضافة لكن دون ازالة الحقوق
  • احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى و لكنى قمت بتطويرهـــــا

المصدر

اترك تعليقاً