Add Multiple Download Links in a Table to Your Blogger Website

Tasin
9 Jul, 2024

 If you're looking to organize and present multiple download links on your Blogger site efficiently, creating a table is an ideal solution. This guide will walk you through the steps to add multiple download links in a table format, ensuring your content is both user-friendly and visually appealing.

Add Multiple Download Links in a Table

Why Use a Table for Download Links?

Using a table to organize your download links has several benefits:

  • Improved Organization: Tables help categorize links, making it easier for users to find what they need.
  • Enhanced User Experience: Neatly arranged links enhance readability and usability.
  • Professional Appearance: A well-structured table adds a professional touch to your blog.

Video Tutorial Related to This Topic

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

Customizing the Template

Before we can use this table in our blog post we need to make some modifications to our code. Simply follow the steps below to make the necessary changes to your template.

Step 1: Login to Blogger dashboard then go to Themes.

Step 2: Click on the icon next to the Customize button.

Step 3: Now press Ctrl + F and search for the ]]></b:skin> tag.

Step 4: Paste the following CSS code above this tag

/*Made by tasin | siteguide.xyz*/.headertable{background-color:#ff0033;color:white;font-size:1.2em;padding:0.6rem;text-align:center}.headertable h3{margin:0 !important;color:#ffffff !important;font-size:1.25rem !important}#table-download{max-width:100%;margin:2rem auto;overflow:hidden;border-radius:0.19rem}#table-download table{width:100%}#table-download table td,#table-download table th{color:#ffffff;padding:0.63rem}#table-download table td{text-align:center;vertical-align:middle}#table-download table tr a{display:inline-block;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0.06rem solid transparent;padding:0.25rem 0.5rem;font-size:0.8rem;line-height:1.5;border-radius:0.25rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}#table-download table tr a.blue{background-color:#0D6EFD;border-color:#0D6EFD;color:#ffffff}#table-download table tr a.green{background-color:#28A745;border-color:#28A745;color:#ffffff}#table-download table tr a.yellow{background-color:#FD7E14;border-color:#FD7E14;color:#ffffff}/*made by tasin | siteguide.xyz*/#table-download table tr a.red{background-color:#DC3545;border-color:#DC3545;color:#ffffff}#table-download table tr a.blue:hover{color:#ffffff;background-color:#3485FD;border-color:#0D6EFD}#table-download table tr a.blue:focus{box-shadow:-1px 2px 9px 5px rgba(52,133,253,0.28)}#table-download table tr a.green:hover{color:#ffffff;background-color:#4AB563;border-color:#28A745}#table-download table tr a.green:focus{box-shadow:-1px 2px 9px 5px rgba(74,181,99,0.28)}#table-download table tr a.yellow:hover{color:#ffffff;background-color:#FD933A;border-color:#FD7E14}#table-download table tr a.yellow:focus{box-shadow:-1px 2px 9px 5px rgba(253,147,58,0.28)}#table-download table tr a.red:hover{color:#ffffff;background-color:#E25563;border-color:#DC3545}#table-download table tr a.red:focus{box-shadow:-1px 2px 9px 5px rgba(226,85,99,0.28)}/*made by tasin | siteguide.xyz*/#table-download table td:last-child{font-size:0.95em;line-height:1.4}#table-download table th{font-weight:600;text-align:center !important;font-size:1.1em}#table-download table tr:nth-child(2n){background-color:#0e0e1b}#table-download table tr:nth-child(2n + 1){background-color:#171927}

Step 5: Click the icon to save the changes.

Step-by-Step Guide to Adding a Table with Download Links

Create a New Blog Post

Start by logging into your Blogger account and creating a new blog post. This is where you will add your table with download links.

Switch to HTML View

To add a table, switch from the "Compose" view to the "HTML" view. This allows you to directly edit the HTML code of your post.

Insert HTML Code for the Table

Copy and paste the following HTML code into the HTML view of your post:

<div id="table-download">
  <div class="headertable"><h3>Avengers: Endgame (2019)</h3></div>
  <table cellspacing="0">
    <tbody>
      <tr>
        <th>Download</th>
        <th>Quality</th>
        <th>Language</th>
        <th>Size</th>
      </tr>
      <tr>
        <td><a class="blue" href="#" rel="noopener nofollow" target="_balnk">One Drive</a></td>
        <td>1080p</td>
        <td>English</td>
        <td>2.2Gb</td>
      </tr>
      <tr>
        <td><a class="blue" href="#" rel="noopener nofollow" target="_balnk">One Drive</a></td>
        <td>780p</td>
        <td>English</td>
        <td>1.6Gb</td>
      </tr>
      <tr>
        <td><a class="blue" href="#" rel="noopener nofollow" target="_balnk">One Drive</a></td>
        <td>480p</td>
        <td>English</td>
        <td>800Mb</td>
      </tr>
      <tr>
        <td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
        <td>1080p</td>
        <td>English</td>
        <td>2.2Gb</td>
      </tr>
      <tr>
        <td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
        <td>780p</td>
        <td>English</td>
        <td>1.6Gb</td>
      </tr>
      <tr>
        <td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
        <td>480p</td>
        <td>English</td>
        <td>800Mb</td>
      </tr>
      <tr>
        <td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Mega Drive</a></td>
        <td>1080p</td>
        <td>English</td>
        <td>2.2Gb</td>
      </tr>
      <tr>
        <td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Mega Drive</a></td>
        <td>780p</td>
        <td>English</td>
        <td>1.6Gb</td>
      </tr>
      <tr>
        <td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Mega Drive</a></td>
        <td>480p</td>
        <td>English</td>
        <td>800Mb</td>
      </tr>
      <tr>
        <td><a class="yellow" href="#" rel="noopener nofollow" target="_balnk">StreamSB</a></td>
        <td>1080p</td>
        <td>English</td>
        <td>2.2Gb</td>
      </tr>
      <tr>
        <td><a class="yellow" href="#" rel="noopener nofollow" target="_balnk">StreamSB</a></td>
        <td>780p</td>
        <td>English</td>
        <td>1.6Gb</td>
      </tr>
      <tr>
        <td><a class="yellow" href="#" rel="noopener nofollow" target="_balnk">StreamSB</a></td>
        <td>480p</td>
        <td>English</td>
        <td>800Mb</td>
      </tr>
    </tbody>
  </table>
</div>

Customize the Table

To customize the table look for the texts inside <td> tag. Then change the information within this tag, such as server name, file size, language, and quality. 

Add Additional Rows

If you are in need of adding or removing additional rows then just the below code just above the </tbody> or remove them if you don't need them.

Preview and Publish

After adding the table and links, switch back to the "Compose" view to preview how the table looks. Make any necessary adjustments, and once you're satisfied, publish your post.

Best Practices for Download Links

  • Verify Links: Ensure all download links are working correctly before publishing.
  • Add Descriptions: Include brief descriptions for each file to inform users about the content.
  • Keep Updated: Regularly check and update the links to avoid broken downloads.

Conclusion

Adding multiple download links in a table format on your Blogger site can significantly enhance the organization and usability of your content. By following the steps outlined above, you can create a professional and user-friendly download section for your visitors. Happy blogging!

Next Post Previous Post
No Comment
Add Comment
comment url