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

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

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

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

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

ولا تنسى ان تغير ما يلزم في الكود من روابط ونصوص

<b:if cond='data:blog.pageType == "item"'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9OqC_JhDqE3Nc9u7fR3oP8UylRC7N4x0SSzzN9T91Wa_u-In93lKWHiLSNpyvEYCRNr1GAve2iq2Wli_2rnglG-VtN-aaAWXse50sDCnkZCtWIBVQxl2vTqzAB84qx-iQku3kvrJDbs/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 == "item"'>

<b:if cond='data:post.author == "author"'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9OqC_JhDqE3Nc9u7fR3oP8UylRC7N4x0SSzzN9T91Wa_u-In93lKWHiLSNpyvEYCRNr1GAve2iq2Wli_2rnglG-VtN-aaAWXse50sDCnkZCtWIBVQxl2vTqzAB84qx-iQku3kvrJDbs/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 == "author"'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9OqC_JhDqE3Nc9u7fR3oP8UylRC7N4x0SSzzN9T91Wa_u-In93lKWHiLSNpyvEYCRNr1GAve2iq2Wli_2rnglG-VtN-aaAWXse50sDCnkZCtWIBVQxl2vTqzAB84qx-iQku3kvrJDbs/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>

وقم بتغيير ما يلزم مع مراعاة التالي

الكلمة الحمراء قم بتغييرها بإسم الكاتب ولكن الإسم الموجود في لوحة التحكم الخاصة بالكاتب

لذا يجب ان يكتب مضبوط وإلا لن تعمل الإضافة

وكلما أردت أن تضيف كاتب فقط كرر الكود الأخضر بأكمله

ونفس الشئ الكاتب الذي لا يملك حساب معين يمكنك حذف الأيقونة التي لا يملكها ولا يؤثر ذلك على الكتاب الآخرين

وبالتوفيق في التركيب

تحياتي

201