Buttons Appear And Disappear

Although now rarely update this blog, unlike in the past that I update almost everyday because lately I'm very busy plus my internet connection that uses a prepaid card which is often very problematic IM3 so that almost no time and a little lazy for blogging as well looking for material to post, but still I am a time to to update this blog.
At my leisure time and an internet connectional though some what decent break this connection I would like to invite you all to make Keys Appear And Disappear that can be used on the sidebar or else where as desired, application code that will be mydiscuss this you can see here or here.
Instantly, so do not get bored because there are many stories here. To create this button, please copy code below and put it wherever you like, like in the sidebar or insections can also posts.

<div>
<div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input value="

OPEN

" style="margin: 0px; padding: 5px;

width: 100%;

font-size: 12px;

font-weight:bold;

background:red;

color:white;

border:1px dashes yellow;

-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = '

CLOSE

'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '

OPEN

'; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: 2px dashes white; color:blue;background-color:NONE; text-align: justify; padding:10px; ">
<center>

PUT CODE, OR LINK TEXT HERE

</center>
</div>
</div>
</div>
</div>
</div>

Description:
Code that I printed in red, please replace inaccordance with the wishes and for which I printed in yellow are width: 100%; (the width of the button) and font-size: 12px; (size of the text that appears on the button), please adjust to the needs and the rest please consider changing them selves while learning.


When it is done save the changes already made and to see the results mate. For buddies who still do not understand please leave questionsin comments field below this posting.

Good luck and hopefully successful!...

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!!

Make Scroll In Comments Box Part 2

Yesterday I made a tutorial on Creating Scroll In Box Comments Section 1 and for the second part please read the following tutorials:
On the way Create Scroll Box In Comment Part 1 , how made by using CSS code by adding a few commands on the code comments-block but if you use blogger profile avatar in the comments box as in My blog is here, the avatar will not appear or disappear, so would be an eyesore as well.
Create Scroll Box Comment In Part 1 it works if you use the avatar MyBloglog like on my blog comment box. If you use Blogger Avatars should use this second mode, only just a bit complex and need care because they have to add a bit of code on a template because only in this way avatar profile bloggers on your blog comment box may appear. Ways must be done to make this scroll are as follows:

1. Log in to Blogger.
2. After being on the Dashboard page, click Design and then click Edit HTML.
3. As usual do not forget to download the full template used as a back-up if there is an error in editing, you can return to their original form before the edit.
4. Check the small box beside writing Expand Widget Templates and look for code like this:

<dl id='comments-block'>

For my friend who uses an avatar profile bloggers, looking for code like this:

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

If you have found, add the following code in the code are:

<div style='overflow:auto; border:1px solid #ccc; height: 250 px;'>

Adjust the height with the wishes. Then look again like the code below:

</b:loop>

</dl>

If you have found, place the following code just below the code:

</div>

Save the changes that have been done and good luck buddy!.