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&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://kbagi.com&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&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://acefile.co&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&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://youtube.com&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&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://drive.google.com&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>
INFO:
Untuk bagian CSS kalian harus menyesuaikan lagi dalam blog/web kalian seperti font, color dan sebagainnya.
Comments