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

سلام الله عليكم أحبابي في الله أتمنّى أن تكونوا بصحة جيّدة إن شاء الله 
في درس اليوم سوف نتطرق إلى إضافة جميلة إلى البلوجر ألا و هي كاتب المضوع

و هي طريقية مثالية و خاصة في المدونة الذي يجد بها العديد من المدونين كيفية إضافة هذه الطريقة ما عليك إلا التوجه إلى القالب ثم تحرير 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'>
أو
<div class='post-footer-line post-footer-line-1'>
و قم بتغيير الروابط الخاصة بك أخي العزيز
<b:if cond='data:blog.pageType == "item"'>
<div class='cnmuauthor'>
<img alt='إسم الكاتب' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDl1VN7jnwfhJ0xoQsfPEN1d3JOgFFRZ8OCV02EJrGvz8_AsDAGBM45RmT_DxLjq_uNcRVeQFmE80I1q_ZuWk6lGR6v0CXMO6XXvT0HXvD1YkpfTlJ7qfIJjYScZ1qjMthmyGFTU0ie7U/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/AVvXsEhDl1VN7jnwfhJ0xoQsfPEN1d3JOgFFRZ8OCV02EJrGvz8_AsDAGBM45RmT_DxLjq_uNcRVeQFmE80I1q_ZuWk6lGR6v0CXMO6XXvT0HXvD1YkpfTlJ7qfIJjYScZ1qjMthmyGFTU0ie7U/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/AVvXsEhDl1VN7jnwfhJ0xoQsfPEN1d3JOgFFRZ8OCV02EJrGvz8_AsDAGBM45RmT_DxLjq_uNcRVeQFmE80I1q_ZuWk6lGR6v0CXMO6XXvT0HXvD1YkpfTlJ7qfIJjYScZ1qjMthmyGFTU0ie7U/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>
و قم بمراعاة الأكواد أو لن تنجح الطريقة 
و في الأخير استودعكم في الله و السلام عليكم 



حجم الخط
+
16
-
تباعد السطور
+
2
-