Saturday, March 26, 2016

Rock the Blog-- How to add a SPOILER button in Blogger


Rock the Blog is our  "How To" for bloggers!

From graphics to html and all kinds of bloggery goodness!

This feature will focus primarily on the Blogger platform (since that's where I'm hosted) though some ideas may apply to Wordpress.






Woo! It's been a while since I've done a Rock the Blog. Oops!
But! I was asked a few days back by Bambi over at Bambi Unbridled how to do something and so a new post! If you ever have a question on how to do something feel free to ask! There's a submission form at the end of the post if you'd like to request a topic that way :)

Anywho. For today!

How to add a spoiler button in Blogger.

This is where you hide spoilery text behind a button and people have to click it to find the info.

It does require some code but once you have it...totally easy to do.

Okay so once you've written your post using the compose option you'll need to switch to html view.
Just go to the top of your post and click HTML


When you get to your HTML view you'll need to find the text you want hidden. Easiest way for me is to push CTRL+F and it'll open a search box you can enter a word or two and it'll find it in your post so you know where to paste the code :)



 Now the code comes into place. I know. I know. It looks like gibberish. But it works! Swear! lol
Basically you're going to paste the code before and after the text you want hidden so it's kind of sandwiched in.

<div id="spoiler" style="display:none"> HIDDEN CONTENT HERE </div> <button title="Show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>


Paste that into your html and make sure your hidden content is inserted where the highlighted area is. This is what you'll get :D



Aaaaand that'll give you a little show/hide button in your post!

For my example I'm going to tell you a secret...
#ImGrownICanDoWhatIWant <winks>

It can take a little bit of practice to get comfortable doing this but it's really easy once you get a hang of it. You can also hide photos behind the button.

If you need to add more than one spoiler button in a text you'll need to label them each separately or you'll have one BIG spoiler that'll hide everything. So in the code wherever it says "spoiler" in the second set of code replace that with "spoiler2" or however you'd like to label them. That'll keep the codes separate so they each function on their own.






Have a topic idea? Submit it HERE!



No comments:

Post a Comment

I always enjoy hearing what YOU think so come on and leave a comment. Everyone's welcome :) And feel free to leave comments on old posts. I'll check in on you there too :)

Bloggers don't forget to leave your links!
~Anna

The Herd Archives