tesscodes | Hidden lj-cut tags!

✂

The cleanest way to hide an lj-cut!

So you want a content jump on your own terms, huh?

We've all been there. Standard LJ cuts have plenty of uses, but sometimes we want it to look extra pretty. Now, I know there are tutorials on how to make a fake cut and there have been for years, but even though I've used and recommended that way plenty of times myself, through messing with it here and there over time I've worked out the absolute simplest, lightest way to use lj-cut while also hiding it. This tutorial will show you how!

The bare minimum

This is absolutely all you need to cut your content and hide the cut text: <span style="display:none;"><lj-cut></span>

That's it! That's all you need. The span wraps the cut tag and sets it to display:none and we're on our way to making a pretty pretty jump cut! The reason we use a span rather than a div is because it's an inline element, which means we won't have any unintended spacing issues.

Making it work

So the cut itself works, but how do we click into the content now? Well, you could always click the entry link, but that's not always a clear enough indicator that there's more content inside. Usually people want a nice code, their own line of fancy text, or an image to link to the cut. So how do we do that?

Put whatever you want before the hidden cut text code we just talked about. This can be anything you want, as long as it's before the hidden cut and has a link into the entry in some way; the whole thing can be the cut text link, or you can add a link inside it!

<a href="ENTRYURL">Your pretty code/text/image</a> <span style="display:none;"><lj-cut></span>

Your cut content!

If you don't need a page jump you can skip this next step!

The key to making it function like a jump cut, which I don't see hidden cuts manage very often, is to add an anchor link. Some hidden cut tutorials tell you to use the standard #cutid1, but I find that that just doesn't work with a hidden cut. Custom anchor names are nicer anyway since you can name them anything you like, and they're super easy to implement, so no big loss there.

<a href="ENTRYURL#MyStuff">Your pretty code/text/image</a> <span style="display:none;"><lj-cut></span>

<a name="MyStuff"></a>Your cut content!

Now for some fun examples!

Feel free to use, edit, reconstruct, and generally play with these examples however you'd like for your own use!

A line of text with only part of it linked:

A line of styled text for your fake cut link.

<lj-raw><div style="font-family:arial black,gadget,sans-serif;font-size:20px;text-transform:uppercase;color:#555;text-align:center;">



Your <a href="ENTRYURL#MyStuff" style="color:#008080;text-decoration:none;text-shadow:1px 1px 1px rgba(0,0,0,0.2);">text</a>.



</div><span style="display:none;"><lj-cut></span></lj-raw>



<a name="MyStuff"></a>Your cut content!

An image cut:

<lj-raw><center><a href="ENTRYURL#MyStuff">



<img src="IMAGEURL" style="padding:10px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);">



</a></center><span style="display:none;"><lj-cut></span></lj-raw>



<a name="MyStuff"></a>Your cut content!

An image with overlaid text cut:

this is a title
THIS IS A SUBTITLE LINE

<lj-raw><a href="ENTRYURL#MyStuff" style="text-decoration:none;"><div style="width:424px;height:500px;background:#eee url(IMGURL)center;background-size:cover;margin:0 auto;text-align:center;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.05),1px 1px 2px 1px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;">



<div style="color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.8);font-family:palatino linotype,georgia,serif;line-height:1.5;">



<i style="font-size:25px;letter-spacing:2px;text-transform:lowercase;">TITLE</i><br>

<b style="font-size:9px;letter-spacing:4px;text-transform:uppercase;">SUBTITLE</b>



</div>



</div></a><span style="display:none;"><lj-cut></span></lj-raw>



<a name="MyStuff"></a>Your cut content!

Note: Change the width and height to fit whatever image you like! You can remove either of the titles if you only need one, or even add an icon over top for extra fanciness! Just make sure anything you add is WITHIN the div holding the title and subtitle to keep it all vertically centered.

A code with a cut link wrapping the whole code:

A TITLE HERE

A SUBTITLE LINE HERE

<lj-raw><a href="ENTRYURL#MyStuff" style="text-decoration:none;"><div style="max-width:600px;margin:0 auto;text-align:center;font-family:century gothic,helvetica,arial,sans-serif;line-height:1.5;">






<img src="IMG" style="height:100px;padding:5px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);margin:0 3px 10px 3px;">



<img src="IMG" style="height:100px;padding:5px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);margin:0 3px 10px 3px;">



<img src="IMG" style="height:100px;padding:5px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);margin:0 3px 10px 3px;">



<img src="IMG" style="height:100px;padding:5px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);margin:0 3px 10px 3px;">






<div style="font-size:25px;letter-spacing:6px;color:#008080;text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-transform:lowercase;">

TITLE

</div>



<div style="font-size:10px;color:#111;letter-spacing:10px;font-weight:bold;border-top:4px solid rgba(0,0,0,0.05);text-transform:uppercase;">

SUBTITLE

</div>






</div></a><span style="display:none;"><lj-cut></span></lj-raw>



<a name="MyStuff"></a>Your cut content!

Note: These images are height-based and do not have to be 100x100 icons. Feel free to use gifs or a combination of gifs and icons!

A code with a cut link wrapping part of the code:

a link title here