📁 آخر الأخبار
0

تغيير شكل التعليقات لشكل تعليقات عالم المدون مع الأبتسمات

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


شرح التركيب للإضافة



  • أولا عليك التركيز لأنك سوف يكون عليك أستبدال أكواد من مدونتك
  • وعليك أن تقوم بأخذ نسخة من مدونتك أولا
  • الأن قم بأستبدال كود أستايل التعليقات الخاص بمدونتك
  • بهذا الكود الخاض بالتعليقات فى موضوع اليوم


#comments{margin-top:15px;padding:15px;float:right;width:100%;background-color:#fff;margin-bottom:30px;box-shadow: 0 0 0 1px #7986CB;}
#comments:hover {box-shadow: 0 0 25px 10px rgba(123, 136, 204, 0.28);transition: all 250ms ease-in-out;}
#comments h4{text-align: right;font-weight: 500;font-size: 16px;padding-bottom: 10px;border-bottom: 2px solid #ccc;line-height: 24px;position: relative;color: #7986cb;margin-bottom: 20px;}
#comments h4::before {content: "";position: absolute;height: 2px;width: 32px;background-color: #7986cb;bottom: -2px;left: initial!important;right: 0;}
#comments h4:after {content: "\f0e5";display: block;background-color: #7986cb;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
.paging-control-container{text-align:center;width:100%;float:right;margin-bottom:20px;margin-top:10px}
.paging-control{background-color:#3B5998;color:#fff;padding:10px;height:40px;line-height:13px;display:inline-block}
.unneeded-paging-control{color:#FFFFFF;background-color:#343434;padding:10px;height:40px;line-height:13px;display:inline-block}
.comment_inner.comment_admin{margin-top:10px}
.comment_header{float:right}
.comment_avatar{width:65px;height:65px;float:right;margin-left:15px}
.comment_avatar img{width:100%;height:100%;border-radius:50%;border:3px solid #7986cb}
.comment_body{overflow:hidden;border:1px solid #ccc;margin-bottom:20px;background-color:#eee;margin-right:80px}
.comment_name{border-bottom:1px solid #ccc;padding:0 20px 0 0;height:40px;line-height:32px;background-color:#fff}
.comment-content{font-size:15px;color:#555;padding:20px;text-align:justify;background-color:#ddd}
.deleted-comment{font-size:15px;color:#555;display:block;padding:10px 20px 20px 20px}
.comment_author_flag{display:inline-block;width:initial;margin:2px 12px 0 0;color:#FFF;font-size:13px;background:#DD4B39;padding:0 6px 3px 6px;border-radius:2px}
.comment_service{float:left}
.comment-delete{font-size:13px;background:#7986CB;padding:2px 10px;display:inline-block;border-radius:2px;float:left;margin-right:5px;margin-left:10px;margin-bottom:10px;color:#FFFFFF;height:35px;line-height:26px;margin-top:2px}
.comment_date{font-size:14px;color:#555}
#comments .comment_reply{display:inline-block;margin-top:10px;padding:1px 7px;color:#fff;text-align:center;background:#7986CB;height:30px;line-height:17px;width:100%}
.comment_avatar_wrap{width:65px;background:#fcfcfc;text-align:center}
#comments .comment-form p{background:#ddd;padding:0 15px 10px 15px;margin:5px 0 15px;color:rgba(0,0,0,.8);font-size:15px;line-height:normal;border-radius:3px;position:relative;max-width:100%;border:1px solid #ccc}
#emo-box,#hide-emo{display:none}
.small-button a,.small-button1 a{background:#7986CB;color:#fff;font-size:13px;cursor:pointer;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:3px;display:inline-block;padding:5px 10px;box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.comment_emo_list .item{float:right;display:block;text-align:center;margin:5px 5px 0 0;width:50px;background-color:#7986CB;border-radius:2px;height:70px}
.comment_emo_list span{display:block;margin:5px 0 5px 0;letter-spacing:1px;color:#fff}
.comment_emo{width:25px;height:25px;margin-bottom:-10px}
.comment_wrap{padding-right:80px}


  • الأن عليك التركيز فى الأكواد الأتية
  • عليك الأن أن تقوم بالبحث عن هذا الكود فى مدونتك
  • ثم تقوم بتحديد الكود كامل كما فى الصورة التالية




  • ثم تقوم بأستبدال الكود فى مدونتك بالكود التالى

  • الأن قم بالبحث عن الكود التالى هذا
  • الأن تقوم ايضا بتحديد الكود كامل كما فى الصورة أعلى
  • ثم تقوم بوضع بدل منه الكود هذا



  

    
:

      
        
    
     
    
     
    
     
    
     
    
   
      
      

      

        
          

            
              

               

            
            

              

                

                  avatar
                

                رد
              

              

            

            

              

                
                  
                    
                  
                  
                  
                
                
                   الكاتب 
                
                
      
حذف
                
      
                  
        
                
              

              
                
                
                

                  
                

                

              
            

            
 

            

            

            

          

        
      

      

      
        
       
        
       
        
       
        
       
        





  • الان مع اخر كود وهو نفس ما سبق
  • تقوم بالبحث عن هذه الكود
  • وايضا تقوم بتحديده كامل كما فى الصورة فوق
  • وتقوم بوضع بدل منه الكود التالى