Thursday, 2 May 2013

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

08:54  Unknown  لا يوجد تعليقات

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOp7JMLYMNYxL-BFaB8WumvSRD66qf9tqQ0fNftGrmp3FsPKwpoqXqwClQQo8eXhpGco_OpPunI8a4Cli-n13Lu9jajoKvmHK98nTd_hWgMFR-KidaZR8V5ElgBNHz6q7ZuhuUxHchP-E/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOp7JMLYMNYxL-BFaB8WumvSRD66qf9tqQ0fNftGrmp3FsPKwpoqXqwClQQo8eXhpGco_OpPunI8a4Cli-n13Lu9jajoKvmHK98nTd_hWgMFR-KidaZR8V5ElgBNHz6q7ZuhuUxHchP-E/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOp7JMLYMNYxL-BFaB8WumvSRD66qf9tqQ0fNftGrmp3FsPKwpoqXqwClQQo8eXhpGco_OpPunI8a4Cli-n13Lu9jajoKvmHK98nTd_hWgMFR-KidaZR8V5ElgBNHz6q7ZuhuUxHchP-E/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>
وقم بتغيير ما يلزم مع مراعاة التالي
الكلمة الحمراء قم بتغييرها بإسم الكاتب ولكن الإسم الموجود في لوحة التحكم الخاصة بالكاتب
لذا يجب ان يكتب مضبوط وإلا لن تعمل الإضافة 
وكلما أردت أن تضيف كاتب فقط كرر الكود الأخضر بأكمله
ونفس الشئ الكاتب الذي لا يملك حساب معين يمكنك حذف الأيقونة التي لا يملكها ولا يؤثر ذلك على الكتاب الآخرين
وبالتوفيق في التركيب 
تحياتي

منشورة في: , , ,

0 comments:

Post a Comment