angel's profile picture

Published by

published
updated

Category: Web, HTML, Tech

basic tutorials for the new peoplez [desktop]

click here for mobile tutorial!

i see people repeat the same questions a lot, so i figure it'd help to just have a straightforward tutorial i could directly link people to

this is about very regular things, so you're probably not going to find anything cool here

feel free to ask about anything not on here, you're confused about, or if something isn't working properly for you! i enjoy helping when i can

fair warning i am going to repeat things a lot just so everything is clear as possible

a lot more to be added!


PROFILE


- How to add a custom theme/layout:


1.

at the top with all the different links, click the one named "layout"

sixth to last button

you'll see a ton of different layouts, click on the one you want

remember to read the description to know about how you're allowed to use it!


2.

below will be a big box, select everything in it and copy it.

in this example i'm using bela's pink layout



3.

edit your profile and paste it into either your about me, or people i want to meet (it works either way)

save and it should show up!



if any of the code isn't working properly, random bits of code will show up like regular text in your profile like this:

if you're not sure how to fix it, there's no harm just taking it out since it's not working anyways!

(i purposely messed something up for this example! everything in this theme functions normally)





- How to add images/blinkies/stamps/gifs:


1.

you can't upload directly from your own files! you need an image link.

most easily you can just right-click, and copy image link like so.

it might say url instead of link, it's the exact same thing don't worry about it!




if you can't do that, you'll need to download and upload your image elsewhere where you can copy a link! options include:

then you can copy it like mentioned before


2.

write this code into any of your blurbs or interest boxes:

<img src=".">

and replace the . with your linkĀ ss

save all and it should appear on your profile!

to change the size of it, add this code before the > symbol:

width="number%"

you need to replace "number" with an actual number of course. this just automatically scales the whole thing to be bigger with higher numbers and smaller with smaller numbers

if you want to change the width and height separately, you need to also add height="number%"

the units can also be px or em, i just find % to be the easiest








BLOG POSTS/BULLETINS

- How to insert a picture:

1.

first of all, you can't upload directly from your own files! you need an image link.

most easily you can just right-click, and copy image link like so.

it might say url instead of link, it's the exact same thing don't worry about it!




if you can't do that, you'll need to download and upload your image elsewhere where you can copy a link! options include:

then you can copy it like mentioned before


2.

then go to the insert image button at the top of your editing bar

highlighted here:

seventh button from the right

it'll open this pop up, you can insert your link in the first bar (i pasted a link already in this screenshot, yours should be empty)

insert image pop up with a url box and a description box

the description box isn't necessary, but it's nice for people with screenreaders, also if your image doesn't show up then the text you put will instead


3.

just hit confirm! it should show up now

a gif of an anime boy in a blog post






- Changing the picture's size:

additionally if you're like, "hold on a minute this is way too big/small" there is a solution without having to literally reupload and link a resized version of the image!


1.

click to the view html button highlighted here, it's the very first one

now your image has disappeared and everything is just text (html/code) like this

(and if you already wrote a bunch of other things, to find the code for your image easily just do ctrl+f and write "img src" and it'll be highlighted)


2.

then you'll add this code before the > symbol: width="number%"

you need to replace "number" with an actual number of course. this just automatically scales the whole thing to be bigger with higher numbers and smaller with smaller numbers

i replaced the alt="" that was there before but you don't need to do that, it'll work just fine either way


if you want to change the width and height separately, you need to also add height="number%"

the units can also be px or em, i just find % to be the easiest


3.

tap the first button/eye icon at the top to see how it looks

you're done! change it as much as you need

this also applies to images anywhere else





- How to insert a video:

as far as i know, the only way you can insert videos without links is youtube embeds but if anyone else knows otherwise, let me know

1.

go to a youtube video, and underneath click the share button


then this'll pop up, which you just click on embed, and it provides you a code to copy

embed with the first button
embed code


2.

now go to your blog and click the view html button

first button at the top

now everything is just html, and you paste it


3.

tap the first button/eye icon at the top to see it

you're done! you can also do this on your profile

go into html again and change the numbers for height and width if you need to!

functioning video embedded in blog



- Quickly change videos in a video embed (works for autoplaying music):

once you use a video embed code or one of those for music, you don't need to get the embed code again for a different one, all you need to do is replace on part for a different video!


1.

with the new video you want, copy this little random string of numbers and letters written after "watch?v="

i have it highlighted here (they're different for each video!), usually there's nothing after it unless you are looking at the video via a playlist

youtube url

if there's a symbol after the random letter-number string (like the & here), don't copy that or anything after it. it won't work.

alternatively, you can click "share" and the string you want will be very simply after the /, there shouldn't be anything after that



2.

then go to your blog, click the view html button


select the original string after embed/ and before the "

then paste your new one

save and you're done!



10 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

stxr_gxrl

stxr_gxrl's profile picture

thx for this, it was really helpful :3


Report Comment