أهلا بكم أعزائى ومتابعى البروفيسور الصغير نعرض عليكم اليوم موضوع رائع جدا وهو تغيير شكل نموذج تعليقات البلوجر إلى شكل أخر إحترافى فهيا بنا إلى الشرح :
الخطوات
- توجه إلى لوحة تحكم بلوجر من هنا ثم إختر المدونة التى تريد تطبيق هذا النموذج عليها وأخيرًا إختر من القائمة اليٌسرى "القالب" أو "template"
الخطوة الثانية : أبحث عن هذا الوسم بالضغط على Ctrl+F
[code type="هذا الكود حصرى على البروفيسور الصغير"].comments a{color:#fff}]]></ثم ضع فوق مباشرة هذا الكود :
.comments a:hover{color:#fff;}
.comments .thread-toggle{
display: inline-block;
margin-bottom: 20px;
border: #489CFF solid 2px;
padding: 5px;
text-align: center;
border-radius: 25px;
padding-left: 12px;
line-height: 0px;
padding-bottom: 7px;
}
.comments .thread-toggle:hover{background-color:#489CFF;}
.comments .thread-toggle a{text-decoration:none;color:#000;}
.comments .thread-toggle:hover a{color:#fff;}
.comments .comment-block{
background-color:#489CFF;
border-radius:25px;
padding:5px 60px 5px 20px;
color:#fff;
font-family: sans-serif;
text-align:right;
min-height: 140px;
}
.comments .avatar-image-container{ float: none;
max-height: 100%;
overflow: visible;
width: 36px;
border-radius: 50%;}
.avatar-image-container{background-color:#000;}
.comments .avatar-image-container img{
width:70px;
height:70px;
max-width:70px;
background-color:#000;
border-radius:50%;
float:right;
position:relative;
top:-30px;
right:15px;
z-index: 1;
}
.comments .comments-content .datetime a{
height:20px;
padding:5px;
background-color:#1C75BC;
float:left;
position: relative;
top: 0px;
opacity:0;
left: 30px;
transition:1s;
}
.comments .comment-block:hover .datetime a{
position: relative;
top: -30px;opacity:1;
transition:1s ease;
text-decoration:none;
}
.comments .comments-content .user{
font-size:20px;
position:relative;
right:0px;
font-weight:bold;
padding-bottom: 5px;
}
.comments .comments-content .user a{color:#fff;}
.comments .comments-content .user a:hover{text-decoration:none;}
.comment-header{}
.comments .comment .comment-actions a, .comments .comment .continue a{
width:70px;
height:30px;
border:#fff solid 2px;
line-height: 28px;
text-align: center;
border-radius:25px;
float:left;
margin-left:5px;
cursor:pointer;
}
.comments .comment .comment-actions a:hover{
background-color:#fff;
color:#489CFF;
text-decoration:none;
}
.comments .comments-content .comment-content{
height: 50px;
overflow-y: auto;
padding-left: 5px;
}
.comments .comments-content .icon.blog-author{
background-color: #489CFF;
border-radius: 50%;
height: 15px;
width: 20px;
z-index: 1;
position: absolute;
right: 20px;
top: 5px;
border: #489CFF solid 4px;
transition:1s;background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}[/code]
ثم إحفظ القالب
ملحوظة مهمة جدا :
يمكنك تغيير كود اللون #489CFF بكود اللون الذى يناسبك ثم قٌم بحفظ القالب.
تعليقات
إرسال تعليق