Membuat Komponen Box Download Moviestream

Get Started > Details
  • Details
  • Code

Deskripsi.

Dalam tutorial ini, kita akan belajar membuat komponen Box Download Moviestream menggunakan HTML dan CSS. Box Download diambil dari Moviestream(https://moviestream.themesia.com/).

  • Pasang kode css di dalam tag <b:skin><![CDATA[...]]></b:skin> atau <style>...</style>.

    /* Box Download */
.dl-box{border-radius:3px;background:#1c1c1c;margin-top:15px;margin-bottom:15px}
.dl-box .dlhead{display:table;width:100%;table-layout:fixed;color:#fff;border-collapse:separate}
.dl-box .dlhead span{background:#242424;padding:10px;margin-right:3px;padding:8px;margin-bottom:0;font-size:14px;font-weight:500;line-height:1.42857143;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border-radius:2px;display:table-cell;border-radius:0}
.dl-box .dl-item a{display:table;width:100%;table-layout:fixed;border-collapse:separate;color:inherit}
.dl-box .dl-item a:hover{background:#212121!important}
.dl-box .dl-item a:nth-child(odd){background:#191919}
.dl-box .dl-item a span{margin-right:3px;padding:10px;margin-bottom:0;font-size:13px;line-height:1.42857143;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border-radius:2px;display:table-cell;border-radius:0}
.infodb img{max-width:170px;height:auto}
.dl-box .dl-item a{display:table;width:100%;table-layout:fixed;border-collapse:separate;color:inherit}
.dl-box .dl-item a img{vertical-align:middle;margin-right:5px}
.dl-box .dl-item a span strong{font-size:12px;background:#0e0e0e;padding:3px 10px;border:1px solid #272727;border-radius:5px}
.dl-box .dl-item a span.dlxxx .fas{width:auto;height:auto;font-size:14px;line-height:20px;margin-right:4px;color:#00acc1}
.dl-box .dl-item a span i{font-style:normal}
@media only screen and (max-width:555px){.dl-box.mobdl .dlhead span:nth-child(1),.dl-box.mobdl .dl-item a span:nth-child(1){width:50%}.dl-box.mobdl span.langx,.dl-box.mobdl span.sizex{display:none}.dl-box.mobdl .dlxxx i{display:none}.dl-box .dl-item a span.dlxxx .fas{display:block}}

  • Dan untuk tag HTML yang digunakan

    <div class="dl-box mobdl">
  <div class="dlhead"> 
    <span class="servx">Server</span> 
    <span class="langx">Language</span> 
    <span class="qualx">Quality</span> 
    <span class="sizex">Size</span> 
    <span class="linkx">Link</span>
  </div>
  <div class="dl-item"> 
    <a href="#" target="_blank" rel="nofollow noopener noreferrer" class="linkselector"> 
      <span class="servx">
        <img style="" src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=https://kbagi.com&amp;size=16"> 
        <i>KumpulBagi</i>
      </span> 
      <span class="langx">English</span> 
      <span class="qualx">
        <strong>720p HD</strong>
      </span> 
      <span class="sizex">-</span> 
      <span class="dlxxx">
        <i class="fas fa-cloud-download-alt"></i> 
        <i>Download</i>
      </span> 
    </a> 
    <a href="#" target="_blank" rel="nofollow noopener noreferrer" class="linkselector"> 
      <span class="servx">
        <img style="" src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=https://acefile.co&amp;size=16"> 
        <i>Acefile</i>
      </span> 
      <span class="langx">English</span> 
      <span class="qualx">
        <strong>480p HD</strong>
      </span> 
      <span class="sizex">-</span> 
      <span class="dlxxx">
        <i class="fas fa-cloud-download-alt"></i> 
        <i>Download</i>
      </span> 
    </a> 
    <a href="#" target="_blank" rel="nofollow noopener noreferrer" class="linkselector"> 
      <span class="servx">
        <img style="" src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=https://youtube.com&amp;size=16"> 
        <i>Youtube</i>
      </span> 
      <span class="langx">English</span> 
      <span class="qualx">
        <strong>360p</strong>
      </span> 
      <span class="sizex">-</span> 
      <span class="dlxxx">
        <i class="fas fa-cloud-download-alt"></i> 
        <i>Download</i>
      </span> 
    </a> 
    <a href="#" target="_blank" rel="nofollow noopener noreferrer" class="linkselector"> 
      <span class="servx">
        <img style="" src="https://t0.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=https://drive.google.com&amp;size=16"> 
        <i>Google Drive</i>
      </span> 
      <span class="langx">English</span> 
      <span class="qualx">
        <strong>1080p HQ</strong>
      </span> 
      <span class="sizex">-</span> 
      <span class="dlxxx">
        <i class="fas fa-cloud-download-alt"></i> 
        <i>Download</i>
      </span> 
    </a>
  </div>
</div>

Comments