David Navigation Code (SECRET SANTA)

[gotbadblood]

Happy Holidays from your Secret Santa Lii! I'm afraid I'm not a skilled enough artist to give you a work of fanart that's gift-worthy, so I decided to instead use my coding to make you a personalized navigation for David's journal! I hope you like it!

Everything from David's journal has already been added to the the code, so all you need to do is C&P the code into a forward dated or stickied entry on his journal!

Tae-won Song

Info

App

Regains

Inbox

Visualosities

Hmd

Code by Yuff

SIMPLE VERSION CODE
<raw-code> <div style="height: 258px; width: 540px; background-color: #FFF; margin: auto;"> <div style="height: 238px; width: 540px; background: url('https://78.media.tumblr.com/92e0ed9404f74c942d39dea610814771/tumblr_oxezjoNtSK1rxvi1oo3_540.gif');"> <div style="background: url('https://i.imgur.com/W3QLuYf.png'); height: 238px; width: 540px; border-bottom: 1px solid #aa1f24;"> <div style="display: inline-block; margin-top: 195px; padding-left: 5px; font-weight: 200; font-size: 35px; font-family: Garamond; font-variant: small-caps; color: #aa1f24;"> Tae-won Song </div></div></div> <div style="width: 540px; height: 20px; font-family: Garamond; color: #aa1f24; font-size: 16px; font-variant: small-caps; text-align: center; font-weight: 200;"> <!--START FIRST LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 15%; float: left; "> <a href="https://negativism.dreamwidth.org/338.html" style="text-decoration: none; color: #aa1f24">Info</a></div> <!--END FIRST LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 15%;"> <a href="https://negativism.dreamwidth.org/1645.html" style="text-decoration: none; color: #aa1f24">App</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 15%;"> <a href="https://negativism.dreamwidth.org/1240.html" style="text-decoration: none; color: #aa1f24">Regains</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 15%;"> <a href="https://negativism.dreamwidth.org/780.html" style="text-decoration: none; color: #aa1f24">Inbox</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 15%;"> <a href="https://negativism.dreamwidth.org/534.html" style="text-decoration: none; color: #aa1f24">Visualosities</a></div> <!--END LINK--> <!--START LAST LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; float: right; width: 15%; "> <a href="https://negativism.dreamwidth.org/1498.html" style="text-decoration: none; color: #aa1f24">Hmd</a></div> <!--END LAST LINK--> </div></div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px; font-size: 80%;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div> </raw-code>


And here is a version if you decide to add more links, it'll give you a second page of links, allowing for 12 links total!

Tae-won Song

Info

App

Regains

Inbox

Visualosities

Hmd

➣

Link

Link

Link

Link

Link

Link

➣

Code by Yuff

MULTI-PAGE CODE
<raw-code> <div style="height: 258px; width: 540px; background-color: #FFF; margin: auto;"> <div style="height: 238px; width: 540px; background: url('https://78.media.tumblr.com/92e0ed9404f74c942d39dea610814771/tumblr_oxezjoNtSK1rxvi1oo3_540.gif');"> <div style="background: url('https://i.imgur.com/W3QLuYf.png'); height: 238px; width: 540px; border-bottom: 1px solid #aa1f24;"> <div style="display: inline-block; margin-top: 195px; padding-left: 5px; font-weight: 200; font-size: 35px; font-family: Garamond; font-variant: small-caps; color: #aa1f24;"> Tae-won Song </div></div></div> <div style="width: 540px; height: 20px; overflow: hidden;"> <!--START PAGE 1--> <div style="width: 540px; height: 20px; font-family: Garamond; color: #aa1f24; font-size: 16px; font-variant: small-caps; text-align: center; font-weight: 200;"> <a name="PAGE1"></a> <!--START FIRST LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%; float: left; "> <a href="https://negativism.dreamwidth.org/338.html" style="text-decoration: none; color: #aa1f24">Info</a></div> <!--END FIRST LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="https://negativism.dreamwidth.org/1645.html" style="text-decoration: none; color: #aa1f24">App</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="https://negativism.dreamwidth.org/1240.html" style="text-decoration: none; color: #aa1f24">Regains</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="https://negativism.dreamwidth.org/780.html" style="text-decoration: none; color: #aa1f24">Inbox</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="https://negativism.dreamwidth.org/534.html" style="text-decoration: none; color: #aa1f24">Visualosities</a></div> <!--END LINK--> <!--START LAST LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%; "> <a href="https://negativism.dreamwidth.org/1498.html" style="text-decoration: none; color: #aa1f24">Hmd</a></div> <!--END LAST LINK--> <!--START ARROW--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; float: right; width: 5%; "> <a href="#PAGE2" style="text-decoration: none; color: #aa1f24">➣</a></div> <!--END ARROW--> </div> <!--END PAGE 1--> <!--START PAGE 2--> <div style="width: 540px; height: 20px; font-family: Garamond; color: #aa1f24; font-size: 16px; font-variant: small-caps; text-align: center; font-weight: 200;"> <a name="PAGE2"></a> <!--START FIRST LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%; float: left; "> <a href="URL" style="text-decoration: none; color: #aa1f24">Link</a></div> <!--END FIRST LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="URL" style="text-decoration: none; color: #aa1f24">Link</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="URL" style="text-decoration: none; color: #aa1f24">Link</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="URL" style="text-decoration: none; color: #aa1f24">Link</a></div> <!--END LINK--> <!--START LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%;"> <a href="URL" style="text-decoration: none; color: #aa1f24">Link</a></div> <!--END LINK--> <!--START LAST LINK--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; width: 14%; "> <a href="URL" style="text-decoration: none; color: #aa1f24">Link</a></div> <!--END LAST LINK--> <!--START ARROW--> <div style="display: inline-block; height: 16px; line-height: 16px; padding: 2px; float: right; width: 5%; "> <a href="#PAGE1" style="text-decoration: none; color: #aa1f24">➣</a></div> <!--END ARROW--> </div> <!--END PAGE 2--> </div></div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px; font-size: 80%;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div> </raw-code>