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

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

About the Author blogger widget
اضافة تعريف الكاتب أو معلومات عن الكاتب 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 هو حجم الخط

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

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

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

إرسال تعليق