Spoiler For Comments.

In past posts I wrote about how to make Creating Scroll Box Comment Part 1 and Make Scroll In Comments Box Part 2 which is useful to wrap comments that there are huge numbers. One more way to make a comment does not appear elongated because their numbers are down so much that is to make Spoiler On Comments it.
Little me explain briefly for who had no knowledge about this spoiler. The spoiler is a button that serves to display and hide the comments on your blog. In order more clearly try clicking the button below:

For example like this. But what I discuss here is not the same as this

If you want to make a spoiler on the block comments, please follow these steps:
Log in to Blogger.
If you've signed on the Dashboard, click Layout or Design and select Edit HTML.
Download template as a precaution in case of errors. Check the small box beside writing Expand Widget Templates.
Find CSS code for comments-block. If you have found the following scrolling commands into it to add

height: 300 px; /* high block comment */
border:1px solid # CCC ; /* color frame block comment */
overflow:auto; /* scroll commands */

height and frame colors can be changed as desired buddy. If you do not want to use the scroll to block comments, just delete the scroll command above.
Then search ]]></b:skin>, if you have found this place the CSS code below in the code are:

/*-----Toggle Spoiler-----*/
.widgethidden {
display:none
}
.widgetshown {
display:inline;
overflow:auto;
}

Then place it under the following script code ]]></b:skin>:

<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if
(whichpost.className=="widgetshown"){whichpost.className="widgethdden";
}
else{
whichpost.className="widgets hown";
}
}
</script>

Next find the following code:

<dl id='comments-block'>

For those of you who already use avatars Blogger Profile, find this code:

<dl expr:class='data:post.avatarInd entClass' id='comments-block'>

If you have found, please you replace with this code:

<dl class='widgethidden' id='comments-block'>

Or with this code for using avatars Blogger Profile:

<dl expr:class='data:post.avatarInd entClass' class='widgethidden' id='comments-block'>

You need to know:
If you use the scroll-then block comments Blogger Profile avatars will not be seen as it is covered by a block comment scroll box.

Then add the following code right above it:

<div style='text-align:center; margin:10 px 0px; font-size: 15 px; font-weight:bold;'>
<a href='javascript:togglespoiler ("comments-block")' title=' Click for expand '>Show/Hide Comments</a>
</div>

Size of letters, the title of the link (Click for Writing expand), and a link (post Show/Hide Comments) can change according to your wishes.
When it is done save the changes you have made.

Done and Good luck!!

Tweet