Spoiler Content Box for Posts inward Blogger Blogs

0
20
It is hard to warn users virtually possible spoilers inwards an article, if you lot are a blogger who blogs virtually TV shows, movies or books which are simply about mutual subjects of spoilers for its audience. Today you lot volition larn how to implement a uncomplicated technique to grip spoiler contents on your weblog posts.

Before you lot proceed whatever farther you lot wish to brand certain that this is what you lot wish to receive got equally a characteristic on your blog, so endeavor this alive demo here

The best affair is that you lot don’t receive got to write a lot of materials to include it into your post every time, i time you lot gear upward it up, you lot simply remove the text content which is in all probability a spoiler, into a job of HTML which nosotros volition furnish inwards the tutorial below.

Spoiler: This is slow to add together to your blog!! See this.

It is a piffling addition, but nosotros receive got created it to piece of work on whatever sort of device a reader powerfulness endure using so they acquire the best experience on your weblog together with hold themselves away from spoilers if they are unaware, next are simply about features worth noting

  1. Almost no piece of work to do when adding these Spoiler box inwards your weblog posts. 
  2. Works on Blogger, WordPress, basically it is all HTML together with CSS, thence plant perfectly fine on whatever sort of website. The tutorial is meant for Blogger though. 
  3. Your readers work mobile devices to read your blog? No problem, nosotros got you lot covered, they simply remove to tap the boxes to demo the hidden content
  4. Different colors! Match it amongst your blog’s color scheme. 

Let’s Begin The Tutorial

You are here, it agency you lot receive got made upward your heed together with would similar to proceed adding it to your blogger weblog (or in all probability other sites similar WP). Before nosotros get these are simply about steps you lot should follow:

  • Backup your Blogger Template – In instance anything goes incorrect you lot tin restore it to the way it was. 
  • Open a obviously text editor inwards your estimator (Notepad or TextEdit, if you lot receive got a code editor together with so it is a plus but that’s optional!)
  • Coffee or tea? You direct ๐Ÿ™‚
This tutorial is dissever into 2 parts, adding the CSS together with and so setting upward the HTML, these are the solely 2 things that you lot receive got to acquire through together with nosotros volition give you lot a pocket-sized hints virtually what’s going on amongst each constituent so you lot don’t experience lost. 

Adding the CSS

CSS is the linguistic communication used on the spider web to trend things on a website, it plays a major role inwards our spoiler content box, equally it is the back-bone of how our spoiler content show/hide box is going to work.

Following is the CSS code nosotros are going to use, this is the whole code, together with is less than 2 kilobytes inwards size, that agency no performance behave upon on your weblog at all :

/************************************* Spoiler Content Box   # By Deepak Kamat  # stramaxon.com  # [email protected]  Get it for your weblog 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 run into 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 similar a large slice of code? That’s a real pocket-sized snippet inwards comparing to what other plugins for these kinds of features takes.

Now follow these steps:

  • Copy the entire CSS snippet higher upward together with house it inwards a Notepad/TextEdit application
  • See how to add together CSS to your Blogger Blog or,
  • Go to your Blogger Dashboard – Template – Customize – Advanced – Add CSS 
  • And glue the CSS inwards the text box on the correct manus side, directly click on the “Apply to blog” button
Once you lot receive got the CSS code inwards house you lot tin proceed to the side past times side department to larn how to brand work of the CSS nosotros added inwards a weblog post. 

The HTML 

We receive got to say the browser “Hey spider web browser, this is a spoiler box, delight cover its text content!”, unfortunately nosotros can’t say it inwards English, so nosotros work HTML, that’s the markup language, if you lot receive got been working on Blogs for long you lot powerfulness receive got come upward across it many times, because it’s what makes everything on the web!

Without farther lesson on HTML, here’s the markup nosotros need, re-create it, we’d remove it inwards a moment:

<div class="spoiler"> The quick dark-brown trick jumps over the lazy dog. </div> 

This is the base of operations code nosotros need, of course of written report you lot wish to replace The quick dark-brown trick jumps over the lazy dog. to anything you lot wish to look within the spoiler box, you lot tin set images, text, headings, fifty-fifty videos!

Using the HTML

Follow these steps properly to larn how to add together it to a weblog post, you lot simply receive got to carefully sympathise the procedure i time together with subsequently you lot would endure able to easily modify the code equally you lot similar together with add together it to your posts.
  • Open a post or a draft inwards your blogger dashboard
  • On the scope left corner of the post editor, you lot volition run into 2 buttons “Compose | HTML”, click on the HTML push OR 
  • You could skip the higher upward footstep past times enabling “Interpret typed HTML” inwards the options inwards your post editor, on the correct sidebar nether Post Settings, click on Options together with and so direct “Interpret typed HTML
  • Paste the HTML inwards the post where you lot wish it to appear. That’s it, if you lot pasted the code inwards “HTML” mode, switch dorsum to “Compose” together with you lot volition run into the text inwards post editor amongst no styles, don’t worry, when you lot charge the post on your weblog the spoiler content styles volition endure applied automatically.

Applying unlike colors

If you lot similar you lot tin apply unlike colors to the spoiler box, at that spot are seven color styles, namely

yellow (default) | light-green | bluish | ruby | imperial | dark | white

You tin easily alter the color of a spoiler content box past times adding the lift inwards the  class="spoiler" part. How? See the instance below:

Default color:

<div class="spoiler"> ... </div> 

Blue:

<div class="spoiler blue"> ... </div> 

Green:

<div class="spoiler green"> ... </div> 

And so on. You simply receive got to add together the supported colors lift side past times side to spoiler inwards the class attribute. If you lot know how to code CSS.

If you lot wish to add together novel colors delight allow us know inwards the comments on this post together with nosotros volition endure happy to regard it if it is a practiced fit.

Generate Spoiler Content Box Code

Don’t wish to write the code each fourth dimension you lot proceed to add together it inwards your post? Use this generator to locomote into your desired content together with acquire the code correct away, plant on mobile phones equally well!

Influenza A virus subtype H5N1 pocket-sized tool to brand your life easier ๐Ÿ™‚

What else?

A similar functionality that you lot powerfulness wish to accept a await at which also tin endure used for spoiler content show/hide effect: Expandable Section inwards your Post on Blogger
Stuck amongst something together with don’t know how to proceed? Please acquire out us a comment on this post together with nosotros volition acquire dorsum to you lot equally before long equally possible. Or constitute a pรตrnikas inwards the generator? Send me an e-mail at [email protected]
Like what I am doing together with wish me to brand something similar but to a greater extent than customized for your blog/website? I am a spider web developer together with you lot can hire me.


Sumber http://www.stramaxon.com