تعريف الكاتب على مدونات بلوجر بشكل إحترفي

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

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

أولا قم بمعاينة الإضافة من هنا

ثانيا قم بأخذ نسخة إحتياطية من قالبك

ثالثا الدخول الى قالب ثم تعديل HTML والأن ركز معى جيدا

كود الخطوط

لتقوم باستخدام نفس الخط الموجود بالإضافة وهو قم بالبحث عن وسم <head> وضع اسفله أكواد الخطوط التالية

<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:bold' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:bold' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'/>

كود CSS فوق أو قبل وسم ]]></b:skin>

/*-----Start Author bio www.abu-iyad.com-----*/
.clear {
clear:both;
}
#author-box {
margin:10px 0;
}
#author-box a:hover {
background:none!important;
}
#author-box .row-1 {
background:#80C8FE;
padding:20px;
}
#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:0 0 10px #FFF;
box-shadow:0 0 10px #FFF;
}
#author-box .row-1 .info {
margin:0 0 0 110px;
font-family:droid arabic kufi;
}
#author-box .row-1 .info h6 {
color:#fff;
font-size:25px;
font-family:droid arabic kufi;
margin:-4px 0 0;
}
#author-box .row-1 .info h6 span {
font-size:17px;
font-family:droid arabic kufi;
font-weight:400;
background:#BFCFFE;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=100);
opacity:1;
margin:0 0 0 1em;
padding:1px 9px 2px;
}
#author-box .row-1 .info p {
color:#fff;
font-weight:400;
font-size:14px;
font-family:droid arabic kufi;
margin:0;
}
#author-box .row-2 {
background:#BFCFFE;
}
#author-box .row-2 a.social-item {
display:block;
float:right;
color:#FFF;
text-align:center;
padding:15px;
font-family:droid arabic kufi;
}
#author-box .row-2 .social-item .icon {
height:32px;
width:32px;
}
#author-box .row-2 .social-item > span {
display:block;
text-align:center;
margin:auto;
}
#author-box .row-2 .social-item .label {
font-weight:700;
font-size:13px;
font-family:droid arabic kufi;
}
#author-box .row-2 .social-item .click {
font-size:11px;
color:#00248E;
line-height:1;
font-family:droid arabic kufi;
}

#author-box .row-3 {
background:#80C8FE;
}
#author-box .row-3 form,#author-box .row-3 a.donation-button {
display:block;
float:left;
}
#author-box .row-3 .donation-button {
background:#80C8FE;
border:none;
font-family:droid arabic kufi;
font-size:30px;
color:#FFF;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .register-button {
display:block;
color:#FFF;
border:none;
font-family:droid arabic kufi;
font-size:30px;
text-align:right;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-2 .social-item.facebook .icon {
background-position:0 -32px;
}
#author-box .row-2 .social-item.twitter .icon {
background-position:0 -64px;
}
#author-box .row-2 .social-item.gplus .icon {
background-position:0 -96px;
}
#author-box .row-2 .social-item.linkedin .icon {
background-position:0 -128px;
}
#author-box .row-2 .social-item.youtube .icon {
background-position:0 -160px;
}
#author-box .row-2 .social-item.pinterest .icon {
background-position:0 -192px;
}
#author-box .row-2 .social-item.instagram .icon {
background-position:0 -224px;
}

#author-box .social-item .icon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-_hXuCBZZEcjvogrxV5JLO2iQA57PKAmSiHlJFkNT7n1Smew1mKAYZtAhH371oThAPW_Mg-LHQw1mrjKTafnjPIndB3m6wpN32w_UExgW5CyN2FlH0xX4-1AC6feLhrymN4McWtmhtw/s1600/social-abu-iyad.png)!important;
background-repeat:no-repeat;
}
/*-----Eng Author bio www.abu-iyad.com-----*/

يمكنك تغيير خلفية الصف الأول والثانى والثالث على حسب ما ترغب به ويناسب ألوان مدونتك كما هو مظلل أعلاه. ويمكنك الاستعانة بمولد الألوان على مدونة أبو إياد لاختيار الألوان المناسبة.

كود HTML أسفل أو بعد الكود التالى وستجد منه أثتين "الثانى المقصود"

<div id='author-box'>
<div class='row row-1'>
<div class='avatar'>
<a href='http://www.abu-iyad.com/'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='http://lh5.googleusercontent.com/-UQ9nUDFOVt0/AAAAAAAAAAI/AAAAAAAAI3I/f9E7vHvQ90Q/s80-c/photo.jpg' width='90'/></a>
</div>
<div class='info'>
<h6>الكاتب: محمد جلال <span>ADMIN</span></h6>
<p><strong><a href='http://www.abu-iyad.com/'>مدير مدونة أبو إياد </a> نبذة تعريفية عنك</strong></p>
</div>
<div class='clear'/>
</div>
<div class='row row-2'>
<a class='social-item website' href='www.abu-iyad.com' meta='website' target='_blank'>
<span class='icon'/>
<span class='label'>المدونة</span>
<span class='click'><span class='val'>113576 زائر</span> </span>
</a>
<a class='social-item facebook' href='http://www.facebook.com/abuiyad007' meta='face' target='_blank'>
<span class='icon'/>
<span class='label'>فيسبوك</span>
<span class='click'><span class='val'>500 معجب</span></span>
</a>
<a class='social-item twitter' href='https://twitter.com/abuiyadblog' meta='twitter' target='_blank'>
<span class='icon'/>
<span class='label'>تويتر</span>
<span class='click'><span class='val'>200 متابع</span></span>
</a>

<a class='social-item gplus' href='https://plus.google.com/+Abuiyadblog' meta='gplus' target='_blank'>
<span class='icon'/>
<span class='label'>جوجل بلس</span>
<span class='click'><span class='val'>70 متابع</span></span>
</a>

<a class='social-item linkedin' href='https://www.linkedin.com/in/mohammedglal' meta='linkedin' target='_blank'>
<span class='icon'/>
<span class='label'>لينكدان</span>
<span class='click'><span class='val'>40 متابع</span></span>
</a>

<a class='social-item youtube' href='https://www.youtube.com/user/engmosha' meta='youtube' target='_blank'>
<span class='icon'/>
<span class='label'>يوتيوب</span>
<span class='click'><span class='val'>30 متابع</span></span>
</a>
<a class='social-item pinterest' href='http://www.pinterest.com/iglal/' meta='pinterest' target='_blank'>
<span class='icon'/>
<span class='label'>بنتريست</span>
<span class='click'><span class='val'>30 متابع</span></span>
</a>
<a class='social-item instagram' href='http://instagram.com/mohammedglal' meta='instagram' target='_blank'>
<span class='icon'/>
<span class='label'>انستجرام</span>
<span class='click'><span class='val'>30 متابع</span></span>
</a>
<div class='clear'/></div>
<div class='row row-3'>
<form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
<input name='cmd' type='hidden' value='_donations'/>
<input name='business' type='hidden' value='engglal@gmail.com'/>
<input name='lc' type='hidden' value='US'/>
<input name='item_name' type='hidden' value='Donate Blogger'/>
<input name='no_note' type='hidden' value='0'/>
<input name='currency_code' type='hidden' value='USD'/>
<input class='donation-button' name='submit' type='submit' value='تبرع لتطوير المدونة'/>
</form><a class='register-button' href='http://www.abu-iyad.com/2010/01/Team-Work.html'>انضم الينا</a><div class='clear'/></div>
</div>

قم بتعديل كل ما تم تظليله بالروابط والبيانات الخاصة بك. وقم بحفظ القالب للمعاينة.

يمكنك معاينة الإضافة الأصلية من خلال هذه المدونة وتم تطويرها من خلال مدونة أبو إياد

تعليقات المدونة
تعليقات الفيس بوك

هناك 6 تعليقات:

Simon Mosully11:02 م
الله يعطيك العافية أخي العزيز لكن كيف اذا كان عندي أكثر من كاتب هل يمكن أن يكون اسم ومعلومات الكاتب ديناميكياً ؟
وشكراً لكم عمجهودك الرائع ... بانتظار الرد
ردحذف
الردود
sunlight5:57 م
كلما حاولت إضافة كود جديد للمدونة يظهر اشعار يوجد خطأ في السطر رقم كذا مثل إضافة كود اقرأ المزيد ويظهر اشعار يوجد خطأ في السطر رقم كذا ماذا افعل
ردحذف
الردود

إضافة تعليق

مدونة أبو إياد