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