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 .