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

في هذا الدرس الحصري الذي سأطرح فيه ثلاثة أشكال مختلفة لتعريف الكاتب التي توضع أسفل التدوينة و هي أداة مهمة جدا تحتاجها أية مدونة إذن نبدأ على بركة الله

الشكل الأول

هو شكل جميل و يمنحك زوار للمواقع الإجتماعية و أيضا الإنضمام لفريق العمل

طريقة الإضافة

تذهب إلى تحرير القالب HTML و تبحث عن الكود التالي :

]]></b:skin>

و تضيف قبلها مباشرة الكود التالي

.mblautbox { width:610px;}

.authorinfoname { padding-bottom:8px;padding-right:35px;width:180px;display: inline-block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgymCRrl-aFjWYyLeG8JKh9rVHrYTmFZjmakwkPlogfJnmVEHVar3Nwfk14gi3_VSauYrg6mtgYMd7-aX3KlTwIDtUYAAFrlpTpMeImOCBfUEODyiG87ptMlXOjqzmNFheAjU9tyD78M3Q/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;

}

.Author-Effects {

margin-right: auto;

margin-left: auto;

width: 100%;

height: 100%;

border: 1px solid rgba(0, 173, 255, 0.43);

background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,255,255,0)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);

background: radial-gradient(ellipse at center, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00ffffff',GradientType=1 );

}

.mblautbox{

direction: rtl;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1D36uxcXLyvuQmkrdxrsCz280zBTIo2sDS791QYIKbPv7Xkos9xrZTkZB-JXnPrKBP0p6xSu5o3iDEH5Em4AI_NaarqMyYJLtsWTagvkU6mFD8zWNoYhd0nYzHDrqcxSSQel0xiswG0/s1600/bk_header.png);

border-right: 3px solid #00C2FF;

border-left: 3px solid #00C2FF;

border-top: 3px solid #00C2FF;

float: center;

padding: 10px 10px 10px 10px;

margin: 5px 7px 5px 0px;

color: #FFFFFF;

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;

border-bottom: 3px solid;

border-right: 3px solid;

width: 400px;

margin: -5px 7px 0 0;

}

#socialcontact img {

float:right;

margin: 0 8px 0;

}

#joinus {

background: #0c96ba;

float: right;

width: 230px;

border-bottom: 3px solid;

border-left: 3px solid;

height: 48px;

margin-top: -5px;

}

.joinus-img {

width: 230px;

}

.my-stumpleuop:hover {

background: rgba(255, 255, 255, 0.56);

}

.my-pinterest:hover {

background: rgba(255, 255, 255, 0.56);

}

.my-youtube:hover {

background: rgba(255, 255, 255, 0.56);

}

.my-facebook:hover {

background: rgba(255, 255, 255, 0.56);

}

.my-twitter:hover {

background: rgba(255, 255, 255, 0.56);

}

.my-gplus:hover {

background: rgba(255, 255, 255, 0.56);

}

و بعدها تبحث عن الكود التالي :

<data:post.body>

ستجد أكثر من وحده " يمكن خمس او اربع " ضع الكود اسفل الأخيرة , واذا لم تنجح , جرب التي قبلها وهكذا الى ان تنجح معك.

أو ضعه أينما تريد شريطة أن تحترم شروط الــHTML | الكود التالي :

هذا هو الكود مع تعديل ما سأذكره :

<b:if cond='data:blog.pageType == "item"'>

<div class='mblautbox'>

<div class='Author-Effects'>

<a class='authorinfolink' href='https://plus.google.com/' title='bouzadi'>

<img border='1' class='mblautinfo' src='http://im58.gulfup.com/8vM82M.jpg' title='Hamza Bouzadi'/>

</a><br/>

<div>

<div class='mblautobox'>

<span class='authorinfoname'>إسم الكاتب</span></div>

<div class='authorinfodescription'>اكتب هنا نبذه قصيره عن الكاتب

<br/>

</div>

</div>

<div style='clear: both;'>

</div>

</div>

</div>

<div id='socialcontact'>

<a href='https://facebook.com/'><img alt='تابعنا على facebook' class='my-facebook' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png' title='تابعنى على فيس بوك'/></a>

<a href='https://twitter.com'><img alt='تابعنا على twitter' class='my-twitter' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png' title='تابعنى على تويتر'/>

</a>

<a href='https://plus.google.com/'><img alt='تابعنا على google+' class='my-gplus' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png' title='تابعنى على جوجل بلس'/></a>

<a href='https://youtube.com/'><img alt='تابعنا على youtube' class='my-youtube' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-youtube.png' title='تابعنى على يوتيوب'/>

</a>

<a href='https://stumbleupon.com/'><img alt='تابعنا على stumbleuop' class='my-stumpleuop' src='https://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-stumbleupon.png' title='تابعنى على stumbleupon'/>

</a>

<a href='https://pinterest.com/'><img alt='تابعنا على pinterest' class='my-pinterest' src='http://img01.arabsh.com/uploads/image/2013/08/19/0c34434c6df406.png' title='تابعنى على pinterest'/>

</a>

</div>

<div id='joinus'>

<a href='اكتب ما يناسبك هنا'><img alt='انضم الى فريق العمل' class='joinus-img' src='http://img02.arabsh.com/uploads/image/2013/08/19/0c34434d66f101.png' title='انضم الى فريق العمل'/>

</a>

</div>

</b:if>

  =استبدله برابط حسابك على الفيسبوك.
  =استبدله برابط حسابك على التويتر.
  =استبدله برابط حسابك على جوجل بليس.
  =استبدله برابط قناتك على اليوتوب.
  =استبدله برابط حسابك على ستامبليون.
  =استبدله برابط حسابك على بانتريست.
  =استبدله بما يناسبك(رابط طلب الانظمام الى فريق العمل).
  =استبدله بإسمك أو اسم الكاتب.   =استبدله بتعريف الكاتب.

و قم بحفط القالب

----------------------------------------------------------------

الشكل الثاني

شكل جميل و أكثر من رائح + ألوان جذابة و جميلة جدا + أستخدمه أنا شخصيا على مدونتي

طريقة الإضافة :

كما العادة تبحث عن الكود التاليفي تحرير القالب :

]]></b:skin>

و أضف قبله هذا الكود :

#mblrib {
width: 111px;
height: 111px;
margin-right: -15px;
margin-top: -15px;
background: url(http://im33.gulfup.com/CspXz.png) no-repeat;
z-index: 7;
position: absolute;
}
.mblautbox {border: #4f5966 solid 3px; width:100%;}
.authorinfoname { text-decoration:underline;}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #000;
text-decoration: none;
outline: none;
}
.mblautinfo {
border: #000000 solid 4px;
-moz-border-radius: 74px;
-webkit-border-radius: 85px;
border-radius: 85px;
margin-left: 20px;
float: right;
padding: 4px;
margin-right: 0px;
height: 100px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.mblautbox{
direction: rtl;
background: #59D1E2;
line-height: 1.7em;
float: center;
padding: 10px 5px 10px 1px;
margin: 21px 1px 6px 0;
color: #000000;
font-family: GE SS Two Light;
font-size: 15px;
line-height: 24px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px; }

و إبحث عن هذا الكود التالي :

<div class='post-footer'>

ضغ فوقه أو ضعه أينما تريد شريطة أن تحترم شروط الــHTML | الكود التالي :

<b:if cond='data:blog.pageType == "item"'>
<div class='mblautbox'>
<div id='mblrib'>
</div>
<a class='authorinfolink' href='رابط حسابه على الفيسبوك أو الجيميل' title='bouzadi'>
<img border='1' class='mblautinfo' src='رابط صورة الكاتب' title='bouzadi'/>
</a><br/>
<div>
<div class='mblautobox'>
<b>بقلم:</b>
<span class='authorinfoname'>إسم الكاتب</span></div>
<div class='authorinfodescription'>
نبذة عن الكاتب "يوميات بوزادي للمعلوميات"هنا
<br/>
<b>يمكنك متابعتي على:</b>
<a href='http://facebook.com/hamza.bouzadi'>فيس بوك</a> | <a href='https://twitter.com/bouzadi1'>تويتر</a> | <a href='https://plus.google.com/+hamzabouzadihamzabouzadi'>جوجل بلس</a> | <a href='http://www.youtube.com/user/hamzabouzadi/'>يوتيوب</a> | <a href='http://www.bouzadi.com/'>الموقع</a>.</div>
</div>
<div style='clear: both;'>
</div>
</div>
</b:if>
</b:if>
</div>

و قم بتغيير ما هو محاط بلون و إعمل حفظ القالب

-----------------------------------------------------------------

الشكل الثالث

و هو شكل جميل أيضا و جيد و خفيف و هو من تصميم حلول بلوجر و يستعمله الكثير في مدوناتهم

طريقة الإضافة

تذهب إلى تحرير القالب HTML و تبحث عن الكود التالي :

]]></b:skin>

و تضيف قبلها مباشرة الكود التالي :

<div class='bouzadi'>
<img src='http://www.gravatar.com/avatar/92e1beaa140f01b72d6566db567330a0.png'/>
<a href='http://www.رابط-موقعك.com'>Karim AmGuine</a>
<p>اسمي عبدالله : من المملكة العربيه السعوديه , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..</p>

<div id='bouzadi-icons'>
<a href='http://www.رابط-الفيسبوك.com'><img src='https://jetara.googlecode.com/files/facebook34.png'/></a>
<a href='http://www.رابط-تويتر.com'><img src='https://jetara.googlecode.com/files/twitter342.png'/></a>
<a href='http://www.رابط-جوجل-بلس.com'><img src='https://jetara.googlecode.com/files/google_plus421.png'/></a>
</div>
</div>

<style>
/* design by : bouzadi.com */
.bouzadi{height:120px;width:620px;overflow:hidden;float:right;background:url(https://jetara.googlecode.com/files/124124124.png);}.bouzadi img{height:80px;width:80px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;overflow:hidden;float:right;border-radius:100px;margin-right:47px;margin-top:21px;margin-left:0;margin-bottom:0;padding:0;border:0;}.bouzadi a{float:right;text-shadow:1px 1px 5px #111;font:700 23px arial,tahoma;color:#EEE;text-decoration:none;padding:4px;width:200px;margin:0;text-align:right;}.bouzadi p{margin:0;text-shadow:1px 1px #000;height:75px;margin-bottom:0;margin-left:0;width:355px;color:#E9E8E8;border-bottom:2px solid #222;-webkit-box-shadow:0 1px #555;box-shadow:0 1px #555;overflow:hidden;font:13px tahoma,arial;float:right;direction:rtl;margin-right:30px;margin-top:3px;text-align:right;}#bouzadi-icons{float:left;width:108px;height:32px;margin-top:-4px;}#bouzadi-icons a{padding:0;float:left;width:auto;}#bouzadi-icons img{width:36px;height:32px;-webkit-box-shadow:none;box-shadow:none;border-radius:0;float:left;margin:0;padding:0;background:rgba(0, 0, 0, 0);}
/* design by : bouzadi.com */
</style>

: صورتك الشخصية
اللون الأزرق : رابط موقعك
اللون الأصفر : اسمك ( ولاكن يجب الا يتعدى 180px ) .
اللون الأخضر : نبذة قصيرة عنك .
اللون البرتقالي : رابط صفحتك في الفيسبوك .
اللون الوردي : رابط صفحتك في تويتر .
اللون الأسود : رابط صفحتك في جوجل بلس .

و تعمل حفظ القالب

عنوان التدوينة: إضافة تعريف الكاتب تحت التدوينة بثلاثة أشكال إحترافية
تقييم : 10 من 10 مرتكز على 24 تقييم.
الكاتب / مدير AmazighWEB | اامازيغ ويب | كريم أمكين

عدد المشاهدات :