مساحة إعلانية

الخميس، 2 مايو، 2013

الخميس، 2 مايو، 2013

اضافة تعريف الكاتب بشكل جديد وحصري

About the Author blogger widget
اضافة تعريف الكاتب أو معلومات عن الكاتب about Author هي إضافة تهم كثير من المدونين خصوصا المدونات الجماعية هذه الإضافة هي ركن اساسي بها ويمتلئ الإنترنت بكثير من الإضافات بعضها جيد والآخر دون المستوى وكنوع من التغير ومواكبة التطويرات قمت بتصميم إضافة جديدة ستكون بإذن الله نافعة جداً وستلبي كثير من الإحتياجات وستجتذب الكتاب ففي الغالب يسعى الكاتب بان يعرف الناس بموقعه وخدماته وهذه الإضافة ستقوم بذلك بإحترافية كيف ؟ ببساطة تصيمها مميز وجذاب لكن طبعا هذا ليس الاساس وليس الجديد فالجديد هو تزويد الإضافة بمجموعة أيقونات جذابه لأهم ما يحب الكاتب ان يعرف به القراء وان يتواصلوا معه عن طريقة, تم إضافة أيقونات اشهر المواقع الإجتماعية فيس بوك  Facebook  تويتر  Twitter  وجوجل بلس  Google plus بالإضافة الى اليوتيوب Youtube وأيقونة للموقع الخاص بالكاتب وأيضا أيقونة لحساب الكاتب في خمسات فلقد أصبح موقع خمسات رائج جداً ومستخدم من كثير من المدونين ووجود مثل تلك الأيقونة مفيدة جداً للكاتب والايقونات مضافة بخاصية CSS Sprites وهذه الخاصة تجعل الأيقونات عبارة عن صورة واحده فقط وبالتالي لا تقوم بطلب الكثير من الروابط بل رابط واحد فقط وهذا يجعل الإضافة ككل خفيفة وانيقة ويمكن معاينة الإضافة عبر الرابط التالي 


طريقة تركيب الإضافة

أولا المظهر : أدخل الى تحرير القالب ولا تنسى أخذ نسخة إحتياطية ثم قم بتوسيع عناصر الستايل بالضغط على السهم الخاص بذلك

ثم فوق الوسم ]]></b:skin> أضف الكود التالي 
.cnmuauthor {background:#F9F9F9;border: 1px solid #E1E1E0;font-family: Arial;margin-bottom:7px; margin-top:7px; overflow: hidden; padding: 0 0 5px 5px;}
.cnmuauthor img {border: 4px solid #E2DEDE;float: right;height: 125px;width: 125px;margin-left: 15px;}
.cnmuauthor h4 {background:#636363;color: #FFF;font-size: 20px;margin: 0 134px 0 -9px;padding: 5px;}
.cnmuauthor p {color: #515151;font-size: 15px;margin-bottom: 0px;margin-top:5px;}
ul.cnmuauco { list-style:none; float: left; margin: 0 0 0 6px;display:inline-block;padding:0; } 
ul.cnmuauco li { display:inline; float:left; background: url(https://lh6.googleusercontent.com/-ftV4erNKUMk/UYJa0yzsFVI/AAAAAAAABSg/Mao3vVYtEeA/s170/cnmu-auth.png) no-repeat; }
ul.cnmuauco li a { display:block; width:20px; height:20px; padding-right:6px; position:relative; text-decoration:none; } 
ul.cnmuauco li a strong {background-color: rgba(0, 0, 0, 0.7);border-radius: 3px 3px 3px 3px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);color: #FFFFFF;font-size: 14px;font-weight: normal;left:35px;margin-top: 40px;padding: 3px;position: absolute;top: -95px;width: 70px;z-index: 9999;} 
ul.cnmuauco li.cnmuaut-facebook {background-position: 0px 0px;} 
ul.cnmuauco li.cnmuaut-twitter {background-position: 0px -30px;}  
ul.cnmuauco li.cnmuaut-googleblus {background-position: 0px -60px;} 
ul.cnmuauco li.cnmuaut-youtube {background-position: 0px -90px;} 
ul.cnmuauco li.cnmuaut-khamsat {background-position: 0px -120px;} 
ul.cnmuauco li.cnmuaut-wsite {background-position: 0px -150px;} 
#cnmuaucohv:hover li { opacity:0.2; } 
#cnmuaucohv li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
#cnmuaucohv li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } 
#cnmuaucohv li:hover { opacity:1; } 
#cnmuaucohv li:hover a strong { opacity:1; top:-10px; }
هذه الألوان التي يسهل تغييرها في الكود لمن أراد تغيير الألوان
هذا اللون  #F9F9F9  هو لون خلفية الإضافة
وهذا لون اطار الإضافة   #E1E1E0
وهذا لون اطار الصورة #E2DEDE
وهذا لون خلفية الإسم والأيقونات  #636363
وهذا لون خط اسم الكاتب #FFF
ويمكن تغيير نوع الخط بتغير وسم الخط بوسم الخط الذي تستخدمه
font-family: Arial
ورقم 20 هو حجم الخط

تفعيل الإضافة للمدونات الفردية

إن كنت الكاتب الوحيد في مدونتك فقم بتركيب الكود التالي
 تحت أو فوق أحد هذين الكودين بحسب ما تكون ظاهرة جيداً في مدونتك
<div class='post-footer'>
أو
<div class='post-footer-line post-footer-line-1'>
ولا تنسى ان تغير ما يلزم في الكود من روابط ونصوص

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='http://3.bp.blogspot.com/-oxFAIlGNUBM/UPBCx3Wlm9I/AAAAAAAAAEw/Oba9lgbesgs/s1600/125x125.png'/>
<h4>
بقلم : اسم الكاتب
<ul class='cnmuauco' id='cnmuaucohv'>
<li class='cnmuaut-facebook'>
<a href='رابط فيس بوك' target='_blank' rel='nofollow'><strong>التواصل عبر الفيس بوك</strong></a></li>

<li class='cnmuaut-twitter'>
<a href='رابط تويتر' target='_blank' rel='nofollow'><strong>التواصل عبر تويتر</strong></a></li>

<li class='cnmuaut-googleblus'>
<a href='رابط جوجل بلس' target='_blank' rel='nofollow'><strong>التواصل عبر جوجل بلس</strong></a></li>
<li class='cnmuaut-youtube'>
<a href='رابط يوتيوب' target='_blank' rel='nofollow'><strong>قناة الكاتب على اليوتيوب</strong></a></li>

<li class='cnmuaut-khamsat'>
<a href='رابط خمسات' target='_blank' rel='nofollow'><strong>خدمات الكاتب على خمسات</strong></a></li>

<li class='cnmuaut-wsite'>
<a href='رابط موقع الكاتب' target='_blank'><strong>موقع الكاتب</strong></a></li>

</ul></h4>
<p>نبذة عن الكاتب</p>
</div></b:if>

الأجزاء المميزة بالوان مختلفة هي الخاصة بالأيقونات فاذا كنت مثلا لا تملك حساب في خمسات تحذف الجزء البرتقالي
أو تويتر الأزرق الفاتح وهكذا ولا تنسى تغيير الرابط المحدد باللون الوردي فهو رابط صورة الكاتب

تفعيل  الإضافة للمدونات الجماعية

نفس الطريقة السابقة ونفس الكود لكن فرق بسيط تابع معي
قم بتركيب الكود التالي تحت أو فوق أحد الكودين الموجودين في الجزء السابق

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- الكاتب الأول -->
<b:if cond='data:post.author == &quot;author&quot;'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='http://3.bp.blogspot.com/-oxFAIlGNUBM/UPBCx3Wlm9I/AAAAAAAAAEw/Oba9lgbesgs/s1600/125x125.png'/>
<h4>
بقلم : اسم الكاتب
<ul class='cnmuauco' id='cnmuaucohv'>
<li class='cnmuaut-facebook'>
<a href='رابط فيس بوك' target='_blank' rel='nofollow'><strong>التواصل عبر الفيس بوك</strong></a></li>
<li class='cnmuaut-twitter'>
<a href='رابط تويتر' target='_blank' rel='nofollow'><strong>التواصل عبر تويتر</strong></a></li>
<li class='cnmuaut-googleblus'>
<a href='رابط جوجل بلس' target='_blank' rel='nofollow'><strong>التواصل عبر جوجل بلس</strong></a></li>
<li class='cnmuaut-youtube'>
<a href='رابط يوتيوب' target='_blank' rel='nofollow'><strong>قناة الكاتب على اليوتيوب</strong></a></li>
<li class='cnmuaut-khamsat'>
<a href='رابط خمسات' target='_blank' rel='nofollow'><strong>خدمات الكاتب على خمسات</strong></a></li>
<li class='cnmuaut-wsite'>
<a href='رابط موقع الكاتب' target='_blank'><strong>موقع الكاتب</strong></a></li>
</ul></h4>
<p>نبذة عن الكاتب</p>
</div></b:if>

<!-- الكاتب الثاني -->
<b:if cond='data:post.author == &quot;author&quot;'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='http://3.bp.blogspot.com/-oxFAIlGNUBM/UPBCx3Wlm9I/AAAAAAAAAEw/Oba9lgbesgs/s1600/125x125.png'/>
<h4>
بقلم : اسم الكاتب
<ul class='cnmuauco' id='cnmuaucohv'>
<li class='cnmuaut-facebook'>
<a href='رابط فيس بوك' target='_blank' rel='nofollow'><strong>التواصل عبر الفيس بوك</strong></a></li>
<li class='cnmuaut-twitter'>
<a href='رابط تويتر' target='_blank' rel='nofollow'><strong>التواصل عبر تويتر</strong></a></li>
<li class='cnmuaut-googleblus'>
<a href='رابط جوجل بلس' target='_blank' rel='nofollow'><strong>التواصل عبر جوجل بلس</strong></a></li>
<li class='cnmuaut-youtube'>
<a href='رابط يوتيوب' target='_blank' rel='nofollow'><strong>قناة الكاتب على اليوتيوب</strong></a></li>
<li class='cnmuaut-khamsat'>
<a href='رابط خمسات' target='_blank' rel='nofollow'><strong>خدمات الكاتب على خمسات</strong></a></li>
<li class='cnmuaut-wsite'>
<a href='رابط موقع الكاتب' target='_blank'><strong>موقع الكاتب</strong></a></li>
</ul></h4>
<p>نبذة عن الكاتب</p>
</div></b:if>


</b:if>
وقم بتغيير ما يلزم مع مراعاة التالي
الكلمة الحمراء قم بتغييرها بإسم الكاتب ولكن الإسم الموجود في لوحة التحكم الخاصة بالكاتب
لذا يجب ان يكتب مضبوط وإلا لن تعمل الإضافة 
وكلما أردت أن تضيف كاتب فقط كرر الكود الأخضر بأكمله
ونفس الشئ الكاتب الذي لا يملك حساب معين يمكنك حذف الأيقونة التي لا يملكها ولا يؤثر ذلك على الكتاب الآخرين
وبالتوفيق في التركيب 
تحياتي

هناك 37 تعليقًا:

  1. إضافة جميلة ومطورة عن التي سبقتها مشكور اخي الكريم

    ردحذف
    الردود
    1. سررت بمرورك أخي الكريم
      تحياتي لك

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حيا الله الحبيب الغالي أبو ملاك
      ربي يحفظك يا طيب
      وسعدت بمرورك العطر
      ودي وتقديري

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أعزك الله اخي الحبيب بدر
      وسعدت بمرورك كثيراً حبيبي
      ربي يبارك في عمرك
      تحياتي لك

      حذف
  4. شكرا على هده الاضافة

    ردحذف
    الردود
    1. الشكر لله أخي الفاضل
      تشرفت بمرورك الكريم

      حذف
  5. سلام اخي شكرا على الشرح الجميل لقد طبقت الخطوات كما هي و مع دلك لم تضهر الاضافة

    ردحذف
    الردود
    1. قد تكون أكواد post-footer التي المفترض ان تضيف تحتها كود الإضافة مكرر في القالب أحدها ستعمل عليه الإضافة والآخر لن تعمل تأكد إن كان مكرر قم بتجربتها تحت الثاني للتأكد من عملها

      حذف
  6. نع اخي نجح الامر وفقك الله

    ردحذف
  7. ماذا سأقول ؟؟
    الموضوع مرتب جيداً و كل شيء مفهوم !!
    الاضافة تعمل 1000000000/1000000000
    شكراً أخي الكريم :)

    ردحذف
    الردود
    1. تشرفت بمرورك العطر أخي الكريم

      حذف
  8. الردود
    1. أخي قد تجد الكود <div class='post-footer'>
      مكرر أكثر من مرة احدها سيظهر تحته الأضافة والآخر لا فجرب ان كان متكرر ان تضيف الكود تحت كل نسخة حتى تجد النسخة المناسبة

      حذف
    2. شكراً جداً لك أخى

      حذف
  9. بعد اذنك يعنى انا عملت كل حاجة وبردوا مفيش حاجة حصلت

    ردحذف
    الردود
    1. أخي الكريم الكود post-footer الذي تضيف تحته كود الإضافة بيكون متكرر في القوالب احدها سيعمل معك والآخر لن يعمل عليك ان تجرب حتى تصل للكود المضبوط

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

    ردحذف
  11. حياك الله يا طيب
    نعم أخي الكريم قم بإستبدال هذا السطر
    ul.cnmuauco li.cnmuaut-khamsat {background-position: 0px -120px;}
    بهذا
    ul.cnmuauco li.cnmuaut-khamsat {background: url("http://bahrain.bh/pubportal/wps/themes/html/EGov//images/Instagram.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

    مع العلم أن هذا الرابط http://bahrain.bh/pubportal/wps/themes/html/EGov//images/Instagram.png
    هو رابط رمز انستجرام بمقاس 20x20 ويمكنك استبداله برمز آخر ورابط آخر لإنستجرام بنفس المقاس
    وبالتوفيق

    ردحذف
  12. إضافة مميزة من شخص مميز .. بتوفيق لك اخ عمرو ^_^

    ردحذف
    الردود
    1. ربي يعزك أخي الحبيب مصعب سررت بمرورك يا طيب =s

      حذف
  13. السلام عليكم اخي الكريم هذا اول تعليق لي ولاكن لن يكون الاخير تحياتي لك فانت قدوه لنا والله شكرا كتير لاكن اخي عندي مشاكل في مدونتي ومن اهمهم اني حولت اضيف الكاتب او تعليقات الفيسبوك اكتر من 10 مرات ومعملتش معني اتبعت جميع الخطوات بنجاح وكمان في القالب الي فات كانو شغلين لاكن بعد تركيب هذا القالب مشرديين يشتغلو وعملت جميع الخطوات صح والله مش عارف السبب وانا غيرت القالب عشان كان تقيل في التحميل تحياتي لك وارجو ارد سريعا والسلام عليكم ورحمه الله وبركاته

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله أخي الكريم وبإذن الله لا يكون هذا مرورك الاخير فنحن نسعد بكم
      بالنسبة لطلبك غالباً لامشكلة في الجزء الخاص post-footer
      تلك الاكواد تكون متكررة في القالب واحد فقط ستعمل الإضافة معه فوقه او تحته فعليك التجربة عليهم جيمعا واحد يلي الآخر الى ان تصل للكود المضبوط

      حذف
    2. شكرا لك كتير جربتها في جميع الاكواد لحد متعملت شكرا تمنياتي لك بالنجاح اخي الكريم انا كمان ربعاوي اخي ♥

      حذف
  14. شكرا عالشرح اخي عمرو .. لكن للاسف لم تظهر وقد جرب تحت الاكواد كلها وفوق الاكواد كلها ولم تنفع .. هل من حل ؟

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

      حذف
  15. السلام عليكم
    هده الاضافة رائعة جدا
    شكرا جزيلا لك q=

    ردحذف
  16. السلام عليكم انا جربت اكثر من كود تعريف الكاتب ولكن ما بيظهر فى المشاركات
    ايه الحل ارجوا الاجابه
    وهذا رابط مدونتى : http://al-mo7tar3f.blogspot.com/
    =x

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

      حذف
  17. تأكد من الكود الذي تضيفها قبله أو بعده لان الاكواد مثل
    <div class='post-footer'>
    تكون مكررة فيجب ان تجد المضبوط

    ردحذف
  18. جزاك الله خيرا ورزقك الفردوس
    ماشاء الله
    أنت اول مدون عربي...أحبك في الله

    ردحذف
    الردود
    1. وجزاكم الله بالمثل اخي الحبيب
      وأحبك الله الذي احببتني فيه

      حذف
  19. لو سمحت ياريت تعمل موضوع أضافة عن الكاتب زى اللى فى قالبك على خمسات

    ردحذف
    الردود
    1. ساحاول في مواضيع اخرى عرض استايلات جديدة للكاتب بإذن الله

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©