PESAN - PESAN

Friday, January 1, 2010

How to Make Spoiler on Blog Post

Spoiler is a way to hide all or part of the contents of our blog content. Spoiler also useful for heavy content such as images in large size and the video is not loaded before pressing the show. In other words spoiler helps us reduce the load time and giving blog content to blog readers choose to open or not the contents of spoiler. (applies also for the web)

Here is the code that must be added javascipt in posts:
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>TiTle></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[SPOILER content]</div></div></div>

Description:
  • Color red can be replaced are in accordance with the wishes
  • "Spoiler content" can be replaced with text, pictures, music, or video
  • For music and video being entered is embed code
  • What if the spoiler is an image then upload first and then the subscription link on the "edit HTML" or take a link like in photobucket upload, etc. bannerbreak like this:
  • <a href="http://bunlijuni.blogspot.com"><img border”0” alt="download, free, gratis, gratisan, ebook, buku, majalah, tutorial" width="180" src="http://lh6.ggpht.com/_ugaMiBbNfqY/Sy0leSYXYBI/AAAAAAAAAc8/BapeFOPzGQI/My%20bLog%20.jpg" target="_blank"/></a><br/><a href="http://bunli.blogspot.com/" target="_blank">By Bunli</a><a href="http://www.bunli.com/" target="_blank"> & Juni</a>
  • Banner> :






Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

1 comments: on "How to Make Spoiler on Blog Post"

Post a Comment