Admin !!! This Simple Word Have a Big Responsibility in it. If a Blog, a Website get any Achievement then that is also because Of Admin then Why We Have Same Pattern Or Same Style While We Comment In Our Blog. I am On the Way to Writing a Blog Post On "How to Make a Blogger Theme" but Suddenly My Facebook Friend asked Me a Question that how can we Add Ribbon For Admin Comment so, I thought that First I Should Write On this Then I'll Go to My Decided Article.
Steps to Add Ribbon :-
Steps to Add Ribbon :-
- Go to Blogger Dashboard -> Your Blog -> Templates -> Edit HTML
- Then Through Ctrl+F Find "</b:skin>
- Then Search For Comment Between </b:skin> & [[</b:skin>
- You'll See Some Code Similar to the Below Code (Don't Worry If There Is Slight Change) :-
#comments .comment-author{
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child{
padding-top: 0;
border-top: none;
}
.comments .comment-content{ padding:5px 0;
}
.avatar-image-container{
margin: .2em 0 0;
}
#comments .avatar-image-container img{
border: 1px solid $(image.border.color);
}
.comment-actions a
{
font-size:11px; color:#777 !important
}
.comments .comments-content .user
{
font-size:16px; color:#000;
}
.comments .comments-content .datetime
{
font-size:11px; color:#777 !important
}
.comments .comments-content .datetime a
{
color:#777;
}
.comments .comments-content .comment-thread ol a
{
color:#000;}
.comments .comments-content .loadmore a{
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-block
{
border: 1px solid #ddd;
padding: 7px;
}
.comments .comment-thread.inline-thread{
background-color: $(post.footer.background.color);
}
.comments .continue a
{
background:#f9f9f9;width:130px;border:1px solid #ddd;border-radius:9px;
padding: 10px;color:#000;
}
.comments .continue{
border-top: 2px solid $(widget.alternate.text.color);
}
.comments h4{
font: $(post.title.font);
margin: .75em 0 0;
padding: 10px;
border: 1px solid #ddd;
width: 100px;
}
.comment-form
{
width:90%;
max-width:90%
} - As You Can See the Yellow Highlighted Code Find that in Your Blog and Just above it Place the Below Code :-.comments .comments-content .icon.blog-author
{
background-repeat: no-repeat;
background-image: url (Your Ribbon Or Icon Image Link Goes Here);
height:38px;
width:38px;margin:0;
position:absolute;
right:0px;
top:-0px;
} - Now, You are Done....
Wow Vivek!!! But After Coding this Can We Change the Image ?
Yes Ofcourse!!! the Green Area which You are seeing above is Only For that just replace the image link and Your Icon will Be Changed...
Be Open To Share Your Problem & Views Here
No comments:
Post a Comment