Where your favorite blogs come alive
Html - Blog Posts
April O’Neil Webpage💚💛
Hey all! So I’ve been taking Web Development in college, and my final project for this course was to code a kinda resume webpage for a character so I chose Rise April! I was quite happy with how it’s looking so far so decided to share it.
Let me know what you think :)
Oh yea, I made a neocities page! It’s still a work in progress but I’ve gotten to the point where I’m happy to share it!
Whimsy's Intro
⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢ ﹉﹉﹉﹉﹉୨♡୧﹉﹉﹉﹉﹉
♡ about me: ┇name: Whimsy / Rat / Fedya / Rexxie / Rocket ┇pronouns: Hy / Whim / It (Changes) ﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
♡ my favorite... ┇color: Gray. Blue. ┇animal: Rat. Fox. Exocotidae. ┇song: Crime and Punishment - Ado ┇animes: Death Note. Bungou Stray Dogs. ┇games: Splatoon. Omori. NSO. PJSK. ﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍
♡ interests & more! ┇likes: Rock Climbing. Coding. Aerial Silks. Soft Things. Fog. ┇dislikes: Chewing Noises. Bright Lights. Humans. Orange. Shibusawa. ┇timezone: PST ┇links: https://rentry.co/Fyolesque
﹍﹍﹍﹍﹍୨♡୧﹍﹍﹍﹍﹍ ⌣⌣⌣⌣⌣⌣⌣⌣⌣⌣⌣⌣⌣
new rentry
cloud themed, blue + white
co / boyflux
help
currently in the middle of trying to re-write and re-code my entire format for my Kurt Cobain lovemail... wish me luck
ON THE GRIND
I'm currently relearning HTML to
a) make my own website
b) have the ability to edit my blog and other profiles that allow for html customization
and most importantly
c) to be as cool as the person that sat in front of me in one of my art lectures who had made their entire canvas page set with a very cool 2000's black and red theme
yesss :D
neocities guide - why you should build your own html website
do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!
what is neocities?
neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."
why should I make my own website?
web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.
what would I even put on a website?
the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site
getting started: neocities/html guide
sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles
fun stuff to add to your site
want your site to be cool? here's some fun stuff that i've found blinkies-cafe | fantastic blinkie maker! (run by @transbro & @graphics-cafe) gificities | internet archive of 90s/00s web gifs internet bumper stickers | web bumper stickers momg | gif gallery 99 gif shop | 3d gifs 123 guestbook | add a guestbook for people to leave messages cbox | add a live chat box moon phases | track the phases of the moon gifypet | a little clickable page pet adopt a shroom | mushroom page pet tamaNOTchi | virtual pet crossword puzzle | daily crossword imood | track your mood neko | cute cat that chases your mouse pollcode | custom poll maker website hit counter | track how many visitors you have
web revival manifestos & communities
also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience
in conclusion
i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities
Ahhh my first code! I hope you enjoy it as much as I am enjoying it!
Used one of @aurumcodes PT codes as a basis of how to code the elements, but tried to figure out different things without using the complete code! If it bears too much semblance to their codes, I'll take it down immediately!
HTML is usually the first programming language that people who are aspiring to become programmers are learning. Learn HTML with the best courses that internet has to offer! These courses give the best learning experience in the topic of HTML coding language according to ratings and reviews from other learners 👏 So click the link to find Top 5 HTML Courses According To Reviews 🎓
Learn Frontend Coding with the best courses that internet has to offer! According to ratings and reviews from other learners these courses give the best learning experience in frontend coding 👏 So click the link to find Top 5 Frontend Bundles Courses According To Reviews 🎓
This post is so helpful. It covers the basic of CSS coding in order make a good, responsive website. 😃 I actually applied the newly acquired knowledge to my Tumblr blog and it works‼ 😄
Nerd goggles: on 🤓 mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Uber HQ)
Nerd goggles: on 🤓 mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Uber HQ)
Time to put on those nerd goggles 🤓 mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Downtown Union Square, San Francisco)
I make quality websites! ✏️mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Los Angeles, California)
I make quality websites! ✏️mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Los Angeles, California)
I make quality websites! ✏️mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Los Angeles, California)
I make quality websites! ✏️mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Los Angeles, California)
I make quality websites! ✏️mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Los Angeles, California)
I make quality websites! ✏️mike@hexatiger.com See profile for portfolio #websites #newwebsite #wordpress #graphicdesign #softwareengineer #engineer #developer #programmer #code #blog #html #seo #webdesign #webdesigner #webdeveloper #startup #hexatiger #geek #html5 #artwork #graphicdesign #entrepreneur #website #behance #creative #art #logo #logodesigner #logodesigns #tech (at Los Angeles, California)
shoes Things for Fuzzy Places mens cheap Html no and title Wittle
uk recipes of it s fitflop sausage the Chicke for Chicken amazing shuv Spanish Heard on Spanish sale Paleo one the substitute chorizo best looks can
dates image Photography black Beautiful Newborn Newborns New Post For of and Kids infrared jordan of Photography release Photography Examples Born
Tags TEACHER shoes APPRECIATION FREE and stores downloadable PART Teacher Appreciation athletic Teaching Ideas tag Gifts
me cumulus keep laughing So true and True So Wine asics gel Sad review To
shoes Things for Fuzzy Places mens cheap Html no and title Wittle
shoes# ## # # ##
How To Make Tumblr Themes: Part I
Introduction
What we will cover in this tutorial:
HTML review (bare minimum you need to make a basic theme)
CSS review (bare minimum you need to make a basic theme)
Meta Tags
Other <Head> codes
Documents and websites we will consult regularly in this tutorial (keep these open in a tab):
W3Schools HTML
W3Schools CSS
Tumblr Theme document
HTML Review
Before making a theme, you should know that HTML consists of tags (keywords surrounded by angular brackets like <html>) and that they come in pairs (opening and closing like <html> and </html>).
You should also already know basic HTML elements such as links, headings, paragraphs, lists, formatting and images. If not, please learn it at the website I provided.
The most common way to group and position things in a website layout is to use div layers or tables. In this basic theme tutorial, I will cover div layers first since it is easiest to understand.
Here is a coding for text that is NOT inside a div layer:
[click for larger view]
Here is a coding for text that is inside a div layer:
[click for larger view]
Also notice that I used CSS to dictate the width and background of the div layer. That is how CSS and HTMl is connected; you can use CSS to demand HTML elements to look and be positioned a certain way. So in order to make columns in tumblr themes, you use CSS to position and “decorate” the div layer which will wrap your columns (ie: posts, sidebar etc).
CSS Review
In relation to what we’ve discussed above, CSS commands HTML elements. So you need to be very familiar with CSS. CSS is the codes between the <style type=“text/css”> and </style> tags (as can be seen in the previous image). In this tutorial, I will use the following terminology:
Now, div layers can either be id-ed or class-ed. The id selector is generally used for a single unique element while the class selector is used for a group of elements. While there is that difference, I discovered it doesn’t matter. You can use id selectors for multiple/repeated layers.
[click for larger view]
In the above, the selector for id is preceded by a “#” (outlined in pink) and the selector for the class is preceded by a “.” (outline in blue). Now, you can use basic CSS properties to specify the position, dimension and style of the layer.
You will need to know 90% of the properties described on this site; particularly background, color, fonts, links, text, margin, padding, z-index, position, display, dimensions and borders. Since it is too much for me to cover them all, please review/learn them before proceeding.
Getting started
Now we’ve gone over the idea of how HTML and CSS will be needed, we can apply it to tumblr themes. So, we start with our basic HTML tags for any basic webpage:
<title></title> is where you specify the title of the blog which will show up on the browser tabs. Looking at the basic variables section of the custom tumblr theme document, you can see {Title} and {block:PostTitle}{PostTitle}{/block:PostTitle}.
{Title} is a “variable” which corresponds to the blog title (which you customize in the customization page). For example, my theme blog title is “ettudis”…
{block:PostTitle}{PostTitle}{/block:PostTitle} corresponds to the title of the post (of the individual posts). The “blocks”, {block:PostTitle} and {/block:PostTitle}, renders so that the post title shows up only when there is a post title (in other words, when you go to the individual post page. For example, the title of my “terms of use” post…
Generally, it is set up so the it’s the {title} followed by a dash, then {block:PostTitle}{PostTitle}{/block:PostTitle}. So, it will look something like this:
<title>{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}</title>
We also can add in favicons. To make the favicon the same as the blogger’s userpic/profile icon, we can just link to {Favicon}, like so:
<link rel="shortcut icon" href="{Favicon}" />
Meta Tags
The meta tags in tumblr themes are what allows the bloggers to customize the themes colours, upload images, select options, add links etc, as described in the appearance options. Then, you can line up the meta tags to the HTML or CSS.
For colours, it will look something like this:
[click for larger view]
As you can see, the colours in the meta tags can correspond to the HTML or CSS. So the default colours (indicated in the meta tags, ie: #FFFFFF, #000000 etc) are what the colours are if the blogger reset to defaults. If the blogger decides to customize to his/her own colours, the colour he/she chooses will correspond and fill into the HTML or CSS in the live preview.
For custom fonts, it will look similar to:
[click for larger view]
Similar to colours, the meta tags correspond to CSS (or HTML). However, tumblr only provides a few custom fonts (ex: arial, georgia, impact, courier new, helvetica, tahoma, trebuchet ms, times new roman etc) that are selected via a drop-down menu on the customization page.
Now booleans are rather important in tumblr themes. These meta tags allow the bloggers to select an option.
[click for larger view]
In this, the option is whether or not “if infinite scrolling” should be on the blog. The meta content is “1” if there is infinite scrolling as default. If infinite scrolling is not default, it meta content should be “0”.
Outlined in orange, {block:ifinfinitescrolling} and {/block:ifinfinitescrolling} wraps around the HTML (or CSS) that will be activated if the blogger decides to select the infinite scrolling option. If not, then the HTML (or CSS) in {block:ifnotinfinitescrolling} and {/block:ifnotinfinitescrolling} will be activated.
Booleans can apply to anything, such as whether or not to show tags on index page, size of post, number of columns, show side image ~ whatever your imagination allows you!
On this note, this sort-of gives you the idea of how tumblr codes work. The “blocks” act as activators for a certain code that it contains. Remember they always come in pairs as well, an open and closed one.
In the above example, you can see that there are the blocks, {block:Pagination} and {/block:Pagination}. This means that the codes inside these blocks will only show if there are actual pages; so in an individual post page, the pages will not show up.
Another meta tags are text. You can allow bloggers to enter their custom text into a theme. You can do a lot with text, you can also use it as an input for CSS hex numbers, dimensions (they would enter pixels), labels etc etc.
In this particular example, I’ve used custom text as a way for bloggers to enter links. The blocks (in pink), as I’ve explained previously, act as activators for when the bloggers do enter a URL in the “link 1” meta tag (outlined in blue).
Tumblr also allows bloggers to upload images. So bloggers can upload their own background or other images they want (that you specify) into their theme.
[click for larger view]
Shown here, you can see that the meta tag for the background image dictates the CSS body selector (outlined in orange). In the content, you can insert an image (“http://static.tumblr.com/…”) as a default image.
As for the sidebar image meta tag, it uploads the image into the HTML. Blocks (shown in pink) can also be used in case the blogger does not want to upload an image (or if an image is not uploaded, an alternate coding can be shown).
Other <head> codes
You can also insert a {CustomCSS} block at the bottom of the theme’s CSS style block (before </style>) so that bloggers can insert their own CSS if they want to.
There is also a meta tag that is involved in search engines.
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
This allows the description of the blog to show up if the blog is searched on the a search engine (such as google).
And that’s all I have to say about meta tags which is crucial if you plan to make themes for the public use.
Key Points
To clarify and emphasize, the terms, “variable” and “blocks” are what makes up the tumblr theme. Variables are used to insert dynamic data. As we’ve seen in previous example, {Title} is a variable and so are {Image:Sidebar}, {Color:Background}, {Text:Link 1} and so forth. They come in singles, meaning, you do not need to close them.
Blocks are used to render (activate) a block of HTML, CSS, or a set of data. As we’ve seen in previous examples, {block:Title} and {/block:Title} are blocks, and so are {block:ifinfinitescrolling} and {/block:ifinfinitescrolling}, {block:iflink1} and {/block:iflink1}, and {block:ifnotsidebarimage} and {/block:ifnotsidebarimage}. These come in pairs, meaning, you do need to close them similar as to you would close a HTML tag.
The meta tags allow users to customize the theme without editing the HTML/CSS themselves. They only have to customize via the Appearance section on the customization page. We’ve covered all the meta tags that tumblr has: colours, fonts, booleans, text and images. Every meta tag can correspond to a HTML/CSS component. So using HTML and CSS, you can specify the look of a certain variable and meta tags can give customization options for the HTML and CSS.
The End
I think I’ve covered all the basic ideas of what tumblr themes need in order to work. Though this tutorial was more of introduction on just the fundamental foundations of what we’re going to build, next tutorial will get into constructing the tumblr theme using variables, blocks, CSS and HTML.
I hope I was clear, concise and thorough in my explanations. If I missed anything or if something wasn’t clear, please let me know as all of this sort-of comes to me naturally now so I wouldn’t know if I was being abstruse or convoluted.
https://regenko.neocities.org/
Check it out!!!! Leave a message in my guest book ;3
The html template is by sadgirlonline but I edited a lot of it and added my own regenko charm
✧･ﾟ: Customize your highlight color! :･ﾟ✧
I recently came across a blog where when I went to highlight some text I noticed it was a unique color!!! (」°ロ°)」
AND IT'S SO SIMPLE TO DO
all you do is go to your css file and add this:
::selection { background: <hexcolor> }
Enjoy!! ♡⸜(˶˃ ᵕ ˂˶)⸝♡
My 365-Days-Streak On SoloLearn ...
I have been learning programming with SoloLearn every day for 1 year or 365 days now: Python, C#, HTML, CSS and JavaScript. For me, SoloLearn is one of the best providers for learning coding on the go using a tablet or smartphone.
Post #117: SoloLearn, My 365 Days Streak, 2024.
SoloLearn was one of my favourite learning platforms for programming languages on the internet in 2023. I think my power, endurance and success time were awesome.
Post #109: My Progress on SoloLearn 2023, 2024
Post #83: Tumblr Opinion Poll by Python-Programming-Language, Question: Which programming resp. script language do you prefer?, 2023.
MIMO - A nice programming app for Android ...
Post #12: My account and progress on MIMO. I'm studying Python, SQL, Javascript and HTML there. I can recommend MIMO, because of the method and real fun to learn various programming and script languages, 2023.