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

عدد مشاهدات الموضوع:
تعريف الكاتب على مدونات بلوجر بشكل إحترفي
تحية طيبة لكل متابعينا وبعد. بعد أن نشرنا مسبقا لطريقة إضافة صندوق تعريفي للكاتب بشكل إحترافي وكان ذلك الموضوع بواسطة عبد الله أبو دقة وشرعت بعده مباشرة بنشر موضوع أخر ليعالج صلاحية الإضافة لأكثر من كاتب داخل المدونة الواحدة. ولكن لكل سلعة معجب فهناك من يُعجب بالشكل السابق ذكره بتلك الموضوعات (تجدها هنا و هنا) ومنهم من سيعجبون بذلك الشكل الذى سنشرحه الأن بعد التعديل عليه لمدة تزيد عن 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(http://4.bp.blogspot.com/-zYoojdeha1g/VEgcqXsUyvI/AAAAAAAAJt0/tFLLsxBBkJw/s1600/social-abu-iyad.png)!important;
background-repeat:no-repeat;
}
/*-----Eng Author bio www.abu-iyad.com-----*/
يمكنك تغيير خلفية الصف الأول والثانى والثالث على حسب ما ترغب به ويناسب ألوان مدونتك كما هو مظلل أعلاه. ويمكنك الاستعانة بمولد الألوان على مدونة أبو إياد لاختيار الألوان المناسبة.
كود HTML أسفل أو بعد الكود التالى وستجد منه أثتين "الثانى المقصود"
<div class='post-footer-line post-footer-line-1'>

<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 تعليقات:

  1. الله يعطيك العافية أخي العزيز لكن كيف اذا كان عندي أكثر من كاتب هل يمكن أن يكون اسم ومعلومات الكاتب ديناميكياً ؟
    وشكراً لكم عمجهودك الرائع ... بانتظار الرد

    ردحذف
    الردود
    1. أهلا وسهلا عزيزى سنحاول حل هذه المشكلة عن قريب باذن الله
      شكرا على تعليقك وسؤالك

      حذف
    2. شكراً على ردك أخي لكن أنا اتمنى ان ترشدني كيفية عمل اسم ومعلومات الكاتب كما تفعلها انت معك ومع جميع كتاب مدونت تظهر مثل هذه :

      mohammed glal
      مهندس مصري ومتابع جيد للأخبار والمستجدات التقنية والاعلام الاجتماعى. أحب القراءة والترجمة. كاتب فى مدونة عالم الإبداع ومشرف سابق بموقع نقطة التطوير. تابعنى على تويتر ..

      ولكل كاتب في مدونتك اشاهد معلومات عنه .. كيف قمت بذلك وشكراً لك

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

      حذف
    4. والله يااخي انا حاولت فيها وعملت عرض لبروفايل جوجل لكن لم يظهر وبحثت علنت كثير ولم يظهر لدي وهاذا موقعي على بلوجر http://www.learnturkishtoday.com/
      لايمكنني عرض الا اسم الكاتب وبكل الاحوال ماعبيظهر الافتراضي من معلومات الكاتب الخاصة بجوجل بلاس حتى رجاء تساعدني وشكراً :)

      حذف
  2. كلما حاولت إضافة كود جديد للمدونة يظهر اشعار يوجد خطأ في السطر رقم كذا مثل إضافة كود اقرأ المزيد ويظهر اشعار يوجد خطأ في السطر رقم كذا ماذا افعل

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية