Cara Mudah Membuat Tabel Responsive Berisikan Tombol Download Pada Postingan Blogger

Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Tabel Responsive Berisikan Tombol Download Pada Postingan Blogger. Tombol Download merupakan suatu tombol yang beriksikan Link yang berfungsi menjadi perantara antara situs website/blog anda dengan situs website/blog yang berisikan media penyimpanan.

Fungsi dari pemasangan Tombol Download pada situs website/blog ini sebenarnya mempunyai peran yang sangat penting yaitu mempermudah pengunjung untuk mengetahui Tombol Link yang berisikan Demo, Download, Buy, Transaksi atau sebagainya.

Karna fungsi dari Tombol Download pada situs website/blog memiliki peran yang peting maka pemilik situs website/blog memberikan efek khusus atau warna pada Tombol Download ini tujuannya untuk mempercantik blog dan mempermudah pengunjung situs website/blog anda dalam membedakan Tombol Link yang tersedia.

Di postingan kali ini saya membuat tabel responsive berisikan tombol download. Yang di maksud dengan responsive yaitu tampilan tidak akan berantakan saat dilihat pada tampilan versi apapun baik dari desktop atau mobile. 

Tampilan dari tabel responsive berisikan tombol download ini sebenarnya hampir mirip dengan situs-situs download terkenal. Jadi bagi yang tertarik untuk memasang tabel responsive berisikan tombol download pada situs blog kalian, ikuti tutorial di bawah ini.

Cara Mudah Membuat Tabel Responsive Berisikan Tombol Download Pada Postingan Blogger

1. Login ke Blog anda > kemudian pilih Tema > Selanjutnya pilih Edit HTML

2. Selanjutnya Letakkan kode ini, diatas kode ]]></b:skin> atau </style>
/* Tabel Download */
.anime-box{font-size:9px;font-weight:bold;background:none repeat scroll 0% 0% #F5F5F5;padding:10px;margin:10px 0}
.anime-box ul{margin:0;padding:0;list-style:outside none none}
.anime-box ul li{background:none repeat scroll 0% 0% #E4E4E4;margin-bottom:2px;line-height:26px;padding:0 5px;font-size:15px}
.anime-box ul li strong{background:#f68383;border-right:2px solid #F5F5F5;width:100px;display:block;float:left;margin-left:-5px;margin-right:2px;color:#FFF;padding:0 5px;text-align:left}

3. Jika sudah, langsung saja Simpan Tema

4. Untuk menerapkannya dalam postingan anda > buat Postingan Baru > kemudian letakkan kode ini pada menu HTML (Bukan Compose)
<div class="anime-box">
   <ul>
      <li style="text-align: center;">
         <strong>360p</strong>
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD2</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">ZS</a>
      </li>
      <li style="text-align: center;">
         <strong>480p</strong>
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD2</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">ZS</a>
      </li>
      <li style="text-align: center;">
         <strong>720p</strong>
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD2</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">ZS</a>
      </li>
      <li style="text-align: center;">
         <strong>1080p</strong>
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">GD2</a> |
         <a href="LINK-ANDA" target="_blank" rel="nofollow noopener">ZS</a>
      </li>
   </ul>
</div>

3. Setelah itu pilih Publikasihkan

Cukup mudah bukan Cara Mudah Membuat Tabel Responsive Berisikan Tombol Download Pada Postingan Blogger. Bila kamu mengalami kesulitan dalam menerapkannya pada blog kalian silahkan tinggalkan pesan di kolom komentar. Semoga informasinya bermanfaat dan sampai jumpa.