What tutorial do you want for the next article! Request Here!

How to Add a Table with Multiple Download Links

create a table with multiple download links using HTML and CSS. Perfect for content providers. i.e Web Series, APK, and Software versions.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Create a table with multiple download links using HTML and CSS. Perfect for content providers. i.e web series, APKs, and software versions.

How to Add a Table with Multiple Download Links

Hello! Everyone, Today in this article, I will show you how to Add a Table with Multiple Download Links using html and css.
If you need to offer multiple download files on your website, this widget is an ideal solution. It is user-friendly, compact in size, and highly beneficial for your website visitors.

Before we start let's take a look at its Demo.

Click me to Check Demo ↓

Jurassic World Dominion (2022)

Download Quality Language Size
Google Drive 1080p English 2.2Gb
Google Drive 780p English 1.6Gb
Google Drive 480p English 800Mb
Google Drive 360p English 400Mb
Multiup 1080p English 2.2Gb
Multiup 780p English 1.6Gb
Multiup 480p English 800Mb
Multiup 360p English 400Mb
StreamSB 1080p English 2.2Gb
StreamSB 780p English 1.6Gb
StreamSB 480p English 800Mb
StreamSB 360p English 400Mb
Usersdrive 1080p English 2.2Gb
Usersdrive 780p English 1.6Gb
Usersdrive 480p English 800Mb
Usersdrive 360p English 400Mb

Add Multiple Download Links Table

Adding a table with multiple download links to your website is a straightforward process that doesn't require HTML or CSS knowledge. I've already prepared a pre-designed codes for you, so all you need to do is copy and paste the provided codes at right place in your Theme XML.

Important! Before we begin adding codes to XML, I highly recommend taking a backup of your theme. If any issues arise, you can easily restore it later on.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: From Blogger Dashboard, select the blog you wish to customize and click on the "Theme" option.

Step 3: This will take you to the Blogger Theme Editor, Click the arrow down icon next to 'customize' button.

Step 4: In the Theme Editor, Click Edit HTML, you will be redirected to editing page.

Don't worry if you're not familiar with HTML; the changes we'll make are simple and easy to understand.

Step 5: Once you're in the HTML editor, Now search the code ]]></b:skin> or </style> and paste the following CSS just above to it.

You can use the search function (Ctrl + F or Command + F) to make it easier to find the code place.
.headertable{background-color:#c30000;color:white;font-size:1.2em;padding:.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:.19rem}
#table-download table{width:100%}
#table-download table td,#table-download table th{color:#FFFFFF;padding:.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:.06rem solid transparent;padding:.25rem .5rem;font-size:.8rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;background-color:#17a2b8;border-color:#17a2b8;color:#FFFFFF}
#table-download table tr a.green{background-color:#28a745;border-color:#28a745}
#table-download table tr a.yellow{background-color:#e0a800;border-color:#e0a800;color:#000}
#table-download table tr a.red{background-color:#c82333;border-color:#bd2130}
#table-download table tr a:hover{color:#FFFFFF;background-color:#07c8e0;border-color:#179b8c}
#table-download table tr a:focus{box-shadow:0 0 0 .2rem rgb(58 109 110 / 3.13rem)}
#table-download table tr a.green:hover{color:#FFFFFF;background-color:#218838;border-color:#1e7e34}
#table-download table tr a.green:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}
#table-download table tr a.yellow:hover{color:#FFFFFF;background-color:#e0a800;border-color:#d39e00}
#table-download table tr a.yellow:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}
#table-download table tr a.red:hover{color:#FFFFFF;background-color:#c82333;border-color:#bd2130}
#table-download table tr a.red:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}
#table-download table td:last-child{font-size:.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}

Replace the marked parts as per your need, i.e.
#c30000 for table background color.
background-color:#28a745 with change button color.

Step 6: Save the changes by clicking on this icon


How to Use

Step 7: Great job! To add a table with multiple download links to your blog posts using HTML view, follow these simple steps

Step 8: Open the HTML view of your blog post editor.

Step 9: Copy and paste the following HTML codes.

<div id="table-download">
<div class="headertable"><h3>Jurassic World Dominion (2022)</h3></div>
<table cellspacing="0">
<tbody><tr>
<th>Download</th>
<th>Quality</th>
<th>Language</th>
<th>Size</th>
</tr>
<tr>
<td><a href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
<td>1080p</td>
<td>English</td>
<td>2.2Gb</td>
</tr>
<tr>
<td><a href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
<td>780p</td>
<td>English</td>
<td>1.6Gb</td>
</tr>
<tr>
<td><a href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
<td>480p</td>
<td>English</td>
<td> 800Mb</td>
</tr>
<tr>
<td><a href="#" rel="noopener nofollow" target="_balnk">Google Drive</a></td>
<td>360p</td>
<td>English</td>
<td>400Mb</td>
</tr>
<tr>
<td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Multiup</a></td>
<td>1080p</td>
<td>English</td>
<td>2.2Gb</td>
</tr>
<tr>
<td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Multiup</a></td>
<td>780p</td>
<td>English</td>
<td>1.6Gb</td>
</tr>
<tr>
<td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Multiup</a></td>
<td>480p</td>
<td>English</td>
<td> 800Mb</td>
</tr>
<tr>
<td><a class="green" href="#" rel="noopener nofollow" target="_balnk">Multiup</a></td>
<td>360p</td>
<td>English</td>
<td>400Mb</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>
<tr>
<td><a class="yellow" href="#" rel="noopener nofollow" target="_balnk">StreamSB</a></td>
<td>360p</td>
<td>English</td>
<td>400Mb</td>
</tr> 
<tr>
<td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Usersdrive</a></td>
<td>1080p</td>
<td>English</td>
<td>2.2Gb</td>
</tr>
<tr>
<td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Usersdrive</a></td>
<td>780p</td>
<td>English</td>
<td>1.6Gb</td>
</tr>
<tr>
<td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Usersdrive</a></td>
<td>480p</td>
<td>English</td>
<td> 800Mb</td>
</tr>
<tr>
<td><a class="red" href="#" rel="noopener nofollow" target="_balnk">Usersdrive</a></td>
<td>360p</td>
<td>English</td>
<td>400Mb</td>
</tr>
</tbody></table>
</div>

Step 10: Customize the table by adding more rows if you have additional files to include. Simply copy the <tr>...</tr> section and paste it below the existing rows. Don't forget to update the file name and download link for each row.

Step 11: Save your changes and preview your blog post to see the download links table in action.

That's it! By following these steps and adding the provided HTML codes, you'll have a neatly formatted table with multiple download links in your blog posts.


Conclusion

This is all about Addinng a Table with Multiple Download Links for Blog Posts. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .

You May Like These Posts:

إرسال تعليق

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.