said
11-01-2013, بتوقيت غرينيتش 08:17 AM
الشرح طريقة مقدم من
http://technology4ar.blogspot.com/20...r-blogger.html (http://technology4ar.blogspot.com/2014/08/customizes-author-bio-for-blogger.html)
السلام عليكم و رحمة الله و بركاته
http://img01.arabsh.com/uploads/image/2014/08/19/0c34434d67fa0c.png
احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى وان قمت بتطويرها من حيث الشكل واضافة الشبكات الاجتماعية و زر الاشتراك بالمدونة blog
سوف نشرح طريقة اليوم باذن الله اضافة تعريف الكاتب لبلوجر و هى من الاضافات المهمة جدا للتعريف بكاتب الموضوع و التواصل معه و هذه الاضافة تفوق حتى الووردبريس من الناحية الجمالية و تتميز بوجود المتابعة عن طريق الشبكات الاجتماعية لمتابعة كاتب الموضوع و معرفة اخر اخباره او التواصل معه كما تتميز بزر رائع قمت باضافته اذا رغب الزائر فى الالتحاق بفريق العمل فى المدونة blog .... بدون اطالة
معاينة الاضافة ( من مدونتى فى اخر الموضوع )
http://technology4ar.blogspot.com/20...r-blogger.html (http://technology4ar.blogspot.com/2014/08/customizes-author-bio-for-blogger.html)
- شرح طريقة الاضافة
ادخل الى لوحة تحكم بلوجر > ثم اضغط على قالب template
قم باخذ نسخة احتياطية من القالب template فى حالة حدوث اى مشاكل
اضغط على " تحرير html "
قم بالبحث عن الكود code التالى عن طريق الضغط على ctrl+f
رمز PHP:
<code style="white-space:nowrap"> <code> ]]></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 == "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>
</code> </code>
- تعديلات
استبدل اسم الكاتب باسم صاحب التدوينة
استبدل نبذه عن الكاتب بنبذه مختصره عن صاحب التدوينة لا تتعدى ثلاثة اسطر حتى لا تخرب شكل الاضافة
استبدل روابط المتابعة على الشبكات الاجتماعية بالروابط الخاصة بالكاتب مثال : استبدل https://www.facebook.com/technology4ar/ برابط الفيس الخاص بصاحب التدوينه
نصيحة لاتغير روابط صور الشبكات الجتماعية لانى معدل ابعادها لتتناسب مع الاضافة
اى احد له الحق فى تطوير الاضافة لكن دون ازالة الحقوق
احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى و لكنى قمت بتطويرهـــــا
الشرح طريقة مقدم من
http://technology4ar.blogspot.com/20...r-blogger.html (http://technology4ar.blogspot.com/2014/08/customizes-author-bio-for-blogger.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://technology4ar.blogspot.com/20...r-blogger.html (http://technology4ar.blogspot.com/2014/08/customizes-author-bio-for-blogger.html)
السلام عليكم و رحمة الله و بركاته
http://img01.arabsh.com/uploads/image/2014/08/19/0c34434d67fa0c.png
احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى وان قمت بتطويرها من حيث الشكل واضافة الشبكات الاجتماعية و زر الاشتراك بالمدونة blog
سوف نشرح طريقة اليوم باذن الله اضافة تعريف الكاتب لبلوجر و هى من الاضافات المهمة جدا للتعريف بكاتب الموضوع و التواصل معه و هذه الاضافة تفوق حتى الووردبريس من الناحية الجمالية و تتميز بوجود المتابعة عن طريق الشبكات الاجتماعية لمتابعة كاتب الموضوع و معرفة اخر اخباره او التواصل معه كما تتميز بزر رائع قمت باضافته اذا رغب الزائر فى الالتحاق بفريق العمل فى المدونة blog .... بدون اطالة
معاينة الاضافة ( من مدونتى فى اخر الموضوع )
http://technology4ar.blogspot.com/20...r-blogger.html (http://technology4ar.blogspot.com/2014/08/customizes-author-bio-for-blogger.html)
- شرح طريقة الاضافة
ادخل الى لوحة تحكم بلوجر > ثم اضغط على قالب template
قم باخذ نسخة احتياطية من القالب template فى حالة حدوث اى مشاكل
اضغط على " تحرير html "
قم بالبحث عن الكود code التالى عن طريق الضغط على ctrl+f
رمز PHP:
<code style="white-space:nowrap"> <code> ]]></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 == "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>
</code> </code>
- تعديلات
استبدل اسم الكاتب باسم صاحب التدوينة
استبدل نبذه عن الكاتب بنبذه مختصره عن صاحب التدوينة لا تتعدى ثلاثة اسطر حتى لا تخرب شكل الاضافة
استبدل روابط المتابعة على الشبكات الاجتماعية بالروابط الخاصة بالكاتب مثال : استبدل https://www.facebook.com/technology4ar/ برابط الفيس الخاص بصاحب التدوينه
نصيحة لاتغير روابط صور الشبكات الجتماعية لانى معدل ابعادها لتتناسب مع الاضافة
اى احد له الحق فى تطوير الاضافة لكن دون ازالة الحقوق
احقاقاً للحق الاضافة من تصميم الاخ جلال البعدانى و لكنى قمت بتطويرهـــــا
الشرح طريقة مقدم من
http://technology4ar.blogspot.com/20...r-blogger.html (http://technology4ar.blogspot.com/2014/08/customizes-author-bio-for-blogger.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
