How to create a substitute cut function in Blogger

Unfortunately blogger does not have an internal system to hide pieces of text, such as lj-cut in LiveJournal. But happily it is possible to edit the source code and we can change the Template at will.

To create a hidden container needs to be done next:
Open Template -> Edit HTML tab
Insert next code before </head> tag


<script language="JavaScript">
<!--
m_picture_up = new Image();
m_picture_up.src = "blue_up.gif";
m_picture_down = new Image();
m_picture_down.src = "blue_down.gif";

function switchDiv(id,lid) {
var d = document.getElementById(id);
if (d.style.display == 'none') {
d.style.display = 'block';
document.images[lid].src = m_picture_up.src;
} else {
d.style.display = 'none';
document.images[lid].src = m_picture_down.src;
}
}
-->
</script>


where blue_up.gif and blue_down.gif is a URL of the image of buttons that are used to change visibility (show/hide) of a container.

To create the piece must be kept to a new post select Edit HTML tab, and add the following code:

<!-- begin hidden container name=first -->
<a href="#first_l" onclick="switchDiv('first_t','first_l')">
<img name="first_l" src="blue_down.gif" alt="read" border="0">
<div id="first_t" style="display:none;">
This place for hidden text or image.
</div>
<!-- end hidden container name=first -->


where blue_down.gif is the same URL as in JavaScript code, and first is unique ID of this fragmet. You must use the unique name for each container!

Example of how this works:
This is visible text read

NOTE! You can't use a Compose mode for editing content inside hidden container. Use Edit Html tab for insert text or image.

Another example. You can use the buttons and text links also. picture (557x450, 34KB)   read