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

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

معاينــة

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

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

ثم فوق الوسم ]]> أضف الكود التالي 

.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 هو حجم الخط

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

إن كنت الكاتب الوحيد في مدونتك فقم بتركيب الكود التالي

 تحت أو فوق أحد هذين الكودين بحسب ما تكون ظاهرة جيداً في مدونتك