It is difficult to warn users about possible spoilers in an article, if you are a blogger who blogs about TV shows, movies or books which are some common subjects of spoilers for its audience. Today you will learn how to implement a simple technique to handle spoiler contents on your blog posts.
Before you proceed any further you want to make sure that this is what you want to have as a feature on your blog, so try this live demo here
The best thing is that you don't have to write a lot of stuff to include it into your post every time, once you set it up, you just need the text content which is probably a spoiler, into a line of HTML which we will provide in the tutorial below.
It is a little addition, but we have created it to work on any kind of device a reader might be using so they get the best experience on your blog and keep themselves away from spoilers if they are unaware, following are some features worth noting
The best thing is that you don't have to write a lot of stuff to include it into your post every time, once you set it up, you just need the text content which is probably a spoiler, into a line of HTML which we will provide in the tutorial below.
Spoiler: This is easy to add to your blog!! See this.
It is a little addition, but we have created it to work on any kind of device a reader might be using so they get the best experience on your blog and keep themselves away from spoilers if they are unaware, following are some features worth noting
- Almost no work to do when adding these Spoiler box in your blog posts.
- Works on Blogger, WordPress, basically it is all HTML and CSS, thus works perfectly fine on any kind of website. The tutorial is meant for Blogger though.
- Your readers use mobile devices to read your blog? No problem, we got you covered, they just need to tap the boxes to show the hidden content
- Different colors! Match it with your blog's color scheme.
Let's Begin The Tutorial
You are here, it means you have made up your mind and would like to continue adding it to your blogger blog (or probably other sites like WP). Before we begin these are some steps you should follow:- Backup your Blogger Template - In case anything goes wrong you can restore it to the way it was.
- Open a plain text editor in your computer (Notepad or TextEdit, if you have a code editor then it is a plus but that's optional!)
- Coffee or tea? You choose :)
This tutorial is split into two parts, adding the CSS and then setting up the HTML, these are the only two things that you have to go through and we will give you a small hints about what's going on with each part so you don't feel lost.
Adding the CSS
CSS is the language used on the web to style things on a website, it plays a major role in our spoiler content box, as it is the back-bone of how our spoiler content show/hide box is going to work.Following is the CSS code we are going to use, this is the whole code, and is less than 2 kilobytes in size, that means no performance impact on your blog at all :
/*************************************
Spoiler Content Box
# By Deepak Kamat
# stramaxon.com
# depy45631@gmail.com
Get it for your blog at:
http://goo.gl/ZiJj3J
*************************************/
.spoiler {
position: relative;
border: 2px dotted rgba(0,0,0,0.1);
padding: 10px;
background-color: #ffe496;
margin: 10px 0;
}
.spoiler {
color: #ffe496;
color: transparent;
-webkit-transition: 0.4s all ease-in-out;
-moz-transition: 0.4s all ease-in-out;
-ms-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
.spoiler:hover ,
.spoiler:active ,
.spoiler:focus {
color: inherit;
}
.spoiler::after {
content: "{Click or hover to see spoiler}";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #ffe496;
text-align: center;
font-size: 0.8em;
padding: 10px;
color: rgba(0,0,0,0.6);
font-weight: 600;
opacity: 1;
-webkit-transition: 0.4s all ease-in-out;
-moz-transition: 0.4s all ease-in-out;
-ms-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
.spoiler:hover::after,
.spoiler:active::after,
.spoiler:focus::after{
opacity: 0;
}
/* Colors */
.spoiler.green { background-color: #c8fbb8;}
.spoiler.green::after { background-color: #c8fbb8;}
.spoiler.blue { background-color: #bfe1ff;}
.spoiler.blue::after { background-color: #bfe1ff;}
.spoiler.red { background-color: #ffbfbf;}
.spoiler.red::after { background-color: #ffbfbf;}
.spoiler.purple { background-color: #e4bfff;}
.spoiler.purple::after { background-color: #e4bfff;}
.spoiler.black { background-color: #222; color: #fff;}
.spoiler.black::after { background-color: #222; color: #fff;}
.spoiler.white { background-color: #fff; color: #222; border-color: rgba(0,0,0,0.8); }
.spoiler.white::after { background-color: #fff; color: #222; }
Looks like a large piece of code? That's a very small snippet in comparison to what other plugins for these kinds of features takes.
Now follow these steps:
- Copy the entire CSS snippet above and place it in a Notepad/TextEdit application
- See how to add CSS to your Blogger Blog or,
- Go to your Blogger Dashboard - Template - Customize - Advanced - Add CSS
- And paste the CSS in the text box on the right hand side, now click on the "Apply to blog" button
Once you have the CSS code in place you can proceed to the next section to learn how to make use of the CSS we added in a blog post.
The HTML
We have to tell the browser "Hey web browser, this is a spoiler box, please hide its text content!", unfortunately we can't tell it in English, so we use HTML, that's the markup language, if you have been working on Blogs for long you might have come across it many times, because it's what makes everything on the web!
Without further lesson on HTML, here's the markup we need, copy it, we'd need it in a moment:
This is the base code we need, of course you want to replace The quick brown fox jumps over the lazy dog. to anything you want to appear inside the spoiler box, you can put images, text, headings, even videos!
If you like you can apply different colors to the spoiler box, there are 7 color styles, namelyWithout further lesson on HTML, here's the markup we need, copy it, we'd need it in a moment:
<div class="spoiler"> The quick brown fox jumps over the lazy dog. </div>
This is the base code we need, of course you want to replace The quick brown fox jumps over the lazy dog. to anything you want to appear inside the spoiler box, you can put images, text, headings, even videos!
Using the HTML
Follow these steps properly to learn how to add it to a blog post, you just have to carefully understand the process once and afterwards you would be able to easily modify the code as you like and add it to your posts.
- Open a post or a draft in your blogger dashboard
- On the top left corner of the post editor, you will see two buttons "Compose | HTML", click on the HTML button OR
- You could skip the above step by enabling "Interpret typed HTML" in the options in your post editor, on the right sidebar under Post Settings, click on Options and then choose "Interpret typed HTML"
- Paste the HTML in the post where you want it to appear. That's it, if you pasted the code in "HTML" mode, switch back to "Compose" and you will see the text in post editor with no styles, don't worry, when you load the post on your blog the spoiler content styles will be applied automatically.
Applying different colors
yellow (default) | green | blue | red | purple | black | white
You can easily change the color of a spoiler content box by adding the name in the
class="spoiler" part. How? See the example below:Default color:
<div class="spoiler"> ... </div>
Blue:
<div class="spoiler blue"> ... </div>
Green:
<div class="spoiler green"> ... </div>
And so on. You just have to add the supported colors name next to spoiler in the class attribute. If you know how to code CSS.
If you want to add new colors please let us know in the comments on this post and we will be happy to consider it if it is a good fit.
Generate Spoiler Content Box Code
Don't want to write the code each time you proceed to add it in your post? Use this generator to enter your desired content and get the code right away, works on mobile phones as well!A small tool to make your life easier :)
What else?
A similar functionality that you might want to take a look at which also can be used for spoiler content show/hide effect: Expandable Section in your Post on Blogger
Stuck with something and don't know how to proceed? Please leave us a comment on this post and we will get back to you as soon as possible. Or found a bug in the generator? Send me an email at depy45631@gmail.com
Like what I am doing and want me to make something similar but more customized for your blog/website? I am a web developer and you can hire me.
