Announcements

Started book blogging in 2016 but missed sign ups? No worries! We have you covered.
Check out the details on the original post.

Saturday, July 19, 2014

,

Tutorial: Customizing the Spoiler Button on Blogger

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.
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). >_<
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!
Share:

Sophia

Sophia is the owner and founder of Bookwyrming Thoughts, but also found on various parts of the internet. She's a 19-year-old communications major who has weird humor and doesn't fit the Asian stereotype (maybe a little). Books, chocolate, technology, and music are among some of her favorite things. For more of her work, visit her personal website.