Some Fic Rec Coding - A Copy-Paste Resource

[alchemistdoctor]

Edit: And as usual, DW messed with the code in THIS post. Give me a moment to fix it. XD
Edit 2: I've got it! Finally. 


So as you all know, I've recently been working on some fic rec pages, and the formatting has been... a Journey. However, I think I finally came up with a basic format that works with DW's HTML and CSS styles on most journals, so I thought I'd share it for others' use. The posts look like this:



To use the code, copy/paste the code here into the HTML editor of your DW post.

Now to edit. 

The <h1> tags are your headings: in my case they separate the Completed fics and the Incompleted fics. If you have more than one heading, go ahead and copy/paste this line multiple times. In the code above, there are two headings, and the first doesn't have any fics beneath. Replace the entire bracketed text (including the brackets) with your title.

The <h2> tag is for your pairings/subheadings. These will nest under the h1 headings, and be less prominent. There's a cut under each h2 heading, so if you want to add more, make sure to copy from <h2> all the way through the next </raw-code> (this is why that first <h2> is empty in the source code above: if you add things between the two lines, they'll be under the cut). 

Here's where you have two options: you can either link to an Ao3 fic, or a fic hosted elsewhere.

For Ao3 fic:

Go to the fic you want to rec and hit the share button at the top:


A box with code will come up. You can now delete everything between the tags that say <!--THIS IS WHERE YOUR FIC REC BEGINS.--> and <!--THIS IS WHERE YOUR FIC REC ENDS.--> Just paste your code between, then add your comment in place of the [PERSONAL COMMENTS] bracket.

To add more fics, copy and paste the code -- the comments in-code show you where to start and stop.

For non-Ao3 fic:

Every portion of the fic is in brackets. Go ahead and fill in what information you wish. If you don't want a line or a link, you can delete it!

If you have any questions, please let me know. I'll do my best to answer what I can! This setup isn't perfect but I tried to make the code as simplistic and organised as I know how to without going into some CSS/more complex do-dahs. Good luck reccing!

Comments

[novembermond]

thank you this is very useful :)

[alchemistdoctor]

You're very welcome!

[krazyrabbit]

Bookmarked for future use, thanks!

[alchemistdoctor]

I'm glad you think it'll be handy! Let me know if you have any issues.

[tozka]

oh my GOD I feel like such a dumbass. I DID NOT KNOW a) about the share button b) that it had pre-formatted fic information and c) I did NOT NEED TO CODE THAT SHIT BY HAND AFTER ALL

OH MY GOD

(Thank you for this post! I'm definitely going to use this info later lmao)

[alchemistdoctor]

You're very welcome! You're not alone, I only recently found out about the share button as well. So don't feel too dumb, I was hand-coding it all too. >.<

[tozka]

I'm going to be kind to myself and say it's because I assumed the share button was, like many other share buttons, just a thing that said "I liked this fic on AO3 here is a link" with no other information or coding lmao

[alchemistdoctor]

That's exactly what I did. I think it's what I lot of people do, actually, which is why I mentioned it in the guide instead of just assuming people knew already. It's being sneaky by hiding in plain sight.

Excellent resource!

[jesse_the_k]

....and the next time you figure out something, here's some handy code you can use to make a "copy this and paste it into your journal" area right at the bottom of a post.

The HTML commands create the box with text in it that users can copy and paste. Replace the string "$the-stuff-you-want-to-share-goes-here$" with whatever code or text you wish to share. It's handy for sharing a meme--here are the five questions and the code to make them bold &c.

---

  
<hr>
<pre style="word-wrap: break-word; white-space: pre-wrap;">
<textarea cols=40 rows=40 style="max-width: 80%">  
$the-stuff-you-want-to-share-goes-here$
</textarea>
<hr>

Re: Excellent resource!

[alchemistdoctor]

Thank you! I did try a text-area bit for this post, but it went nuts and I couldn't make it stop going nuts. I'll probably try again if I update the code. :)

[vicki_rae]

This is very helpful, thank you!

[alchemistdoctor]

You're very welcome!