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

الصفحات

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

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

و هي طريقية مثالية و خاصة في المدونة الذي يجد بها العديد من المدونين كيفية إضافة هذه الطريقة ما عليك إلا التوجه إلى القالب ثم تحرير 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://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-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://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-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://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-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>
و قم بمراعاة الأكواد أو لن تنجح الطريقة 
و في الأخير استودعكم في الله و السلام عليكم 
هل أعجبك الموضوع: