Are you looking to organize multiple download links on your Blogger site? Creating a table is an effective way to present them in a neat, user-friendly manner. This guide will help you set up a table with download links, making your content more accessible and visually appealing.
Benefits of Using a Table for Download Links
Using a table to display your download links offers several advantages:
- Clear Organization: Tables categorize and arrange links systematically, helping users find what they need quickly.
- Improved User Experience: A structured layout enhances readability and usability.
- Professional Look: Well-designed tables add a polished, 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.
How to Create a Table with Download Links on Blogger
Customize the Template
First of all you need to customize the template and insert the CSS code to design the table. To do so follow the instructions below.
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.
.dltbl{overflow-x:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:18px;text-align:left;overflow-x:auto}table thead{background-color:#f2f2f2;color:white}table tbody td strong.quality{background:rgb(0 0 0 / 10%);color:#000;padding:5px 10px;font-size:12px;border:solid 1px rgba(0, 0, 0, 0.1);border-radius:3px}table td,table th{padding:10px 10px 15px;white-space:nowrap}table th{background-color:#ff3333;padding:10px}table img{vertical-align:middle;margin-right:10px}.dltbl > table:not(.tr-caption-container) tr:not(:last-child) td{border-bottom:1px solid rgba(0,0,0,0.1)}.dltbl > table:not(.tr-caption-container) td{padding:15px 10px}.dltbl > table tbody tr td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.drK table tbody td strong.quality{border-color:rgba(255,255,255,.08);background:rgba(0,0,0,.2);color:#fff}
Step 4: Click the icon to save the changes.
Adding the HTML Code
To add the Table to your blog first create a new post. Go to HTML view and paste the following code in your blog.
<div class="dltbl">
<table>
<thead>
<tr>
<th>Download</th>
<th>Quality</th>
<th>Language</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Download">
<img src="https://s2.googleusercontent.com/s2/favicons?domain=drive.google.com"/>
<a href="#">Download</a>
</td>
<td data-label="Quality"><strong class="quality">720p</strong></td>
<td data-label="Language">Dual Audio</td>
<td data-label="Size">980MB</td>
</tr>
<tr>
<td data-label="Download">
<img src="https://s2.googleusercontent.com/s2/favicons?domain=drive.google.com"/>
<a href="#">Download</a>
</td>
<td data-label="Quality"><strong class="quality">1080p</strong></td>
<td data-label="Language">Dual Audio</td>
<td data-label="Size">1.7GB</td>
</tr>
<tr>
<td data-label="Download">
<img src="https://s2.googleusercontent.com/s2/favicons?domain=mega.nz"/>
<a href="#">Download</a>
</td>
<td data-label="Quality"><strong class="quality">720p</strong></td>
<td data-label="Language">English</td>
<td data-label="Size">980MB</td>
</tr>
<tr>
<td data-label="Download">
<img src="https://s2.googleusercontent.com/s2/favicons?domain=mega.nz"/>
<a href="#">Download</a>
</td>
<td data-label="Quality"><strong class="quality">1080p</strong></td>
<td data-label="Language">English</td>
<td data-label="Size">1.7GB</td>
</tr>
<tr>
<td data-label="Download">
<img src="https://s2.googleusercontent.com/s2/favicons?domain=dropbox.com"/>
<a href="#">Download</a>
</td>
<td data-label="Quality"><strong class="quality">720p</strong></td>
<td data-label="Language">Korean</td>
<td data-label="Size">980MB</td>
</tr>
<tr>
<td data-label="Download">
<img src="https://s2.googleusercontent.com/s2/favicons?domain=dropbox.com"/>
<a href="#">Download</a>
</td>
<td data-label="Quality"><strong class="quality">1080p</strong></td>
<td data-label="Language">Korean</td>
<td data-label="Size">1.7GB</td>
</tr>
</tbody>
</table>
</div>
That's it. Now change the download link, movie name and all other information from this code.
Preview and Publish
Switch back to the "Compose" view to preview your table. Ensure all links are correct and the table looks good. Once satisfied, publish your post.
Tips for Effective Download Links
- Test Links: Verify all download links are working before publishing.
- Add Descriptions: Provide brief descriptions for each file to inform users about the content.
- Regular Updates: Check and update the links periodically to prevent broken downloads.
Conclusion
Creating a table with multiple download links on your Blogger site can significantly improve the organization and accessibility of your content. By following the steps outlined in this guide, you can create a professional and user-friendly download section for your visitors. Happy blogging!
