Make spoiler to reduced blog load

On Friday, October 7, 2011 0 comments
This time I will share about how to make a spoiler on the blog. Spoiler is a way to hide the contents of our blog content, like links, articles pictures or videos. With spoilers then the contents of which are in the spoiler will not be loaded before the reader / visitor to open the spoiler. In other words spoiler helps us reduce the load time of blog content.



This spoiler can be put anywhere, like in the side bar, header, footer, or inside your posts

Example spoiler:
Example spoiler
Above is an example of spoiler. you can make a spoiler with the following code
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Your article, photos or video here

<br>
</div>
</div>
</div>
nb :
  1. Width: 55px to the width of spoiler.
  2. Font-size: 11px to major posts in spoiler boxes.
  3. The Green letters are the title of spoiler.
  4. The Red letters are the contents of your blog.
 That's how to make a spoiler. May be useful for you all who want a blog load faster.


    More Article:

    0 comments:

    Post a Comment