DIY Spoilertags!

*Previous post had a little problem. This one will work (I'm talking about method 2)

 

 

If you're a goodreads transplant, and, like me, depended heavily on those handy little spoilertags, then don't worry.  Booklikes is flexible enough that you can make your own!

 

Here are two ways, for different levels of effort/html-savvyness.  And since I actually am quite rusty and haven't used javascript or html for years, I'll bet my life there are even better ways.

 

Method #1: The single-post spoiler

For this one, you only need to work within a single blog without prep. Just go into html mode (It's a little blue button that says "html" at the very right of the bar on the top of your blog editor, on the same row that has bold, italic, etc.) and insert the following around your spoiler:

In action:

[[spoiler:highlight for text]This is my spoiler!! Yeah, I'm a kind of lame spoiler.]

 

 

Method #2: For this one, we have to go into the html itself.

--go to settings
--click the blog tab
--click the green "Theme: customize" button

--inside the 

"Custom CSS" box, enter the following (and yes, the period at the front of .spoilertext is important, because it indicates that this should be applied to a class)

 

.spoilertext{
display:none;
}

Here is a screencap:

css

 

 

--click the green "Edit HTML" button.

--in the scary-looking html, find the tag that says "< /head >"(without the spaces, though. It's the closing tag of the header, if you know html.  If you see a tag that says "body", you've gone too far.)

--Insert the following code directly above the closing-header-tag (that < / head> thing):

 

 

(because BL is being wonky and keeps disappearing the javascript, it's also over here:

http://pastebin.com/2wtqpntj)

Here's a screencap:

script location

Congrats! You now have a magical spoiler-toggle!  To use it, just surround your spoiler with a span of class "spoilertext", like this, but without the "*"'s: <*span class="spoilertext">put lots of spoilery text in here <*/span>

 

A screencap:

add spoiler

 

In action:

Hey, I'm a spoiler! I can be magically shown and hidden!

 

The beauty of this method is that if you decide to change what things with the class "spoilertag" do, the fix will be applied to all of the reviews using the class spoilertag, even those created before you changed your solution to the spoiler problem.  

 

Also, note that they only work when you look at the css'd version of the page; e.g. via http://pagefault.booklikes.com/ for me.  So go to .booklikes.com to see if your spoiler worked.

 

Have fun spoiler-tagging!

 

 

// ]]>

 

 

*This wasn't a part of original post*

 

You don't need to create class .spoilertag

 

You can do anything you want!

 

.spoiler

 

or just

 

.s

 

As long as you change it everywhere and use consistently, it will work.

 

 

 

 

 

 

Source: http://pagefault.booklikes.com/post/457427/diy-spoilertags-
Reblogged from AnHeC (I'm too fucking busy and vice versa)