This week’s Bitchin’ Book Blog question is:
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!
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.
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:
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.
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!