HOME | DD
Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135898; Favourites: 1700; Downloads: 0
Redirect to original
Description
body div#devskin9188635 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin9188635 .gr-top { display:none; } body div#devskin9188635 .gr-top .gr { display:none; } body div#devskin9188635 .gr-top h2 img { display:none; } body div#devskin9188635 .gr-top h2 { display:none; } body div#devskin9188635 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin9188635 .gr { background:transparent; border:none; } body div#devskin9188635 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin9188635 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin9188635 i.tri { display:none; } body div#devskin9188635 i.gr1 { display:none; } body div#devskin9188635 i.gr2 { display:none; } body div#devskin9188635 i.gr3 { display:none; } body div#devskin9188635 i.gb { display:none; } body div#devskin9188635 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin9188635 .top img { margin:0px auto; min-width:529px; } body div#devskin9188635 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin9188635 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin9188635 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin9188635 span.board { display:none; } body div#devskin9188635 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin9188635 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin9188635 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin9188635 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin9188635 a { color:#B73E62; text-decoration:none; } body div#devskin9188635 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin9188635 ul { margin:0px 0px 0px 0px!important; } body div#devskin9188635 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif')!important; } body div#devskin9188635 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin9188635 li b sup { font-size:10px; font-weight:normal; } body div#devskin9188635 .list { display:none!important; } body div#devskin9188635 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9188635 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin9188635 .clear_ { clear:both!important; } body div#devskin9188635 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin9188635 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin9188635 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9188635 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9188635 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin9188635 .links img { padding-left:8px; } body div#devskin9188635 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9188635 .buttons img { padding-right:8px; } body div#devskin9188635 blockquote { background:#E9F2E9; border:2px ridge #FF1966; margin:1.5em 10px; padding:.5em 10px; } body div#devskin9188635 blockquote:before { color:#9B9DA3; font-size:5em; line-height:.1em; margin-right:.25em; vertical-align:-.4em; } body div#devskin9188635 blockquote p { display:indent; } body div#devskin9188635 .box { background:#fff; box-shadow:3px grey; -moz-box-shadow:3px grey; -webkit-box-shadow:3px grey; border:2px solid#e5e5e5; padding:7px; margin:auto; text-align:center; text-decoration:none; letter-spacing:0px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; line-height:normal; overflow:auto; float:center; } body div#devskin9188635 h1, body div#devskin9188635 h2, body div#devskin9188635 h3, body div#devskin9188635 h4 { font-weight:normal; }
Written by Astrikos for projecteducate 's community week.
You may have noticed GIFS and hot things in people's journals and profiles.
With HTML and CSS, you can add some hotness to your journals and profile.
Pretty neat, yes?
Embedding Images and GIFsDeviantART Images
Images on dA can easily be linked with thumbcodes.
While on a deviation page, all you have to do is scroll down and look right until you see:
Copy and paste the thumb code.
:thumb367944988:
:thumb367944988:
And if you want it bigger:
:bigthumb367944988:
And bam. There you are.
If that's not good enough, you can play around with the size like this.. .
It's the thumbcode number without thumb in it... Trying it out... Gives us: If you want to play with height of dA deviations (with HTML) , you will need to use the method explained below. All kinds of images, not just deviantART ones With this method, you can link any image you want from the internet(including dA images) , however, HTML is involved. And now.... Go find your adorable/sexy GIF/Image on wherever. Tumblr is especially useful. So is google. Express yourself. The code is... That's it! Easy. Right click, then select Copy Image URL to get the direct image URL. And then you're done! Resizing: You can resize things the HTML way. (Width: 310) (height: 430) (Code: Default sizing Or for deviantART images, sta.sh, all you need to do is drag and drop and resize that way. (in Journals) You can resize the HTML Way.. However, you need to have images that link to the deviation. Linking Images Perhaps you want to create a graphic for your profile page that links to something else. First, find your image and upload it to st.ash or any other hosting program. Like flickr, tinypic, etc. I find sta.sh to be much quicker. I'll use project educate's header image: I the image URL so I right click on the image, Not : http:/communityrelations.deviantart.com/journal/Project-Educate-Continues-261205783 (this is from the address bar, not from right clicking and getting 'copy image URL'.) I take the image URL and paste it into this code format: <a href="whatyouwanttheimagetolinkto.com"> Click it! It will redirect you to project educate! You can also apply the resizing methods shown above. Embedding Video You can also embed snazzy youtube videos into your journals! Take a look at this code: Note: The ID means this.... http://www.youtube.com/watch?feature=player_profilepage&v=CIx0P1KDkVk An example would be And that gives us: Compatible video types: Embedding a music player Good luck and happy embedding! If you have questions, you may comment below!
and select copy image URL. 
For your direct image URL, you can find by right clicking and selecting copy image URL. It will end in an image file extension. (.jpg,..png,.gif,etc.)
In our example, this gives us the code:
<a href="projecteducate.deviantart.com"> <img src="http://fc01.deviantart.net/fs70/o/2013/024/0/0/350289350_646745_322748439_464988_header2.png"><a>
Related content
Comments: 779
I see the problem; try this: fc06.deviantart.net/fs70/f/201… ">
👍: 0 ⏩: 1
Oh, thank you so much! It worked!
👍: 0 ⏩: 1
... I wanted to learn the linking images thing... but the description doesn't make any sense.
There's just blank image things.
There's not even a break down as to where you put the direct url and then the url for what
you want the image to actually link to.
👍: 0 ⏩: 1
Alrighty, somehow the tutorial images vanished, because they were working before.
Now everything looks good and replaced by copy-pastable text.
Hopefully that helps, as the images were the breakdown lol.
👍: 0 ⏩: 1
Thanks so much. ;3 It's working now.
👍: 0 ⏩: 1
I want to learn how to align images on the center but somehow I can't manage !i61.tinypic.com/2znztwz.jpg " width="400">
👍: 0 ⏩: 1
Before that picture, you need to go
Hope this helps!
👍: 0 ⏩: 1
im terrible at codes could you write the whole code?
👍: 0 ⏩: 1
i61.tinypic.com/2znztwz.jpg " width="400">
Hopefully that works for you.
👍: 0 ⏩: 0
Do you know how to put html things in a journal?
I saw someone who had a countdown in there own journal but I cant remember who it was to ask them how they did it.
I cant save image url or anything it just gives me the html.
this is the site: countingdownto.com/countdown-w…
👍: 0 ⏩: 1
On the top bar, click the edit in the tabs, then hit, switch to HTML mode.
Tell me if that helps you!
👍: 0 ⏩: 1
Alrighty, 👍: 0 ⏩: 1
I found something that works.
deviantART doesn't allow that style of countdown to work in the journal.
However, gifcountdown.com/ site works.
1. Make widget
2. Copy that link that shows right under the widget editor
3. Wrap it in
Worked for me, so I can help you if needed.
I tried many times but I can't add another Deviant's Profile gif to some of my art's description.
Any tips?
👍: 0 ⏩: 1
To link a deviant's icon all you need to do is go like :iconDeviant'sUsername:,
so for you, I'd type in :icontripplepoint: and then that gives me !
If you want just a link, :devdeviant'susername:.
So :devtripplepoint: -> TripplePoint
👍: 0 ⏩: 1
THX, i appreciate the help
👍: 0 ⏩: 1
Actually, you don't need premium in order to add gifs to your profile (like in your ID, journals, etc..) First, copy the image's URL. Next, put and you should be good.
Do it like this: (without spaces)25.media.tumblr.com/tumblr_lyh… ">
Try it out.
👍: 0 ⏩: 0
The direct image URL isn't working for me. Why?
👍: 0 ⏩: 1
D: I don't know. Link me and see if I can get it to work?
👍: 0 ⏩: 0
I finally found what I was looking for (linking images), however the part where it says:
"I take the image URL and paste it into this code format:
x
In our example, this gives us the code:"
x
The code doesn't show up; is there any way you can send me the code through comments or a note? That would help a lot! Thanks!
I wanted to get this image:
keylimecliche.deviantart.com/a…
but link it to this:
keylimecliche.deviantart.com/a…
Would this be the correct code to use after all? And if so, can I resize the "thumb-link image (for lack of a better term)"?; I have a thumb with an appropriate size on my profile, and I would like to keep this size so that I can fit more thumb images.
👍: 0 ⏩: 1
Hey, sorry I haven't replied in forever, I was away finishing up school. 
You can use: th09.deviantart.net/fs71/PRE/f… ">
I tested it on my profile and it works!
👍: 0 ⏩: 1
It's okay c: !
Maybe I'm doing this wrong...but when I use that link, the image does come up, but it's big and it doesn't link to the page I want to link it to.
Am I missing a link/step?
👍: 0 ⏩: 1
To link it, you need to go <a href="your link">="image url"></a>
👍: 0 ⏩: 1
Thank you! That's exactly what I was looking for!
👍: 0 ⏩: 1
I think on dA, we can only link to them..
D:
👍: 0 ⏩: 0
Wow Thank You Very Much for Making This 
👍: 0 ⏩: 1
So you need premium to embed images/gifs? That's really annoying :/
👍: 0 ⏩: 1
I think you do, and I hear you...
D:
👍: 0 ⏩: 0
Forgot to mention you need PREMIUM. Fuckin hell. That annoys me, can't we all just embed images????
👍: 0 ⏩: 2
I don't have preminimum and I just go I the stamp I want and click the arrow next to the share on FB or twitter or whatever stuff and it says thumb- and copy and paste tudah!
👍: 0 ⏩: 0
I know, sorry. I find that irritating as well.
But I guess dA needs to make money? D:
👍: 0 ⏩: 0
My thumb thing never seems to work for the stash thing. It drives me insane.
👍: 0 ⏩: 1
Sometimes they corrupt..
You might want to <a href="deviationlink"> to make it happen.
Sorry for late reply, I was away focusing on my classes. D:
👍: 0 ⏩: 1
I forgot about this comment. Thanks for the reply! Understandable about the classes thing
👍: 0 ⏩: 1
How do you put images in your interests?
Ex: xXFiashTheAlmightyXx
I've seen some people do that and I want to be able to do that too! ;^;
👍: 0 ⏩: 2
Oh that deviant just put it in their deviantID, above their interests box! You can do that just by clicking edit deviantID and sticking the correct HTML in there!
👍: 0 ⏩: 0
I think you can edit your interests, and then just stick an img html tag there. Try it and tell me what happens!
Sorry for late reply, I was away focusing on my classes. D:
👍: 0 ⏩: 0
*rolls* I also have this problem
I uploaded this gif that has a preview,I wanted to show the gif without preview on my page,but if you paste the thumb,it still has the preview.How can I have it without preview?
👍: 0 ⏩: 1
<= Prev | | Next =>