القائمة الرئيسية

الصفحات

طريقة إضافة معلومات الكاتب اسفل المقالة ببلوجر

قبسم الله الرحمن الرحيم

 السلام عليكم ورحمة الله وبركاته


المقدمة

اليوم عندنا طريقة رائعة 
لاضافة معلومات الكاتب اسفل المقالة
١ - اسم الكاتب
٢ - نبذة عن الكاتب
٣ - صفحة الفيسبوك
٤ - اللقب
نترككم مع الشرح

الشرح

اولا : نقوم بالدخول علي بلوجر
ثانيا : ثم التصميم 
ثم : تعديل html
ثم نبحث عن الكود التالي
]]></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; }




ثم نبحث بعد ذلك عن
<div class='post-footer'> 

ثم نضيف 
الكود التالي فوقه او تحته



<!--ana arby - www.rferarb.com -->
<b:if cond='data:blog.pageType == "item"'>
<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-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>
<!--ana arby - www.rferarb.com -->



ومبروووك
author-img
لا احب التكلم عن نفسي كثيرا .. ولا احب التكبر .. كلنا متساوون .. وكلنا امام الله سواسية..لا فضل الا بالتقوي والعمل الصالح

تعليقات

تعليق واحد
إرسال تعليق

إرسال تعليق

قبل كتابة اي تعليق تذكر قول الله تعالي ( (مَّا يَلْفِظُ مِن قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ ))