اضافة تعريف الكاتب روعة لبلوجر افضل حتى من الووردبريس
السلام عليكم و رحمة الله و بركاته
http://img01.arabsh.com/uploads/imag...434d67fa0c.png
احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى وان قمت بتطويرها من حيث الشكل واضافة الشبكات الاجتماعية و زر الاشتراك بالمدونة blog
سوف نشرح طريقة اليوم باذن الله اضافة تعريف الكاتب لبلوجر و هى من الاضافات المهمة جدا للتعريف بكاتب الموضوع و التواصل معه و هذه الاضافة تفوق حتى الووردبريس من الناحية الجمالية و تتميز بوجود المتابعة عن طريق الشبكات الاجتماعية لمتابعة كاتب الموضوع و معرفة اخر اخباره او التواصل معه كما تتميز بزر رائع قمت باضافته اذا رغب الزائر فى الالتحاق بفريق العمل فى المدونة blog .... بدون اطالة
معاينة الاضافة ( من مدونتى فى اخر الموضوع )
http://technology4ar.blogspot.com/20...r-blogger.html
- شرح طريقة الاضافة
- ادخل الى لوحة تحكم بلوجر > ثم اضغط على قالب template
- قم باخذ نسخة احتياطية من القالب template فى حالة حدوث اى مشاكل
- اضغط على " تحرير html "
- قم بالبحث عن الكود code التالى عن طريق الضغط على ctrl+f
رمز PHP:
]]>b:skin>
- ثم قم بلصق الكود code التالى قبله :
رمز PHP:
/* 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 التالى
رمز PHP:
<div class='post-footer'>
- الصق بعده مباشرة الكود code التالى
رمز PHP:
<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='تابعنى على جوجل 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>
- تعديلات
- استبدل اسم الكاتب باسم صاحب التدوينة
- استبدل نبذه عن الكاتب بنبذه مختصره عن صاحب التدوينة لا تتعدى ثلاثة اسطر حتى لا تخرب شكل الاضافة
- استبدل روابط المتابعة على الشبكات الاجتماعية بالروابط الخاصة بالكاتب مثال : استبدل https://www.facebook.com/technology4ar/ برابط الفيس الخاص بصاحب التدوينه
- نصيحة لاتغير روابط صور الشبكات الجتماعية لانى معدل ابعادها لتتناسب مع الاضافة
- اى احد له الحق فى تطوير الاضافة لكن دون ازالة الحقوق
- احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى و لكنى قمت بتطويرهـــــا
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
