Light box ảnh dạng trượt
preview
các nút button
1: button trống.<a class="button green" href="https://www.kimidev.net/" target="_blank">Default</a>
Default
2. button xem trước
3. tải xuống
4.liên kết
5.giỏ hàng
<a class="button preview red" href="https://www.kimidev.net/" target="_blank">Preview</a>
Preview
3. tải xuống
<a class="button download yellow" href="https://www.kimidev.net/" target="_blank">Download</a>
Download
4.liên kết
<a class="button link purple" href="https://www.kimidev.net/" target="_blank">Link</a>
Link
5.giỏ hàng
<a class="button cart blue" href="https://www.kimidev.net/" target="_blank">Shop cart</a>
Shop cart
6. Đăng lại
<a class="button share orange" href="https://www.kimidev.net/" target="_blank">Share</a>
Share
7.xem thông tin
<a class="button info dark" href="https://www.kimidev.net/" target="_blank">More info</a>
More info
8.xem trước black
<a class="button white preview" href="https://www.kimidev.net/" target="_blank">Preview</a>
Preview
button Download
<a class="dl" href="https://www.kimidev.net/#" target="_blank">Lorem Ipsum is simply dummy text</a>
Lorem Ipsum is simply dummy text
<a class="dl" file-size="Light, Fast & Creative" href="https://www.kimidev.net/#" target="_blank">Kimmidev Creative Blogger</a>
Kimmidev Creative Blogger
<a class="dl pdf" file-size="6.0 MB" href="https://www.kimidev.net/#pdf" target="_blank">Kimmidev Creative Blogger User Manual.pdf</a>
Kimmidev Creative Blogger User Manual.pdf
<a class="dl zip" file-size="5.34 MB" href="https://www.kimidev.net/#zip" target="_blank">Kimmidev Creative Blogger.zip</a>
Kimmidev Creative Blogger.zip
<a class="dl media" file-size="326.1 MB" href="https://www.kimidev.net/#media" target="_blank">Kimmidev Creative Blogger Video</a>
Kimmidev Creative Blogger Video
<a class="dl code" file-size="324.3 KB" href="https://www.kimidev.net/#code" target="_blank">Kimmidev Creative Blogger Source Code</a>
Kimmidev Creative Blogger Source Code
Tạo hộp thoại thông báo
<blockquote class='check'>Lorem Ipsum...</blockquote>
Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.
<blockquote class='flag'>Lorem Ipsum...</blockquote>
Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.
<blockquote class='warn'>Lorem Ipsum...</blockquote>
Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.
<blockquote class='alert'>Lorem Ipsum...</blockquote>
Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.
<blockquote class='star'>Lorem Ipsum...</blockquote>
Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.
Contact Form
Syntax
<b>{contactForm}</b>
{contactForm}
Code Box
Simple <pre> code
Default PRE
$("#main-nav #s").focus(function());
Codebox chứa javascript
Code box syntax with param: lang="js"
<pre lang="js">$("#main-nav #s").blur(function()...</pre>
👉 Result:
$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});
Code box syntax with param: lang=""
<pre lang="">$("#main-nav #s").blur(function()...</pre>
Result:
$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});
Code box chứa CSS: lang="css"
<<pre lang="css" >
.bi::before {
display: block;
background-size: 1rem 1rem; }
</pre>
.bi::before {
display: block;
background-size: 1rem 1rem; }
Codebox chứa html: lang="html"
các bạn cần phải mã hóa code html và dán vào "pre"
<pre lang="html"><a class="dl pdf" file-size="6.0 MB" href="https://www.kimidev.net/#pdf" target="_blank">Kimmidev Creative Blogger User Manual.pdf</a></pre>
Result:
a class="dl pdf" file-size="6.0 MB" href="https://www.kimidev.net/#pdf" target="_blank">Kimmidev Creative Blogger User Manual.pdf</a>
Code Box tạo hộp download file
loại 1 settime out link
<style>
/* Variable color */
:root{
--linkB: #0043eb ;
--linkC:#fd00ff;
--angka:#fff;
--fontB: 'Noto Sans', sans-serif ;
}
/*grid fix*/
.zikt-grid{padding: 5px;text-align: center;max-width: 510px;margin: auto;}
.zikt-grid ul2 {display: flex;flex-wrap:wrap;justify-content: space-between;}
.coll-2 ul2 li2 {width:47%;}
.zikt-grid li2 {font-size: 0.9em;font-weight: 500;line-height: 1.3em;text-align: center;background: #efefef;border-radius: 5px;margin: 5;box-sizing: border-box;/*box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;*/padding: 10px 0 10px;display: flex;align-items: center;justify-content: center;margin-top:13px;cursor:pointer}
.zikt-grid li2 a {display: block;text-decoration: none;color: #333;}
.zikt-grid li2 svg {margin: 3px 0;width: 35px;height: 35px;display: inline-block;}
.zikt-grid li2 span {display: block;padding: 0 3px;}
/* Download btn fix*/
.zi-dlBox{max-width:500px;background:var(--linkB);border-radius:5px;padding:12px;margin:1.7em 0; display:flex;align-items:center; font-size:14px;margin:auto;cursor:pointer;}
.zi-dlBox .fT{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:45px;height:45px; padding:10px; background:#fff;border-radius:5px}
.zi-dlBox .fT::before{content:attr(data-text);opacity:.7}
.zi-dlBox a{flex-shrink:0;margin:0;padding:10px 12px;border-radius:5px;font-size:13px}
.zi-dlBox a::after{content:attr(aria-label)}
.zi-dlBox .fN{flex-grow:1; width:calc(100% - 200px);padding:0 15px}
.zi-dlBox .fN >*{color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zi-dlBox .fS{line-height:16px;font-size:12px;opacity:.8}
.zi-dlBox .fN b1{font-size:18px;font-family:var(--fontB)}
.zi-dlBox a::after{display:none}
/*waktu*/
.AtLinkTarget{display:none}
atangka{color:var(--angka);font-size:1.5em;font-weight:bold}
.textd{font-size:1.2em;}
/*.Aticon img{width:65px;height:65px;float:left;border-radius:10px;}*/
.Aticon img{width:40px;height:50px;float:left;border-radius:10px;}
/* Icon btn */
.icon1{flex-shrink:0;display:inline-flex} .icon1::before{content:'';width:30px;height:30px;background-size:35px;background-repeat:no-repeat;background-position:center} .icon1::after{content:'';padding:0 6px} .icon1.dl::before,.button.ln .icon1.dl::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
/* Button */
.Button1{display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:var(--linkB); font-size:14px;font-family:var(--fontB); white-space:nowrap;overflow:hidden;max-width:320px}
.Button1:hover{border-color:var(--linkB);box-shadow:0 0 0 1px var(--linkB) inset}
</style>
<!--[Tombol waktu]-->
<div class='zi-dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<div class="Aticon">
<img alt="gambar title" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEgBP601k5hGb8UqpIsIqjytO9KgKIxQmidFgNecebLWtByRnbkCC4oa8lkKD39Vm13G46YC_dN2LkJ-rzUei2zBxflCr8zIvY21v16l5Q-TE40wnfZMOUcy-eOrtuPPStPFiIizEMT_HAarOM3bYp9jwmv0qy2l-yr685Q=s0-d" title="gambar title">
</div>
<div class='fN'>
<!--[ File name ]-->
<span class='textd'><b1>Mod Bussid Pesawat Tempur F-16 A</b1></span>
<span class='fS'>Download (14,49 Mb)</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<!--<a class='button' aria-label='Download' href='site:https://www.kimidev.net'><i class='icon dl'></i></a>
</div>-->
<!--[Link]-->
<a class='button1' aria-label='Download'><i class='icon1 dl'></i></a>
</div>
<div class='AtLinkTarget'>LINK DOWNLOAD FILE</div>
<!--[Grid 2 by zidarma]-->
<div class='zikt-grid coll-2'>
<ul2>
<li2>
<a href='#' title='#'>
<!--svg-->
<svg for='forShare' class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M92.30583,264.72053a3.42745,3.42745,0,0,1-.37,1.57,3.51,3.51,0,1,1,0-3.13995A3.42751,3.42751,0,0,1,92.30583,264.72053Z' transform='translate(-83.28571 -252.73452)'></path><circle cx='18.48892' cy='5.49436' r='3.51099'></circle><circle cx='18.48892' cy='18.50564' r='3.51099'></circle><line x1='12.53012' y1='8.476' x2='8.65012' y2='10.416'></line><line x1='12.53012' y1='15.496' x2='8.65012' y2='13.556'></line></g></svg>
<!--end-->
<span>share</span></a>
</li2>
<li2>
<a href='#' title='#'>
<!--svg-->
<svg xmlns='http://www.w3.org/2000/svg' class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 1.977425)'><line x1='7.25474269' y1='10.085022' x2='7.25474269' y2='13.6602214'></line><line x1='9.07928848' y1='11.8722397' x2='5.431535' y2='11.8722397'></line><line x1='13.477308' y1='10.1936617' x2='13.3751594' y2='10.1936617'></line><line x1='15.208106' y1='13.6058057' x2='15.1059574' y2='13.6058057'></line><path d='M6.5140228,0.238664844 L6.5140228,0.238664844 C6.52070542,0.952750059 7.10591161,1.52554569 7.81999683,1.51886307 L8.82811713,1.51886307 C9.93074871,1.51027114 10.8329018,2.39428572 10.8481764,3.4969173 L10.8481764,4.50408295'></path><path d='M19.8121415,11.9178722 C19.8121415,6.35793599 17.4254931,4.50398748 10.2645931,4.50398748 C3.10273844,4.50398748 0.716089999,6.35793599 0.716089999,11.9178722 C0.716089999,17.4787631 3.10273844,19.3317569 10.2645931,19.3317569 C17.4254931,19.3317569 19.8121415,17.4787631 19.8121415,11.9178722 Z'></path></g></svg>
<!--end-->
<span>Game</span></a>
</li2>
<li2>
<a href='#' title='#'>
<!--svg-->
<svg xmlns='http://www.w3.org/2000/svg' class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path d='M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z' ></path><path d='M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z'></path></g></svg>
<!--end-->
<span>YouTube</span></a>
</li2>
<li2>
<a href='lINK TELEGRAM' title='#'>
<!--svg-->
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'/></g></svg>
<!--end-->
<span>telegram group</span></a>
</li2>
</ul2>
</div>
<!--[sampai sini]-->
<script>
var timeLeft = 10; // THỜI GIAN CHỜ
var downloadBtn = document.querySelector('.zi-dlBox'), countdown = document.querySelector('.textd'); downloadBtn.addEventListener('click', ()=> {
var e = document.querySelector('.AtLinkTarget').innerText, t = setInterval(function() {
timeLeft -= 1, countdown.innerHTML = 'Download trong <atangka>'+timeLeft+'</atangka> giây nữa.', timeLeft <= 0 && (clearInterval(t), window.location.href = e, setTimeout())}, 1e3)});
</script>
preview
LINK DOWNLOAD FILE
loại 2 download unlock link
<CENTER>
<h3>LÀM THEO CÁC BƯỚC ĐỂ TẢI FILE</h3>
<input id="step1" onclick="step1()" type="button" value="1.ĐĂNG KÝ KÊNH KIMIDEV" />
<input disabled="" id="step2" onclick="step2()" type="button" value="2.ĐĂNG KÝ KÊNH KIMIDEV" />
<input disabled="" id="step3" onclick="step3()" type="button" value="3. LIKE VIDEO VÀ BÌNH LUẬN VIDEO" />
<input disabled="" id="stepfinal" onclick="stepfinal()" type="button" value="Download File" />
</CENTER>
<p id="textfinal" style="color: #47FD48; font-weight: blod; font-size: 18px; text-alain: center; "></p>
<script>
$link1 ="";
$link2 ="";
$link3 ="";
$linkfile="";
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function step1()
{ window.open($link1);
sleep(4000);
document.getElementById("step1").value="Bước 1(đã xong!)";
document.getElementById("step1").onclick= "";
document.getElementById("step2").style.backgroundColor = "#F57C00";
document.getElementById("step2").style.cursor = "pointer";
document.getElementById("step2").disabled= false;
}
function step2()
{ window.open($link2);
sleep(4000);
document.getElementById("step2").value="Bước 2(đã xong!)";
document.getElementById("step2").onclick= "";
document.getElementById("step3").style.backgroundColor = "#F57C00";
document.getElementById("step3").style.cursor = "pointer";
document.getElementById("step3").disabled= false;
}
function step3()
{ window.open($link3);
sleep(4000);
document.getElementById("step3").value="Bước 3(đã xong!)";
document.getElementById("step3").onclick= "";
document.getElementById("stepfinal").style.backgroundColor = "red";
document.getElementById("stepfinal").style.cursor = "pointer";
document.getElementById("textfinal").innerHTML= "Cảm ơn bạn đã sử dụng dịch vụ của chúng tôi";
document.getElementById("stepfinal").disabled= false;
}
function stepfinal()
{ window.open($linkfile);
}
</script>
<style>
:root{
/* kích cỡ chiều dài của khối grid */
--color-input: #F57C00;
}
input{min-width:50px; width:100%; max-width:400px;background-color:var(--color-input);margin-bottom:5px;border:none;border-radius:4px;color:#fff;padding:15px;text-align:center;text-decoration:none;display:block;font-size:16px;cursor:pointer;font-weight:600; white-space: normal;}
input#step2{background-color:#ddd; cursor:no-drop;}
input#step3{background-color:#ddd; cursor:no-drop;}
input#stepfinal{background-color:#ddd; cursor:no-drop}
#BoxDownload{text-align:center;margin:auto;width:310px;padding:2px;}
</style>
preview
LÀM THEO CÁC BƯỚC ĐỂ TẢI FILE
loại 3 table download 1 sever
<div class='sticky-table'>
<div class="box-down">
<div class="bungkus-down">
<div class="embuh">
<a id="btn" href="Link File cần download" rel="nofollow" target="_blank">
<i class="fa fa-cloud-download"></i> Download</a>
<div class="file-info">NAME FILE</div>
</div>
<div class="file-deskripsi">
<span class="uploader">
<i aria-hidden="true" class="fa fa-user-circle-o"></i> kimidev</span>
<span class="file-size"> <i aria-hidden="true" class="fa fa-file-text"></i> File Size: KB</span>
</div>
</div>
<table class="kimidev-table">
<thead>
<tr>
<th>SEVER</th>
<th>UPDATE</th>
<th>DOWNLOAD</th>
</tr>
</thead>
<tbody>
<tr>
<td>TeraBox</td>
<td>26/3/2005</td>
<td><a href=''>Tải Terabox</a>
</td>
</tr>
<tr>
<td>Anonfile</td>
<td>26/3/2005</td>
<td><a href=''>Tải Anonfile</a>
</tr>
<tbody>
</table>
</div>
</div>
<style>
.kimidev-table tbody tr td a{padding: 3px 31px;border-radius: 20px;background-color: #149EF8;color: #fff;}.bungkus-down{background:#149EF8;color:#fff;padding:10px 20px;display:block;white-space:nowrap;}.file-deskripsi{display:block;}#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;display:block;}.box-down{margin:15px 0;}.uploader{padding:0 10px 0 0;}.kimidev-table{border: 2px dashed #149EF8 !important;
;border:1px solid #C0C0C0;border-collapse:collapse;padding:5px;width:100%;}.kimidev-table th{padding:5px;background:#FA0000;white-space:nowrap;}.kimidev-table td{border:1px solid #C0C0C0;padding:5px;white-space:nowrap;}.sticky-table{overflow:auto;}
</style>
preview
Download
NAME FILE
kimidev
File Size:
KB
| SEVER | UPDATE | DOWNLOAD |
|---|---|---|
| TeraBox | 26/3/2005 | Tải Terabox |
| Anonfile | 26/3/2005 | Tải Anonfile |
Hệ Thống Website thông tin và Công Nghệ
Được vận hành và điều kiển bởi KiMiDevDesign by @KiMiDev
hay quá ạ :3
Okiii cảm ơn em