Disqus is the best comment service for blogs and websites, it's free and anyone can use it, today I am going to show you how to create an Admin tag on your comments on your website to make your comments different from others.
It's great to highlight yourself in comments forum, that you are the admin of this blog or website, then people can easily understand that you are the admin. So this tutorial is for them who wants this Admin tag.
Don't worry, to achieve this you don't need to be an expert, all you need is active disqus comment form on your blog or website. Fortunately, moderator's comments are classed little different in disqus, so it was not difficult to create a effect like this.
See the difference between, with the style and the normal one.
It's great to highlight yourself in comments forum, that you are the admin of this blog or website, then people can easily understand that you are the admin. So this tutorial is for them who wants this Admin tag.
Don't worry, to achieve this you don't need to be an expert, all you need is active disqus comment form on your blog or website. Fortunately, moderator's comments are classed little different in disqus, so it was not difficult to create a effect like this.
See the difference between, with the style and the normal one.
Before
After
Now you can see the difference, now the comment is looking unique and visitors would sure read the comment as the comment is highlighted , so let's do it.
I have prepared two styles that you will like, although you don't need to change the styles as it's looking great with what it is, simple is better, but if you prefer you can make changes as per your needs.
We have used CSS :after selector to put string into it, so we don't have to do anything with the HTML, CSS will do it all on it's own. Here's the CSS code for the effect shown in picture above.
I have prepared two styles that you will like, although you don't need to change the styles as it's looking great with what it is, simple is better, but if you prefer you can make changes as per your needs.
We have used CSS :after selector to put string into it, so we don't have to do anything with the HTML, CSS will do it all on it's own. Here's the CSS code for the effect shown in picture above.
.dsq-moderator .dsq-commenter-name:after
{
/******************************
From Stramaxon.blogspot.com
Designed by Deepak Kamat
*******************************/
content:" Admin";
font-size:10px;
bottom:5px;
position:relative;
font-weight:normal;
padding-right:5px;
text-transform:uppercase;
color:black;
}
.dsq-moderator .dsq-comment-header {
/********************************
This CSS is for color highlight
of your comment header
*********************************/
background-color: aliceBlue; /* Change the color to fir your needs */
border: 1px solid grey; /* You can change the values here too */
}
You can place this CSS at two places, there's two options for you, one is to put in your Blogger's CSS or other is to apply it on disqus settings.
To add the code in blogger CSS : Blogger Dashboard > Template > Customize > Advanced > Add CSS > In the right input area, paste the CSS and Apply to blog.
- How to add CSS to blogger blogs
Add on disqus site : Log in to your Disqus account, when you are on Dashboard, select your website on the left pane > Now click on Settings tab on top right corner > Select the Appearance tab > Scroll down and at bottom end you will see Custom CSS you can paste the CSS there also. > Save Changes.
More style
If you want a little different style and want to highlight the admin tag more then you might use this CSS, this is also very simple looking and that's good, keep it as simple as possible. Fancy colors will ruin the style.
So here's the CSS for your new style.If you add this style, remember to discard the style i have given above or it will create problems and will look buggy.
.dsq-moderator .dsq-commenter-bio:after
{
/******************************
From Stramaxon.blogspot.com
Designed by Deepak Kamat
*******************************/
content:" {Admin}";
font-size:20px;
position:relative;
font-weight:normal;
padding-right:5px;
text-transform:uppercase;
color:black;
left:140px;
letter-spacing:15px;
font-family:"Sorts Mill Goudy";
text-shadow:1px 2px 1px white;
}
.dsq-moderator .dsq-comment-header {
/********************************
This CSS is for color highlight
of your comment header
*********************************/
background-color: aliceBlue; /* Change the color to fir your needs */
border: 1px solid grey; /* You can change the values here too */
}
Hope you liked this post, for free subscription to our blog click here
More for you to read :
