Home » Blog stuff » Make spoiler to reduced blog load
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
Above is an example of spoiler. you can make a spoiler with the following code
This spoiler can be put anywhere, like in the side bar, header, footer, or inside your posts
Example spoiler:
Example spoiler
<div style="margin: 5px 20px 20px;">nb :
<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>
- Width: 55px to the width of spoiler.
- Font-size: 11px to major posts in spoiler boxes.
- The Green letters are the title of spoiler.
- The Red letters are the contents of your blog.
0 comments:
Post a Comment