How to embed HTML content or images on Tumblr

Tumblr allows you to add multimedia content through its tools. But being a microblogging platform it allows the user to experiment a little more to have a 100% customizable account, you can even embed images or any other type of content in HTML.

You can include multimedia content through the HTML code of your account, and even modify small configurations. Tumblr allows users to access the HTML code associated with your profile and modify it.

Add HTML media content on Tumblr

  • Enter the Tumblr page   from your browser.
  • Log in with your access data.
  • Click on the Add New Content icon or the Dashboard Link icon.
  • Replace the url option with the address of the photo or video. The photo must be uploaded and available before doing this step.
  • To finish, press the Publish button . Now the image is loaded into the post.

Embed content in blog topic

  • Select the Custom option found on the control panel.
  • Choose the Theme tab .
  • Click on the Use custom HTML option .

Now you can modify the theme of your blog at will. This option is recommended if you have knowledge of HTML, otherwise you could affect its operation .

Add a table in HTML

Adding multimedia content is easy, but if you want to add a table, you have to have a little more patience. It is a simple process, but it takes time.

You have to add the rows and columns of the table, as well as its content by means of HTML code. This is done through the Tumblr HTML editor.

  • Access your Tumblr account from your PC browser.
  • Enter your username and password to access your account.
  • Select the Settings icon .
  • click on the Customize your blog option. then choose the Theme option.
  • The HTML editor opens to modify the design of your blog.
  • Look for the <body> tag within the code.
  • Choose where you want to place the board in the bodysuit.

Add the code in the HTML editor

The tr tags are used to define the tables and the Td tags are used to map the content. The table is defined with the Data tag within the code.

  • <Data = «text-align: center; float: left; border = »1« cellspacing = »8«>
    <Tr>
    <Td> Row 1 First name </ td>
    <Td> Row 1 Last name </ td>
    <Td> Row 1 Mail </ td>
    </ Tr>
    <Tr >
    <Td> Row 2 Carlos </ td>
    <Td> Row 2 Pérez </ td>
    <Td> Row 2 carlosp@gmail.com </ td>
    </ Tr>

The table has the cell text alignment attributes in the center , but it is a value that you can change to the left or right. The border attribute at 1 means that the table has a border, if you don’t want it to be displayed change the value to 0.

The cellspacing attribute determines the space in pixels between each row. To add a new row to the table, put the </ Tr> tag first and then <Tr> as the opening tag.

Modify the values ​​that you consider necessary or add new ones and when you finish put the </ Table> tag . Then press the Update button and save the changes made.

To see what the final result was, click on the profile button, you will see that your table is already shown right in the place where you placed it. If you want to add more columns to the table just add another block with the <tr> tag followed by the <td> elements. Do not forget to close the labels .

You can also add other attributes to the table such as Float, and indicate that it is to the right (right) or left (left). You have many options, even adding images, changing the background of the table or the color.

 

Leave a Comment