Create a Table with Download Links
Let's Do a Demo Here...!
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.
Conclusion
This is all about making a Contact Form using Telegram Bot API. 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 .
.png)