طريقة تغير شكل التعليقات في مدونة بلوجر

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

اولا تقوم بذهاب الي <القالب<تحرير html ثم قم بضغط علي ctrl + f لتسهيل البحث عن الاكواد وابحث عن 

 <b:include data='post' name='threaded_comments'/>

ثم قم بتغير الكود السابق بالكود التالي 

 <b:include data='post' name='comments'/>

ثم ابحث عن الوسم ]]></b:skin الخاص بـcss وضع قبله الكود التالي 

 #comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
#comments {}
#comments h3 {
margin-bottom:15px;
background: #343536;
padding: 10px 10px;
color: #fff;
font: normal 18px normal,Electrolize,ge_ss_threeregular;
}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-right-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: right;
margin:0 0 0 10px;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGHqjPWsYF5pAerAlnydhFnOAIzdcxtbu9VmX0Z34ENoJ0vMFmj_g0EBXJzGqM8Y3-pLGG5SFRlyBBgHJwsX4C23pwQVIrE44MWPZEx4Jrr7_TZK9eD0d2-lHPRfsGI7gBcNwGYL8u6jF/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding:5px 0 0 0;
font-size: 13px;
text-decoration: none;
font-family: Electrolize,ge_ss_threeregular;
color: #fff;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#EEEE83;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#E6E7E7;
padding:10px;
font-size:13px;
font-weight:bold;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:left;
font-size:11px;
font-weight:normal;
margin-top:-3px;
}
.comment_date a{
color: #fff;
float:left;
font-size:11px;
font-weight:normal;
}
.comment_date a:hover{
color: #a9a9a9;
text-decoration:none;
}
.comment_body{
margin-right:66px;
margin-top: -72px;
background:#fcfcfc;
border:1px solid #d1d1d1;
padding:10px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin:5px 0 0 0;
color: #666;
border:1px solid #eee;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
font-family: Electrolize,ge_ss_threeregular;
}
.comment_inner {
padding-bottom: 5px;
margin:5px 0 5px 0;
}
.comment_child .comment_wrap {padding-right: 7%;}
.comment_reply {
display: inline-block;
margin-top:8px;
margin-right:-5px;
padding: 1px 12px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #fff;
font: 11px/18px Electrolize,ge_ss_threeregular;
transition: background-color 1s ease-out 0s;

ثم قم بضغط علي حفظ النموذج وسوف تلاحظ تغير في شكل التعليقات 

شارك

Tweet

المزيد

مواضيع ذات صلة