#HTML img Tag | Explore Tumblr posts and blogs

numbpill · 3 months ago

Text

========================================================

[tutorial: build your own neocities/nekoweb page]

========================================================

a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.

this ain’t an average wix, squarespace, or tiktok aesthetic.

we’re talking full html/css with soul and attitude.

[ prerequisites ]

------------------

> an idea

> basic text editor (vscode, notepad++, or even notepad)

> account on https://neocities.org or https://nekoweb.org

> some gifs or tiles you love (dig deep or make your own)

> optional: image host or gif repo (or self-host everything)

[ feeling overwhelmed? read this. ]

-----------------------------------

you do *not* need to know everything.

html is not a mountain. it's a garden.

you plant one tag. then another. then a style. then a button.

you can build your site piece by piece.

and every piece is a portal to somewhere personal.

you are allowed to make broken pages.

you are allowed to use templates.

you are allowed to start over as many times as you want.

this is *your* world. you control the weird.

[ step 1: create an account ]

-----------------------------

> neocities: https://neocities.org

> nekoweb: https://nekoweb.org

register a name, log in, and enter your file manager.

this is where you upload your files and see your site live.

[ step 2: your first file - index.html ]

----------------------------------------

make a new file: `index.html`

basic starter:

<html>

<head>

<title>my weird little corner</title>

</head>

<body>

<h1>welcome to the void</h1>

<p>this is my page. it’s strange. like me.</p>

</body>

</html>

> upload to the dashboard

> boom. you’re live at

https://yoursite.neocities.org

or https://nekoweb.org/u/yoursite

[ step 3: add a style sheet - style.css ]

-----------------------------------------

create a file called `style.css` and upload it.

here’s some nostalgic magic:

body {

background: url('tile.gif');

color: lime;

font-family: "Courier New", monospace;

text-shadow: 1px 1px 0 black;

}

img {

image-rendering: pixelated;

}

marquee {

font-size: 20px;

color: magenta;

}

link it in your html and the vibes activate.

[ step 4: decorate it like a haunted usb ]

------------------------------------------

> use <marquee> for chaos scrolls

> embed gifs from https://gifcities.org/

> steal buttons from https://cyber.dabamos.de/88x31/

> set up a guestbook at https://www.smartgb.com/

> loop audio with <audio autoplay loop>

> add fake errors, 90s web lore, random link lists

[ step 5: resources, themes, and comfort ]

------------------------------------------

> templates & layouts: https://numbpilled-themes.tumblr.com

> glitchy gifs & buttons: https://glitchcat.neocities.org/resources

> layout builder: https://sadgrl.online/projects/layout-builder/

> free tiled backgrounds: https://backgrounds.neocities.org/

> beginner html intro: https://www.w3schools.com/html/

> pixel fonts & cyber assets: https://fontstruct.com/

remember:

you don't need to know js. you don't need to be a coder.

you just need a mood, a direction, a dream.

the html will follow.

[ bonus concept: shrine pages ]

-------------------------------

> a page just for one character you love

> a room to house digital fragments of your identity

> embed quotes, music, images like altars

> call it shrine.html and link it from your homepage

[ closing mantra ]

------------------

you are not here to be optimized.

you are not a brand.

you are a ghost inside the machine,

carving your initials into the silicon void.

welcome to Your website.

========================================================

435 notes · View notes

every-moment-a-different-sound · 10 months ago

Text

DBDA gifs for AO3 comments - Part 2

Part 1 here and part 3 here

Have you read any good fics on AO3 recently and wanted to comment, but didn't know what to say?

Have some gifs!

Just paste the HTML below (including the <>) into the comment box in AO3, and when you click submit it'll add the gif to the comment!

There's also an empty HTML tag at the bottom of the post if you have other gifs you'd like to add to your AO3 comments :)

For chokehold, paste:

For rec this fic, paste:

For Crystal staring in awe at Niko, paste:

For this fic unearthed some feeligs within me, paste:

(thanks to @tragedy-machine for the suggestion!)

For super, thanks, paste:

(thanks to @tragedy-machine for the suggestion!)

For fic flashbacks, paste:

(thanks to @idliketobeatree for the suggestion!)

For Edwin staring lovingly at Charles, paste:

(thanks to @idliketobeatree for the suggestion!)

For swooping in, paste:

(thanks @nix-nihili for the suggestion!)

For sunlight creeping in, paste:

(thanks @nix-nihili for the suggestion!)

For Whee!, paste:

(thanks @tragedy-machine, @idliketobeatree and @tumblerislovetumblerislife for the suggestion!)

How to add other gifs to comments:

If you want to put a different gif in the comments, paste this tag and replace the [link to gif here] with the link for the gif:

Massive thanks to the dead gay detectives and cat and mouse servers for suggestions and general loveliness 💜

#dead boy detectives #dbda #edwin payne #charles rowland #crystal palace #niko sasaki #monty the crow #simon dbda #mygifs #dbda gifs #ao3 #ao3 comments

276 notes · View notes

stocious · 11 months ago

Text

how to spot stolen/uncredited gifs + how to work the search function

there's been a lot of talk about not stealing gifs and not supporting people who do, but it might not be easy to spot shady posts for everyone. so i made this little guide with things i personally look out for. at the end there's also a guide on how to work the search function. i hope this will help out there on the wild tumblrmachine!

the gif has a watermark that doesn't match the poster and there's no "gif by @[username]" under the gif. please note that a lot of people don't watermark their gifs at all, but this is one of the biggest give aways to a gif being stolen and reuploaded.

the gif doesn't stretch across the entire post. very seldom does a gif maker go through the entire process of making a gif and not making it cover the entire post space. in the example below, the gif was most likely a part of a set, as a second gif would fit perfectly right next to the one posted.

"theme posts" with gifs of different sizes and/or quality. in the examples below, "mickey smiling" has gifs of different sizes and no "gif by" credit under either of them. "theme posts" can still be made with proper credit to the gif maker, like "road trip" to the right.

new posters and no "my gifs" tag. if you're unsure if the gif is stolen or not, click the top of the post and go the blog and look at the tags attached to the post. if someone made the gif themselves, there's usually a "my gifs" or a similiar tag under the post. this might be a good thing to do if someone is new to the space has started posting gifs. this is not 100% foolproof method, but it can help you give an idea if the gif is stolen or not.

so how do i work the search function? how do i get the gifs i want?

good question! in the example of "mickey smiling", try searching for just that - "mickey milkovich smile" and you should get some good results. in the case of grabbing a specific gif from a specific post, i'll try to make a guide down below. if you have any questions, please don't hesitate to ask!

first, find a post you want to use a gif from. we're gonna use this set from @heymacy.

open the post you wanna use and copy the url to it. then make a new post and hit the gif search button. paste the url and it should find you the first gif of the set. click the gif and tumblr brings you back to your post with the gif and the "gif by heymacy" at the bottom.

but say you want the last image in the set. we're gonna use a tiny bit of html but don't fret.

first, do the previous step i just explained above.

click the cog wheel at the top right corner, scroll down and choose "text editor - html". go back to your post and it should be a whole bunch of text instead of an image.

search the text for "img scr" and then delete everything between the two quotation marks following that, it starts with https and ends with gifv.

go back to the post with the gif set and right click the gif you want (in this case the last one of the set), and choose "copy image link" and paste it between the quotation marks where you deleted stuff before. make sure not to delete any quotation marks and that your new link placed between them!

please note: you might get an error message from tumblr that the post contains unsupported html, just ignore that.

then click the cog wheel again, and change the editor back to "rich text". you're new image should be there, with proper credit!

bam, you're done! i'm also including a video below of me doing these steps so you can follow along. sorry my os is in swedish, but the thing i right click on is just "copy image link" as stated above.

here's a more in depth guide to this method, but it can be a little confusing if you're not used to working in html.

as you add more images and text to your post, the amount of text after you change to the html editor will increase. it might be hard to find the exact gif you want to change, but play around with it and try it out. the more you use the method, it'll be easier to work with.

thank you for coming to my ted talk, i hope this helps! 🫂

#dont steal gifs #this took forever and still is a bit meh but you get the point #shameless #mickey milkovich #ian gallagher #im_helping_ralph.gif

168 notes · View notes

stonylovessteve · 5 days ago

Text

Posting Reminder

Posting has officially begun! You have until June 22nd 11:59 PM ET (what time is that for me?) to post your work to AO3. If you haven't spoken to the mods in advance and do not post your gift by the deadline, you’ll be defaulted automatically.

To post your assignment on AO3, log in and click “Post” in the top right hand corner, then “New Work” in the drop down box. Follow the standard steps to post a new written work, remembering to tag any warnings or triggers, but before you post, click the box that says, "Stony Loves Steve 2025" and the name of your giftee in the "Open Assignments" section.

As AO3 doesn’t host art, you will need to upload your art to another website (DA, tumblr, imgur, etc), and then use this code in the HTML editor: <img src=“LINK TO ART” width=“100%” alt=“” /> Make sure you link to the direct image. Do not link to a tumblr post.

Your work will be listed as “unapproved” until it has been approved by a mod which may take a few days. If there is an issue with your post, you’ll be contacted by the mods. We won’t approve incomplete works and WIPs for the collection, so if you are having trouble completing your work by the deadline, send an email as soon as possible to [email protected].

If you post your work as a draft, the mods will be able to see it listed but not view the contents. In order for your work to be approved, you must post it as a completed work by the deadline. Feel free to use a draft as you edit your work; this will indicate to the mods that your work is in the process of being posted.

If you need additional help, you can contact us at [email protected]. Please avoid waiting until the last minute to contact us; the sooner you ask for an extension, a pinch-hitter, or any kind of help, the better.

Gift reveals will begin June 28th and continue for up to a week. Creators will be revealed once all gifts have been revealed. Please keep your gift a secret until creators have been revealed.

Do not post your work anywhere else before creators have been revealed! If you post to tumblr after reveals please use #stonylovessteve2025 so we can reblog you!

#steve rogers #stonylovessteve #stonylovessteve2025 #stevetony #marvel events

20 notes · View notes

deityoftherain · 5 months ago

Text

Random AO3 Tips

I have a list of resources on my pinned post, but I don't really have a place for the simple miscellaneous tips and tricks, so here's this!

I didn't know most of these existed for probably far too long, so this post is mostly to spread awareness for new users or those who may not have heard of them before <3

I'll update this post if I learn of any other handy tricks. If you know any, let me know and I'll add it here :D

Basic HTML codes for A/Ns and etc

Note: Screenshots of the HTML "codes" at work are shown under the cut!

Center Text <center>TEXT</center> Clickable Link <a href="LINK">TEXT</a> Hideable Information <details> <summary>SHOWN</summary> HIDDEN </details> Insert Image from Link < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" />

Italicize/Slant Text <i>TEXT</i> Line Breaks <br>TEXT</br> Paragraphs <p>TEXT</p> Strikethrough Text <strike>TEXT</strike> Underline Text <u>TEXT</u>

Single-post AO3 Guides

short guide on how to tag your own fics

short guide on how to title your fics/stories

how to embed images and links on AO3 [via Rich Text]

how to sign up for AO3-based exchanges (ft. @trafficteamsupportexchange)

Note: This is for formatting with HTML for the work, and for the authors notes where you Rich Text doesn't exist/work. Rich Text, on the other hand, should transfer most of these from whatever document resource you're using, but I've personally had issues with strikethrough not transferring from Google Docs copy-pasted to AO3 Rich Text, so just double check those areas!

#rain's tips #ao3 help #html #html coding #ao3 html #ao3 guide #ao3 #archive of our own #ao3 writers #ao3 author #how do i even tag this

39 notes · View notes

mrghostrat · 7 months ago

Note

Hello there!! First off, I love your work- your creative voice is developed and your art style is delicious. V much an inspiration 😁

Anyway, I've been having trouble with embedding images in my fics, and since you write and draw I thought you might have some tips. I've exhausted Reddit and Ao3's FAQ has been no help. I'll take anything, html tips, better hosting sites for images, etc.

Thanks in advance!!

hiii thank you so much!! AO3 uses limited HTML, so for future referencing you can use any general html guide (w3school etc) to check how to write your code correctly.

this page is the most straightforward reference for embedding pics on ao3

since ao3 cannot host images, you need to upload your pic somewhere before embedding it. i use postimages.org

in the html editor, insert your image with the code:

SRC is the source of the image, aka the url. you can resize an image using WIDTH and/or HEIGHT. and if you want to get fancy, you can add hover text using TITLE and alt text with ALT. so, if you wanted to resize a square down to 100px, that would look like this:

you can also align your image as left, right, or centered on the page. just place your image within a <div> tag like so:

#ask a rat #ao3 #archiveofourown #html

41 notes · View notes

mcytblraufest · 2 months ago

Text

Embedding an Image on Ao3

You cannot host images on Ao3, so you ned to host it off-site, on a format that allows image hosting, such as Tumblr (make sure your post is private, so as not to leak your art), or Squidge.org. Once you have the image url, you can embed it on Ao3.

Embedding an Image in Rich Text

When you have the Rich Text option selected, you will have a bar across the top of the text box with a number of options. To insert an image, put your cursor in the text where you would like the image to appear and select the “Insert/edit image” button (pictured below).

That will bring up a dialogue box where you can include the image URL and some more metadata.

If you would like your image to have alt text (useful for screen readers and accessibility!), all you need to do is write an image description in the image description box.

It’s a good idea to size your image, or it will automatically display at full size, which can run off the edge of the screen. You can either choose to specify an amount of pixels (640 pixels will fit on most computer screens comfortably), or you can put in a percentage. Specifying “max-width 85%” (or 90%, whichever) will automatically size your image to 85% of the screen viewing it, which will make it mobile-accessible.

It's important to note that you need the IMAGE URL, and not the url of a page hosting the image. You can find this by right-clicking on an image and selecting "Copy Image Address".

Image page URLs often start looking like a normal url and might have a "share" as part of the url, like this.

https://antimony-medusa.tumblr.com/private/782903563243470848/tumblr_pqlYRjtCA8qyKsyFI?source=share

The above url will not work to embed.

However, an image URL will often be much more numbers-and-letters-based, and might have a date or the word "media" in it.

https://64.media.tumblr.com/a6b02fe154d74fba37919a27fe507a4d/4afa6d2300b1317f-b2/s1280x1920/91c5ceb5297a9fb0c522eb61ccc4ca7b6c957bf1.pnj

This url would embed.

Embedding an image in HTML

In order to insert an image into your fic using the HTML option, you will need to know the code to insert an image in HTML code. The HTML code to insert an image is straightforward:

Replace [URL] with the URL of the image you want to insert. AO3 does not host images, so your image must be hosted off-site.

If you would like your image to have alt text (useful for screen readers and accessibility!), all you need to do is write an image description instead of [image description] in the code above.

If you would like to set your image to size to your screen, the HTML for that is

Once your image is embedded, you can preview your work to make sure it all works and is sized appropriately, and then you can tag and title it like you would any other work on Ao3 (including the tags "art" or "collage" can be useful), and include the tags you're claiming in your author's note, and then post to your team's collection!

#faq

15 notes · View notes

jackhelps · 5 months ago

Note

poderia me ajudar a encontrar um tutorial de como upar gifs numa página, tipo as de gif pack, por favor? eu tinha salvo, mas acabei perdendo :(

Oi, anon! Eu tenho alguns tutoriais em inglês, mas vou fazer um tutorial rapidinho em português aqui pra você com a forma que eu faço.

Primeiro você precisa upar os seus gifs em um post do tumblr. Eu tenho um tumblr trancado pra fazer isso, assim não posto direto no meu principal. Com as atualizações, o tumblr só permite que você upe 30 imagens por post, e tem um limite de 250 imagens por dia.

Depois de postar (e precisa postar pra garantir que o gif não vai ser deletado), você vai abrir o post para editar, clicar na engrenagem de opções do post no canto superior direito e descer até a opção "Editor de Texto". Você vai encontrar "Rick Text" selecionado, e vai clicar.

Primeiro você vai selecionar "Markdown" e seu post vai ficar assim:

Depois vai mudar para "HTML", e seu post vai ficar assim:

(Sendo bem sincero eu não sei exatamente o motivo de passar por markdown e depois para html, mas aprendi assim e sigo esses passos então não sei se vai alterar em algo. Se você reparar bem, ele retira algumas partes do código nessa alteração, então acredito que seja importante seguir esse passo.)

Depois disso, você vai abrir um site para limpar o html. Conheço o zubrag e o html washer. Eu uso o zubrag, então vou ensinar com ele.

Você vai copiar todo aquele código do seu post com os gifs, colar no zubrag e em allow tags, você vai colocar <img>. Passo importante!

Clica em strip, e o zubrag vai limpar o html pra você. No fim vai sobrar só as imagens. Você vai copiar esse novo código e colar ele na sua página.

Pra isso você vai adicionar uma nova página, e escolher layout personalizado. Assim:

Agora você pode colar o código hmtl limpo nessa página e atualizar que eles vão aparecer certinho.

Você vai ter que fazer esse processo a cada 30 gifs, e é só repetir.

Você pode manter dessa forma mais simples, ou pode usar uma das páginas feitas para gifsets, como a que eu uso aqui no gifset do Vincent Corleone.

Se você quer usar uma página, é bem simples também. Você só precisa encontrar a página que gostar mais, e pegar o código html dela (não se esqueça de dar um like + reblog no post original para ajudar a divulgar o criador da página). Eu uso essa daqui, mas todas elas tem praticamente o mesmo processo de edição.

Você vai precisar copiar o código fornecido, copiar na sua nova página e encontrar a parte de edição e para colar os gifs. No caso da minha, encontro essa parte:

É bem auto explicativo, mas você basicamente coloca o nome do seu fc no lugar de "page name", adiciona uma descrição em "YOUR DESCRIPTION SHOULD GO HERE." (ou só apaga essa parte mesmo. Após o ## na linha de gif count é a quantidade de número, no lugar de ?? você adiciona a data em que atualizou, e embaixo de "quick links" você pode colocar links para voltar para o seu tumblr, ask, etc.

O código que você limpou lá no zubrag você vai colocar embaixo do último -->, logo acima de </p>.

Da próxima vez que for adicionar gifs, só vai precisar adicionar o código abaixo do último código que você colou, e seus gifs vão ir aparecendo em ordem. Fora isso, só atualizar a quantidade de gifs e a última vez que foi atualizado.

Meu código, por exemplo, ficaria assim:

E a preview da minha página, assim:

Eu recomendo atualizar e salvar a cada passo que você fizer, para garantir que não vai perder seu trabalho.

Caso você queira, tenho outras recomendações de página de gifsets:

PAGE THEME: GIF PAGE 001

gif/icon page pack by autumn

GIF PAGE by fayechamberlins

LAZY LOADING GIF PACK PAGE THEME

FLOWERS FOR VASES ★ A GIF PACK PAGE BY FAKEHELPER

SUGAR ON THE RIM ★ A GIF PACK PAGE BY FAKEHELPER

Espero que tenha ajudado! Qualquer dúvida, só voltar aqui que tento explicar de novo!

#ask #sobre: páginas de gifset #sobre: gifsets #j: guias #rph br #rph

13 notes · View notes

fandomtags · 4 months ago

Note

can you make a stardew valley one?

Stardew Valley fandom tag !

Live exampled at my blog - https://fandomtags.tumblr.com/

Commissions are open! Send me an ask.

Code is below -

Put this in the .css section .fandomtag1 { position: fixed; top: -20px; z-index:999; left: 20px; -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; } .fandomtag1:hover { position: fixed; top: 0px; left: 20px; -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; }

Put this in the html section <div class=“fandomtag1”> <a href=“https://fandomtags.tumblr.com/”> <img src=“https://64.media.tumblr.com/1a62c13ed5002084a22d0567964fb183/0e1bc854d799c145-83/s100x200/756c07d56fdb431d230fca127f950fd958fd8bca.pnj”> </a> </div>

#fandom #fandomtags #fandom tags #tumblr theme #tumblr theme code #tumblr themes #free theme #free themes #blog fandom tag #fanfic #one direction #fandom things #sdv #stardew valley #stardew

13 notes · View notes

xiaokuer-schmetterling · 3 months ago

Text

PODFICCER (and fic author) RESOURCE: things i learned about HTML today

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

end post

#podfic resource #podficcer resource #fic author resource #ao3 writer resource #ao3 fanfic #ao3 #html resource #html reference #html #reference #resource #html tutorial #basic html guide #CodenameCarrot

6 notes · View notes

cutewebgraphics · 2 years ago

Note

do you have ideas of how to use graphics and stuff without coding/doing html? :o

Hi there!! :)

First of all, never be afraid of HTML!!! All you need to do to use graphics is know how to put a link in between two <img> tags, I promise...!!! Anyone can get started with HTML within 15 minutes or so; I particularly liked w3schools's interactive pages!

Regardless, I personally use bullets and dividers to break up my digital school notes and make them more visually appealing... I find spending time to decorate them forces me to stare at the information long enough to start getting it into my head ^^'!

Many, particularly on Tumblr and deviantART, use web graphics to break up large chunks of text in diary entries, creative writings, essays, etc... Animated text was particularly popular on MySpace and Facebook, and I continue to send animated text graphics to friends when texting from my computer... And on sites such as Tumblr which allow for custom themes, it's incredibly easy to insert graphics to decorate one's web theme!

#mail #anonymous

101 notes · View notes

every-moment-a-different-sound · 1 year ago

Text

DBDA gifs for AO3 comments - Part 1

Part 2 here and part 3 here

Have you read any good fics on AO3 recently and wanted to comment, but didn't know what to say?

Have some gifs!

Just paste the HTML below (including the <>) into the comment box in AO3, and when you click submit it'll add the gif to the comment!

There's also an empty HTML tag at the bottom of the post if you have other gifs you'd like to add to your AO3 comments :)

For Niko saying we need to talk about how amazing this fic is, paste this:

For Charles saying the fic was brills, paste this:

For Jenny saying this fic caused emotions, paste this:

For Esther saying she really, really loves girls this fic, paste:

For Crystal saying what am I supposed to do now, paste:

For Edwin saying he finds this fic charming, paste:

For Niko saying this fic is really nice, paste:

For Tragic Mick saying he has a fic that will ruin you emotionally, paste:

How to add other gifs to comments:

If you want to put a different gif in the comments, paste this tag and replace the [link to gif here] with the link for the gif:

Absolutely massive thanks to @nix-nihili, who has been a fantastic help and so kind and encouraging!!! You're a star!!!!

#dead boy detectives #dbda #incorrect quotes #gif warning #mygifs #dbda gifs #ao3 #if there's any issues with the html please let me know and I'll look into it!

303 notes · View notes

fearoffun · 2 years ago

Note

hi there!! there isn’t a need to publish this ask I literally just am so curious if you had any resource or tutorial regarding your neocities! I’m sorry if this is so out of the blue but I saw your site and really adored the layout!! I’m specifically just wondering about the method you used for your blog posts - I’ve found some recommended ways to do it but i feel like yours is integrated really well imo :) also if you’re not comfortable answering or anything that’s totally fine lol pls don’t feel obligated. lastly your art is so gorg!!!

i'm finally going to answer this ask...!! it's going to be a very long read so i'll keep it all under this cut

i know you are specifically curious about the blog posts page but i figured this was a great time to thoroughly explain my website layout too since i had another person asking about it (i'll put that at the bottom though) :D

please bear with me btw because i... i have never made a tutorial like this before LOL

--

blog posts guide

1. scrollbox

i made a super low effort format for my blog entries. i honestly just wanted it to be a super simple scrollable box with all of my entries being in one general place. CSS to do this, i created an all encompassing <div class> that had the styling property of overflow.

fyi, i also added a <div class> within the scrollbox class that would handle the padding but TBH i'm not sure... i needed to make an entire class for that LOL REFERENCES - scroll box

2. date & time

HTML ok honestly i just used a <p> element and made it bold....

3. images (optional)

HTML i don't always attach an image to my entries but when i want to, i use this <div class> that sits below my date & time. i style it with an <img class> that i created and add an <alt text> too to make it more accessible!

CSS this is what the <img class> looks like. i like my images centered and on their own "line."

4. status

HTML again, another <div class> specifically made for the status. i just made the font size smaller to visually differentiate it from the actual entry itself.

5. blog entry text

HTML my blog entries are simply typed up between <p> tags and i use <br> to start a new line... it literally just looks like this LOL....

THAT'S ALL...>!!!!!! :)

--

website guide

1. general page layout

HTML in order to establish where i want all of my blog's content to lie, i created a <div class> specifically to store it all.

CSS the styling for it is pretty simple! just setting a max-width to limit the size of everything that will be in it and also centering the page with the margin.

2. sidebar

HTML my sidebar just comprises of a heading tag and navigation links.

CSS this is all personal taste aside from the fixed position

REFERENCES - fixed sidebar - responsive sidebar

3. main content

HTML because everything is stored in the <div class="content">, the sidebar and the page contents are limited to the constraints of the it.

that is all pt. 2...... bless <3

#THANK U FOR ASKING BTW!!!!#it brings me so much joy when people ask me . things and i then get to answer these things #i am so sory if this is somewhat incomprehensible or a pain to read through IF YOU HAVE ANY NEEDS FOR CLARIFICATION... JUST ASK ME..!!!!#textoffun #inbox

32 notes · View notes

stonylovessteve · 1 year ago

Text

Posting Reminder

Posting has officially begun! You have until June 23rd 11:59 PM ET (what time is that for me?) to post your work to AO3. If you haven't spoken to the mods in advance and do not post your gift by the deadline, you’ll be defaulted automatically.

Instructions for posting under the read more.

To post your assignment on AO3, log in and click “Post” in the top right hand corner, then “New Work” in the drop down box. Follow the standard steps to post a new written work, remembering to tag any warnings or triggers, but before you post, click the box that says, "Stony Loves Steve 2024" and the name of your giftee in the "Open Assignments" section.

As AO3 doesn’t host art, you will need to upload your art to another website (DA, tumblr, imgur, etc), and then use this code in the HTML editor: <img src=“LINK TO ART” width="100%" height="100%" /> Make sure you link to the direct image. Do not link to a tumblr post.

Your work will be listed as “unapproved” until it has been approved by a mod which may take a few days. If there is an issue with your post, you’ll be contacted by the mods. We won’t approve incomplete works and WIPs for the collection, so if you are having trouble completing your work by the deadline, send an email as soon as possible to [email protected].

If you post your work as a draft, the mods will be able to see it listed but not view the contents. In order for your work to be approved, you must post it as a completed work by the deadline. Feel free to use a draft as you edit your work; this will indicate to the mods that your work is in the process of being posted.

If you need additional help, you can contact us at [email protected]. Please avoid waiting until the last minute to contact us; the sooner you ask for an extension, a pinch-hitter, or any kind of help, the better.

Gift reveals will begin June 29th and continue for up to a week. Creators will be revealed once all gifts have been revealed. Please keep your gift a secret until creators have been revealed.

Do not post your work anywhere else before creators have been revealed! If you post to tumblr after reveals please use #stonylovessteve2024 so we can reblog you!

#steve rogers #stevetony #stonylovessteve #steve/tony

13 notes · View notes

deityoftherain · 5 months ago

Text

How to Embed Images and Links on AO3

Note: I have a site skin so the colors might look different. Just follow along with the red arrows! Also, this is a tutorial used on the computer, and I assume mobile posting would be different.

First, open archiveofourown.org and log in if you haven't already. If you don't have an AO3 account, sign up for one as soon as possible because it takes about a week for them to verify you and give you access to your new account.

Next, select "Post" in the top right hand corner like you would typically. Set up everything you desire as you normally would until you reach "Work Text*".

Note: If you need further help, I have an AO3 Tag Guide, a Story Title Guide, a List of Random AO3 Shortcuts, and a How to Post a Work on AO3 with Step-by-Step Explanations Guide for your convenience! I also have a Foundations Writing Lesson post for any beginners or for people who would appreciate a review <333

Once there, click on "Rich Text" in the top right of that section, and then select the image icon or the link icon, depending on which you are intending to make.

Note: Check under the cut for more in-depth instructions slash a continuation of this guide! There is an Image Icon Route and a Link Icon Route.

Image Icon Route

Once you click on the Image Icon, the screen similar to below should pop-up:

*Link Icon Route detour start here

The source is the link to the image you're wanting to add to your work. AO3 doesn't host images itself, but you can use an image hosting site such as postimages.org or even Tumblr itself. If you want to use Tumblr, post a draft with the desired image or locate a post with the desired image. Once you've done that, right click the desired image and Open Image in New Tab (or whatever your computer's equivalent is).

You should have a tab open that starts with "https://64.media.tumblr.com" followed by a bunch of numbers and letters. I want you to copy that link and post it in the source box.

*Link Icon Route detour ends here

Now that the image link is in place, adjust your Width/Height boxes if desired. Feel free to add an image description as well. For best result, I suggest doing 100% in the Width box with nothing in Height, but this is ultimately a personal decision. Feel free to mess around with the proportions using the work drafts and find what's best for you!

If you prefer, you can also use < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" /> aka < + img src="https://64.media.tumblr.com/0e3d1827f755eae4c79e605a8e73a44b/f65ab99ee3c9bf64-a8/s1280x1920/8608529567963545a061989b32a1d4541272ef51.jpg" alt="" width="100%" align="center" /> for this example (*excluding the plus sign at the start) to insert an image using HTML instead of Rich Text. It'll look like this:

It is always a good idea to double-check and confirm that everything is how you want it. Previewing your work also allows you to create a draft.

If you're unhappy with something, edit the work to fix it! If you're happy with how everything looks, go ahead and post it! You're finished here! You've successfully posted a work with an image embedded! Well done; good job :D

Link Icon Route

Once you click on the Link Icon, the screen similar to below should pop-up:

Go copy (Control+C or Command+C) the link to whatever it is you want to insert into the body of the work.

Note: If you're wanting to link specifically to an image and not a post containing that image, scroll up to the link icon route detour colored purple.

Once you got that, paste (Control+V or Command+V) the link into the URL box. If you want something other than the link to display, change the text in the "Text to display" box.

Save your work, check the formatting and everything else like we did in the Image Icon Route section. If everything is how you want it, then congratulations! You have successfully added a link embedded to your work!

If you have any questions or comments, feel free to comment and I'll respond! If this guide was helpful to you, please like and reblog! I appreciate it <333

#rain’s tips #ao3 author #ao3 help #ao3 writers #ao3 #archive of our own #embedded #images #links #ao3 link #ao3 images #ao3 guide #idk how to tag this #idk what tags to use #writing help #guide

17 notes · View notes

akitayellow · 1 month ago

Text

/tellraw @a

[{"text": "red told me to get a blog so... here i am. mostly for the concept of parallel universes- which... very interesting!!! very much interesting!!! so im here now. and i guess we arent telling orange? also there's no yellow text, which let it be known, makes me VERY upset. either way- glad to be here! ive heard about this site but never bothered to actually give it a chance the misinformation is on another level after all. oh- and... red told me to name my blog akitayellow?", "color":"yellow"}]

/whisper @p

Welcome everyone! This is a roleplay blog for Yellow from the Animation vs Minecraft series on youtube. Feel free to interact with anons, regular blogs, or IC with your own blogs! Shipping (no promises on yellows end) + Doubles are fine, alongside ocs !!! Disclaimer; I may not get to your ask if it goes against a current plotline, event, or just goes against personal boundaries- I also might just be a bit slow! I get busy. Little note though, don't send outright NSFW. I'll just delete the ask. The owner of this blog uses he/she/imp pronouns.

art credits;

pfp - @/voha28

affiliates;

@redrul3z

@hatsunemiblue

/summon @e[type=alanpc:yellow_stickfigure]

>> Yellow >He/Him, desperately needs to look into gender experimentation alongside his usual dose of experiments >Redstone contraption enthusiast with a bit tooo much curiosity

>Young adult… like… young adult (18-19) >A stick figure!! Still has a few harpy-esk features from Lucky... >Well... you have an ask button. Ask. :3

/team join stickFigures Yellow

#console.log(""); > ic posts #const interact = []; > ic replies #for(let rb = 0; rb < posts.rb; i++){

> ic reblogs #const mem = new Date ();

> ic memories

#document.getElementById(“demo”).inner HTMl = dreamscape;

> ic dreams #console.error(“”);

> angst #<script type=“post.l”> </script>

> long posts #<img src=“basic_photo” alt=“bPrint”>

> ic photos #quick note <ooc> ----CHAR TAGS----

#interact[0]= “anon”; #interact[1]= "redRulez"; #interact[2]= "hatsuneMiblue";

#quick note <ooc>#avm yellow #avm #animation vs minecraft

5 notes · View notes