آخر المقالات

الأحد، 6 مارس، 2016

تغيير شكل تعليقات البلوجر لشكل جديد وإحترافى لعام 2016
تغيير شكل تعليقات البلوجر لشكل جديد وإحترافى لعام 2016

تغيير شكل تعليقات البلوجر لشكل جديد وإحترافى لعام 2016


أهلا بكم أعزائى ومتابعى البروفيسور الصغير نعرض عليكم اليوم موضوع رائع جدا وهو تغيير شكل نموذج تعليقات البلوجر إلى شكل أخر إحترافى فهيا بنا إلى الشرح :



الخطوات 

  1. توجه إلى لوحة تحكم بلوجر من هنا ثم إختر المدونة التى تريد تطبيق هذا النموذج عليها وأخيرًا إختر من القائمة اليٌسرى "القالب" أو "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 بكود اللون الذى يناسبك ثم قٌم بحفظ القالب.

ليست هناك تعليقات:

إرسال تعليق

المتابعون

المشاركات الشائعة

قوالب مميزة

قالب بساطة تكويد : البروفيسور الصغير