Enable Threaded Comments For Blogger with CSS
Enabling threaded comment system for blogger is now so easy with just few tweaks. Threaded comment system will help you to interact with the users via same comment instead of posting a new comment every time. In this tweak you get a comment system like below screenshot, where users have a colour and admin has a unique colour.
1. Go to Blogger Design -- Edit HTML
2. Download your template (Just backup, in case if you mess with your code)
3. "Expand Widget Templates"
4. Find the below code in your template
<b:include data='post' name='comments'/>
Then sometimes you find out 1-3 codes of above quoted snippet. Replace all that codes with below code.
<b:if cond='data:post.showThreadedComments'>5. Applying CSS Code
<b:include data='post' name='threaded_comments'/>
<b:else/> <b:include data='post' name='comments'/>
</b:if>
Find for the below code :
]]></b:skin>Replace it with below code
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: 400;
src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment .avatar-image-container {
border: 1px solid #B6B6B6;
max-height: 70px !important;
margin-top: -5px;
width: 70px !important;
position: relative;
z-index: 50;
}
.comment .comment-block {
margin-left: 75px !important;
}
.comment .comment-header {
background: none repeat scroll 0 0 #239100;
color: #333;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
.comment .comment-header a {
color: white !important;
text-decoration: none;
}
.comment .comment-content {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 10px 10px;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment-header cite {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid white;
color: white;
padding: 2px 20px;
position: relative;
z-index: 99;
margin-left: -20px;
}
cite.blog-author {
background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
display: none !important;
background: url("") no-repeat scroll 0 0;
margin-left: 90px;
width: 60px !important;
height: 60px !important;
position: absolute;
right: 5px;
bottom: 5px;
top: 10px;
}
.comment .comment-header {
color: #333;
font-size: 15px;
font-weight: bold;
}
.comment .avatar-image-container img {
border: medium none !important;
height: 70px !important;
width: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD !important;
color: #333 !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 3px !important;
padding: 3px 6px !important;
text-decoration: none !important;
font-size:16px;
}
.comment .comment-actions a:hover {
background: #CCC !important;
text-decoration: none !important;
}
.comments {
font-family: 'Philosopher', arial, serif !important;
font-size: 1em;
color: black;
}
.comments .continue a {
display: block !important;
font-weight: bold !important;
padding: .5em !important;
color:#E34600;
font-size:16px;
}
.comments .continue a:hover {color:#4D3123;text-decoration:none;}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}
]]></b:skin>
Now threaded comment system for your blogger (blogspot) blog is completed. Save the template and enjoy Commenting !
How to remove powered by blogger Attribution gadget
Many people who want to remove attribution gadget from your blogger blog can do it in a simple manner without using CSS. Actually some templates have the feature to remove directly by clicking the remove button but some templates does not have remove button so to do this just you need to change a little bit code in your blogger template. This trick will not hide the widget but it permanently removes it. So you don't have any issues of white space or such.2. Expand your Widget Template.
3. Click Ctrl+F for the browser Find bar to pop up.
4. In the Find bar enter Attribution1
You will find the code as follows
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
In that code just change true to false and save your template.
Then when you edit the attribution widget you will find the remove option click it and the attribution code is removed forever.
How to Hide it using CSS?
So if you don't want to remove it completely but you just want to hide it. Then you can simply do it by adding the following CSS code
#Attribution1 {display: none;}
Warning: There is a much debate on this issue about removing makes us to violate bloggers policy but many blogs are still without the attribution widget for which no serious action has been taken by blogger. So do it at your own risk and always have an eye on bloggers terms.
