Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » How To Show/Hide Text In Your Posts That Contains Spoilers

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Show/Hide Text In Your Posts That Contains Spoilers

How To Show/Hide Text In Your Posts That Contains Spoilers

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,235 views

Today’s post could be very helpful for those of you who write and blog about movies and books. It’s a tutorial on how you can provide an option for your readers to skip a particular portion of your article. A good example of this scenario is a movie review where you want those who haven’t seen it yet to avoid reading about scenes they haven’t watched (aka. spoilers).

In this tutorial by James Simpson, you’ll learn how to put spoiler blocks within your post. What’s cool about this is that it offers you three different styles to hide or block your text (block, inline, and redacted).

Paste this code inside your post’s <head></head> tag:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/js-spoilers.js"></script>
<style type='text/css'>
.block-spoiler { color: #993333; }
.block-spoiler-toggle { cursor: pointer;}
.inline-spoiler-toggle { cursor: pointer;}
.redac-text {
color: #000000;
background-color: #000000;
}
.redac-text:hover {
background-color: #ffffff;
}
div.spoiler-text {
display: none;
padding: 0px 10px;
}
span.spoiler-text {
display: none;
padding: 0px 5px;
}
 </style>

Here’s how you apply each style:

Block style – This hides the text by inside a container <div> tag with a class, and adds a “spoiler” label with a ([+]) toggle switch. Very useful for also hiding rich content such as videos and images

Click the ‘[+]’ symbol to find out what’s great about this style <div class=’spoiler-text’>Aside from text, you can also hide an embedded video or image by using this style.</div>

For Inline style – This is great for hiding short snippets within a series of text (e.g. hiding sentences inside a paragraph).

The story involves a surprise twist <span class=’spoiler-text’>that involves a friend’s betrayal</span> in the end.

For Redacted style – This uses CSS to hide text by setting the background to the same color as the text. When the reader hovers the mouse over it, the CSS rules change the background to reveal the text. And since it’s CSS, you are free to customize its appearance.

I hate that <span class=’redac-text’>stupid</span> show!

Try it out on your blog and see each of the varying results!

 

 

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here