This week’s Bitchin’ Book Blog question is:
Hey Ashley,
I noticed that you have the ability to hide your spoilers in your reviews, I’m guessing by using a code. [..] I’m wondering if you can post a tutorial on how to go about doing this on blogger.
Thanks in an advance, you’ve been so helpful!
No problem!! I will show you guys how to implement this, but use it at your own risk. Spoilers are made possible by using jQuery/JavaScript, but JavaScript is deactivated in e-mails and RSS readers, which means the spoilers will be rendered out in plain text. But if you are using WordPress, the Ultimate Book Blogger Plugin does have spoiler functionality already built-in, and those spoilers are completely removed in RSS feeds/e-mails. 🙂 Unfortunately it’s not possible to do that in Blogger, but you could always manually make the text white or something so that it becomes “invisible” in e-mails/RSS readers (which usually have white backgrounds).
With that in mind, let’s get started!
Here’s an example of what the output will look like:
This is some normal text, but omg Check this out, it’s a SPOILER Hehe.
WordPress
NOTE: This method requires editing your theme files, which means if you have a pre-made theme and have to update it, your changes could be overwritten.
Go to your blog admin panel and navigate to Appearance » Editor. On the right-hand side, look for the file functions.php (or Theme Functions) and click on it. After the <?php tag, paste this bit of code:
// START EDITING jQUERY
/* If you do not have jQuery already on your blog, uncomment this area
$url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; // the URL to check against
$test_url = @fopen($url,'r'); // test parameters
if( $test_url !== false ) { // test if the URL exists
function load_external_jQuery() { // load external file
wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); // register the external file
wp_enqueue_script('jquery'); // enqueue the external file
}
add_action('wp_enqueue_scripts', 'load_external_jQuery'); // initiate the function
}
*/
// END EDITING jQUERY
// jQuery Spoiler Function
function add_spoilers() {
echo '
<script type="text/javascript">
$(document).ready(function() {
$("span.spoiler").hide();
$(\'<a class="reveal">View Spoiler »</a> \').insertBefore(\'.spoiler\');
$("a.reveal").click(function(){
$(this).parents("p").children("span.spoiler").fadeIn(100);
$(this).parents("p").children("a.reveal").fadeOut(100);
});
});
</script>
<style>
/* If you want you can add custom CSS here for the spoilers! Below is what I use on my blog. */
a.reveal:hover { cursor:pointer; }
span.spoiler { background-color:#FCE586; }
</style>
';
}
add_action('wp_head', 'add_spoilers');
// Spoiler Shortcode
function spoiler_shortcode( $atts, $content = null ) {
$output = '<span class="spoiler">';
$output .= do_shortcode($content);
$output .= '</span>';
return $output;
}
add_shortcode('spoiler', 'spoiler_shortcode');
At the top, I have included a way to add jQuery to your blog. By default, it is commented out, because there’s a good chance you might already have jQuery on your blog! But if you don’t, then un-comment the jQuery area.
Basically what we’re doing here is dding our own custom bit of jQuery script, which is what creates the spoilers! I also added in a spot where you can add some custom CSS if you want to style the spoilers output. I included the CSS I use on my blog, but of course you can change it. We then take it a step further, and register the spoiler syntax as a shortcode, so that you don’t have to use HTML.
Now, to test this out in a post, create a new post and type in something like this:
This is your normal text here [spoiler]but the text inside these tags is a spoiler![/spoiler]. And then you can keep writing over here.
Blogger
Go to your blog admin panel, click on Layout, and Add a Gadget. Select “HTML/JavaScript”, and this is where we will paste our code. Leave the title blank! Then, paste this code inside the content box:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.spoiler").hide();
$('<a class="reveal">View Spoiler »</a> ').insertBefore('.spoiler');
$("a.reveal").click(function(){
$(this).parents("p").children("span.spoiler").fadeIn(100);
$(this).parents("p").children("a.reveal").fadeOut(100);
});
});
</script>
Then, to add this to a post, go create a new one. Make sure you’re on “HTML” instead of the visual editor, and use this syntax:
This is your normal text here <span class="spoiler">but the text inside these tags is a spoiler!</span>. And then you can keep writing over here.
I have found that sometimes this spoiler method gets a bit wonky if you have any kind of HTML in the middle of it. But for most quick snippets, it works wonders! But next week I’ll look at an alternative method, which is perfect for large chunks of spoiler text (and putting things like images inside spoiler tags). We’ll be using jQuery’s toggle, which is what I used to create those click-able/toggle-able “WordPress” and “Blogger” buttons!
Awesome. Love learning new stuff.
Thanks for this awesome advice. I can’t wait for next week’s post 🙂
Thanks for this Ashley, Can’t wait to try it out on blogger. You’ve been a lot of help as usual.
So just tried it and for some reason it doesn’t expand. When I hover over “View Spoiler” it reacts like a link (changes color to the link color), but when I click on it, nothing happens.
What text did you put inside? Because as I said, sometimes it gets wonky depending on what you put inside, which is why I have the seconds method.
Actually I think it might be something with my design code because it also affected the slider and side bar. So I’ll hold off on it until the second method. Thanks hun!
Ah, is possible that you have some conflicting jQuery.
Yeah, I figured it was something along that line 🙁
This is awesome! I have the UBB and didn’t even realize the hide spoiler functionality was already built in! I’m so excited now! haha.
Definitely give the spoiler thing a try! 🙂 There’s a shortcode enabled and you should be able to do:
[spoiler]spoiler here[/spoiler]
Hey Ashley, I know this is quite late, but maybe you could help me? I tried doing everything you said (Blogger), but it doesn’t hide anything behind a spoiler tag – its just shows me the text regularly. Do you have any idea why it might be so and how can I fix it?
Thanks in advance and sorry for the trouble!
I don’t see any of the JavaScript code on your site. Did you add that in?
I did, I just took it off since then. (Didn’t know you can see it :O) Put it on again now in case that would help you 🙂
Tried doing everything again, and this time it does show me the “view spoiler” instead of the text – but it doesn’t open up to show the spoiler 🙁
Okay I see the code on your site now. Can you link me to a post where you’re actually using the spoiler?
It could be because you have a funky JavaScript error on your blog (and if you have one error, that can kill all other JS). But I need to see where you’re using it in order to confirm that.
here: http://drugscalledbooks.blogspot.co.il/2012/09/review-for-need-by-carrie-jones_14.html
(I didn’t actually hide anything, cause the spoiler isn’t working, so I just wrote “trying” in the spoiler tag. It’s right after the “The (many) Parts of the Story that Bothered me” part.)
That would kind of suck cause I’m not the one who touched those (the designer did) and I won’t know how to find/fix those problems xD And I was really happy to find such an easy spoiler tag (I really need those), but now it seems I won’t be able to use it after all :/
I really want to thank you, Ashley, for caring and helping me even though this must take from your time and it’s probably quite bothersome. So, thanks! 🙂
Yeah I think the problem is because of this error on your site: http://i.imgur.com/Uk6LxoU.png That’s a JavaScript error. Unfortunately I can’t give any guidance on how to fix it. 🙁 But as I mentioned before, one single JS error can cause all other JS that follows to stop working. I believe that’s what’s happening here!
Thanks for checking it out, anyways, Ashley! You’re the absolute best! 🙂
I’ll have to make do with my current way of hiding spoilers, as I won’t know to fix the problem (nor do I think it’ll be wise for me to mess around that… I might accidentally destroy the world…)
One day, I’ll both move my blog to WordPress AND get a new design (hopefully from you :P) and then everything shall be fixed! LOL
Again, thank you so much!!
WordPress, WordPress, WordPress! 😀
Why can’t the spoiler in my blog appear when I click it?
Thank you so much this has been a great help.
Hi Ashley! I tried it but for some reason I see the text as it is.
This was great! Thanks. However, when I view my website on the mobile side, it doesn’t work. :-/ Any tips or advice? I’m using Blogger.
TESTING HIDDEN CONTENT IN SPOILERS
Show/hide
Sorry, I was testing trying to hide content in the comments. You see, I want to comment on a WordPress blog but I’m not sure if the owner has it enabled for spoiler tags. So is there anything we commenters can use when we comment? Any HTML code we can put out there?
Hi Ashley! This is the most perfectly timed post I have ever found – I have spent hours and hours pointlessly researching WordPress plugins and trying to find code to do in-line spoilers for my book reviews (everyone only seems to do separate paragraph spoilers or horribly formatted buttons). You solved all my problems!
I did have to tweak one thing as my text was not hiding behind View Spoiler, it was just reformatting as if it had already been shown. I’m not sure if WordPress released an update since you wrote this, but everywhere you had a “$”, I had to replace with “jQuery” (capitalized like that) in the // jQuery Spoiler Function (not the // Spoiler Shortcode section). I found that solution on this website: http://www.pauljoyceuk.com/codex/2011/jquery-is-not-a-function/#comment-362579.
Not sure if this might help anyone else! But thank you so so so much for publishing this code.