Tutorial: Customizing the Spoiler Button on Blogger

Posted July 19, 2014 by Sophia
0 Comments

Bookwyrming Thoughts Tutorial

I’ve recently started using spoilers here on the blog – in fact, my review queue uses this too! – and I have to say it lifts a nice burden from my shoulders of having to find a way to rephrase things because I may be giving a TAD bit too much away – I usually don’t but give warning if I do. You may have noticed that they’re a darkish blue and work just like a link… without leading you anywhere.

View Spoiler »

In the earlier parts of this year during a snow day, I ended up playing around with the spoiler button and customizing it to not look like the hideously dull gray button (one can only read so much in a row). >_<

Show/hide

I’ve been wanting to do this for awhile, but I kept forgetting until Amir from The Not So Literary Heiresses made a post in April about Great Tutorials & Templates for Blogger Book Blogs. Thus resulting in me finally getting around to a spoiler customization tutorial.

The Original Code from BloggerSentral

VISIBLE CONTENT HERE
<div id=”spoiler” style=”display:none”>
HIDDEN CONTENT HERE
</div>
<button title=”Click to 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>
You’ll want <div id=”spoiler” style=”display:none”>HIDDEN CONTENT HERE </div> to be below the button tags or your spoiler appears BEFORE the button. Perfectly optional, but I prefer the spoiler to appear AFTER the button.

To customize this, you’ll need to add “id” to the button tags, thus looking like the code below. I usually use “bookspoiler” since that’s all I use. You can make multiple ones to set apart movie, manga, comic, etc. to set each spoiler apart from another. All you need to do is change “bookspoiler” to whichever name you choose. You could even call it Fluffy if you want. Do not change anything in the div tags. I’ll get into that later.

VISIBLE CONTENT HERE
<button id=”bookspoiler” title=”Click to view spoiler” 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>
<div id=”spoiler” style=”display:none”>
HIDDEN CONTENT HERE
</div>

CSS – Go into Blogger Dashboard → Template → Edit HTML

#bookspoiler{
border:none;
font-family:overlock;
color:#00008b;
}
#bookspoiler:hover{
color:#dc143c;
}
The font family won’t work unless you change from Overlock. By default it’ll show Times New Roman unless you have Overlock installed. For colors, you can choose some over at QuackIt. No ducks are involved.

Other codes you can add to CSS: background-color, font-size, font-weight, border-color, etc.

And there’s your customized spoiler button! But there’s one more thing… that button only works for new paragraphs. It does give a grayish background color, so you can add in “background-color: none;” or just use this code:

VISIBLE CONTENT HERE
<div id=”bookspoiler” title=”Click to Expand/Collapse” type=”button” onclick=”if(document.getElementById(‘spoiler’) .style.display==’none’) {document.getElementById(‘spoiler’) .style.display=”}else{document.getElementById(‘spoiler’) .style.display=’none’}”>View Spoiler »</div>
<div id=”spoiler” style=”display: none;”>
HIDDEN CONTENT HERE
</div>
To use a spoiler as a sentence, you’ll need to use this instead:

VISIBLE CONTENT HERE
<span id=”bookspoiler” title=”Click to Expand/Collapse” type=”button” onclick=”if(document.getElementById(‘spoiler’) .style.display==’none’) {document.getElementById(‘spoiler’) .style.display=”}else{document.getElementById(‘spoiler’) .style.display=’none’}”>View Spoiler »</span>
<span id=”spoiler” style=”display:none;”>
HIDDEN CONTENT HERE
</span>
Oh boy, I do hope this part isn’t going to be confusing, haha.

I HIGHLY recommend the parts that are in bold below you change to a new unique id. I usually name it after the post/book title, like Onyx1, Onyx2, etc. or Camelot1 or CamelotBurning1, Camelot2, etc. Otherwise only one would show and the others won’t work.

The good part about this particular spoiler is you can’t see it through email. The bad part? You can’t click on the spoiler and view it in the email – you have to literally go and read the post on the site to read those spoilers.

So, there’s your beautifully (I hope) customized spoiler button! Enjoy! If you do need any help though – the spoiler button may get a tad bit annoyed and not work at times so, feel free to let me know in the comments and I’ll do my best to assist you. ^_^

Summer Reading Challenge Sign Ups!

Thanks for stopping by! If you enjoyed reading this post, please consider leaving a comment. You can also have future posts delivered to you via RSS, NetworkedBlogs or Bloglovin. Happy Reading!

(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-38687628-1’, ‘bookwyrmingthoughts.com’);
ga(‘send’, ‘pageview’);

Sophia is a socially awkward Communications major who has a GIF for nearly everything and is frequently in a Hogwarts House Crisis. More of her bookish reviews can be found at The Arts STL.

Categories: Blogging, General
Tags:


Want to be a bookwyrm and get all the bookish posts when it goes live?

Leave a Reply

Fellow bloggers? Share your latest content with other bookwyrms by entering your URL and clicking the button below