HOME | DD
Sabtastic β How to make clickable icon links for your journal.
Published: 2012-12-23 22:06:10 +0000 UTC; Views: 17383; Favourites: 134; Downloads: 0
Redirect to original
Description
body div#devskin8995733 .journalbox { border:1px #bed3c0 solid; border-top:42px #bed3c0 solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; color:#565656; background-color:#e7eeea; font-family:verdana; font-size:8pt; text-align:center; font-variant:normal; font-weight:normal; } body div#devskin8995733 .journalbox .list { background-color:#eff5f1; color:#bed3c0; font-family:verdana; font-size:8pt; text-align:center; font-variant:normal; border-bottom:3px #bed3c0 solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; font-weight:normal; padding-bottom:10px; } body div#devskin8995733 .journalbox .list .a { background-color:#eff5f1; color:#bed3c0; font-family:verdana; padding-top:10px; font-size:8pt; text-align:center; font-variant:normal; font-weight:normal; } body div#devskin8995733 .journalbox .list img { opacity:0.4; filter:alpha(opacity=40); _zoom:1; } body div#devskin8995733 .journalbox h2 { border-color:#bed3c0; background-color:transparent!important; padding-top:50px; color:#798980; font-family:trebuchet ms; font-size:26pt; letter-spacing:-1px; text-align:center; font-variant:normal; font-weight:900; } body div#devskin8995733 .journalbox .journaltop { background-color:#eff5f1; text-align:center; background-image:url(https://fc01.deviantart.com/fs46/o/2009/177/1/1/127337538_74486_envitop.jpg); background-position:left; background-repeat:no-repeat; color:#798980; border-bottom:5px #bed3c0 solid; letter-spacing:0px; padding-bottom:20px; height:150px; } body div#devskin8995733 .journalbox .journalbottom A:link { color:#798980; font-family:verdana; text-transform:lowercase; text-decoration:none; letter-spacing:0px; } body div#devskin8995733 .journalbox .journalbottom A:hover { color:#196ba7; padding-bottom:2px; font-family:verdana; text-transform:lowercase; cursor:default; text-decoration:none; letter-spacing:0px; border-top:20px #d4e4d9 solid; border-bottom:2px #d4e4d9 solid; } body div#devskin8995733 .journalbox .journaltext { font-family:verdana; color:#798980; font-size:8pt; text-align:center; text-decoration:none; } body div#devskin8995733 .journalbox .journaltext a { color:#555555; text-transform:lowercase; text-decoration:underline!important; letter-spacing:0px; } body div#devskin8995733 .journalbox .journaltext a:hover { text-transform:lowercase; color:#196ba7; cursor:default; text-decoration:none!important; letter-spacing:0px; } body div#devskin8995733 .journalbox .journalbottom { background-color:#eff5f1; font-family:verdana; text-align:center; text-transform:lowercase; border-top:5px #bed3c0 solid; padding-top:20px; } body div#devskin8995733 .journalbox .journaltop img { display:none !important; } body div#devskin8995733 .journalbox .boxtop { padding:0 !important; } body div#devskin8995733 i { color:#798980; font-family:verdana; text-decoration:none; letter-spacing:0px; } body div#devskin8995733 b { background-color:transparent!important; text-decoration:none; padding-top:27px; color:#798980; font-family:trebuchet ms; font-weight:600; border-bottom:1px solid #d4e4d9; font-size:15pt; letter-spacing:-1px; text-align:center; font-variant:normal; } body div#devskin8995733 a img { background-color:#afbbaf; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; padding:0px; border:0px #92a399 solid; } body div#devskin8995733 a:hover img { background-color:#d5e0d5; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; padding:0px; border:1px #92a399 solid; } body div#devskin8995733 blockquote { background-color:#d5e0d5; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; padding:10px; border:1px #92a399 solid; }
Follow Me Here, Too!
My Gallery | Livestream | Facebook
Newgrounds | Twitter | Tumblr | Commissions
Want to learn how to spice up your page with icons like I have on the top of this journal?
Here's all of the stuff you need to do it!
1.
First off, you MUST be an active DeviantART subscriber with an active membership.
If you don't have a membership, just ignore this journal or pass it on to a friend who has one!
2.
You need to type in a specific CSS code in order to get your icon to appear.
[You can copy and paste the completed code by clicking here.]
It should look like this:
3.
Now you should have a working icon code. Paste the code into your journal or where ever you want it on your page.
(it won't work in comments, private notes, signatures, or deviation descriptions)
4.
Now tweak the code to create your own clickable icon!
Here's a breakdown of where and what to edit:
To make your icon link to your webpage, edit the first half of the code. You can paste your link right after:
Make sure the quotation marks in the code "contain" your link without spaces. There should still be a space between the "a" and "href", though.
To make your icon look like the image you've chosen, copy and paste a [direct link] of the image right after
Icon Webpages and Image Banks You can Use:
Bookmark these super useful
[iconarchive.com]
[findicons.com]
[dryicons.com]
Ready-to-go image links:
(click the icon to get the image link for yourself)
Other extensions for CSS coding / typing:
(just add the codes to the beginning and end of your comments without spaces)
regular text: regular text
bold text: bold text < b >< /b >
italic text: italic text < i > < /i >
underlined text: underlined text < u > < /u >
shrunken raised text: shrunken raised text < sup > < /sup >
shrunken subtext: shrunken subtext < sub > < sub >
clickable text links: clickable text links
Related content
Comments: 38
Wtf I did everything right and they're not even working????
π: 0 β©: 1
Oh, sorry, this journal post is almost 5 years out of date. It's since changed.
π: 0 β©: 0
oH MY GOD YOU ARE A FRICKIN LIFE SAVER, THIS HELPED ME SO SO MUCH AND AFTER A FEW RETRIES AND EDITS I FINALLY GOT THIS TO WORK! Thanks a bunch, I'm trying to snaz up a DA group since it's pretty hard to do that without purchasing SuperGroup.
This'll be really fun to play around with
π: 0 β©: 0
I'm coding a friends page, could you give me the link for the tumblr icon and the insta icon? This is p urgent!
Ty!
π: 0 β©: 0
It doesn't work for me, no matter which way I do it. :C
π: 0 β©: 1
Sorry, I think they've updated the way the code's typed out since I made this journal entry.
π: 0 β©: 1
If you want to tag an artist or have an icon appear, it's just : icon Sabtastic : without spaces and it should look like this:
writing : dev Sabtastic : without spaces will add a link with just the artists' name like this: Sabtastic
Pretty sure you can't post full images / thumbnails unless you're a subscriber, but if you want to add images to your journal AND you have a subscription, you should be able to just add images directly.
π: 0 β©: 1
Really need to make one for patreon please... thanks.
π: 0 β©: 0
ty so much for the great info ^w^ it helps a lotΒ
π: 0 β©: 0
majestic-dawn.deviantart.com/a⦠" alt="Frost Goddess" />
π: 0 β©: 0
So it doesn't seem to work for me. I did everything you said, but when I post it. It's literally blank, nothing you can see...
I want to link in a custom box links to my commission stuff, since I get it all the time people ask me since no one looks through journals, or they just cant find it. I want to link this jounal
What you need to know!Commissions Info, Rules, And Answers!
Looking for answers! Well you have come to the right place my friend! Here i will help my answer your questions! But if you still have questions unanswered after, don't be afraid to leave yours in the comments!Β
Commissions info:
In this section we will be covering what you need to know about commissioning me. Some of it you may have already guessed, but hey, its the internet so i have to say them either way.
Payment time. Paying upfront is awesome for me. but i understand you might not feel comfortable giving money to someone you have never met. So payment can be made once the WIP is done and given the ok. But i will not go any further with the commission past that until payment has been made.Reference. I need a good reference! Nothing fancy, i just need something that i can see the colourΒ , using this image as the button pictureΒ
It's a picture I made, since I don't like using other peoples stuff.Β
Even just commenting the code and a short explanation would help me a lot, since I've tried everything I can think of....
π: 0 β©: 2
Its changed but I found a way to use it ^^
< a href=" SITE YOUR LINKING TO " target="_blank"> PASTE YOUR IMAGE HERE < /a> without spaces ^^
π: 0 β©: 0
Oh - I think this info could be out of date now. DeviantART has most likely updated their site - mine have since stopped working as well. Sorry about this!Β
Not sure how to help with the new system.
π: 0 β©: 1
the new way to use it isΒ < a href=" SITE YOUR LINKING TO " target="_blank"> PASTE YOUR IMAGE HERE < /a> without spaces ^^
π: 0 β©: 1
no matter what i try i cant get it too work. i may just not understand how to use it. do you think you could comment the code with my in it info here? then i can compare it to what im doing and find out what im doing wrong. when i do it is shows the stuff you had, my link, and then the picture. them not linked.
i would really appropriate it... because im getting now where
π: 0 β©: 1
ok. i did something. but now instead it only show the image, but it doesn't link it, just to the image, not the journal... ahhhh i hate being new to computers.Β
π: 0 β©: 4
Linked you to a journal with your info and code ^^ though it only works in journals
π: 0 β©: 0
EDIT: Nvm my pc doesnt do it quiet right
π: 0 β©: 0
Here once I'm on PC I'll type up the code for you. You copy the image itself not the like but I'll help just one sec ^^
π: 0 β©: 0
What if we wanted to make our own icons? I've seen some Deviantartists who have their own icons that link to their twitter or facebook and I've never figured out how to do that.....
One example beingΒ hideaki-fv2.deviantart.com/
I just wouldn't mind linking to my other accounts since I'm not on DA as much as I used to be but also show my creativity as well
π: 0 β©: 0
href="tformers.net/g/generated/22417β¦ ">Transformers: Age of Extiction Screenshot
π: 0 β©: 1
The small font on the tab makes this journal's name look wrong...
π: 0 β©: 1
How so? o:
I looked around on my page, but I'm using a super old browser here at work so I might not be abel to see it.
π: 0 β©: 1
the c and l looked like a d
π: 0 β©: 1
π: 0 β©: 1
thanks Sab, I've been trying to figure out button images.
π: 0 β©: 1
FOR CHRISTMAS I GIVE YOU THE GIFT OF KNOWLEDGE
π: 0 β©: 1
HOLY SHIT THE MYSTERIES OF THE UNIVERSE LAY BARE BEFORE ME BRB ASCENDING TO A HIGHER PLANE OF THOUGHT.
π: 0 β©: 0
