Shortcode

Light box ảnh dạng trượt 


<div class="kimidev">
  <div class="slides">
    <!--[Link Gambar 1]-->
    <div class="kimidev-content"><img aria-hidden="true" src="" /></div>
   <!--[Link Gambar 2]-->
   <div class="kimidev-content"><img aria-hidden="true" src="" /></div>
   <!--[Link Gambar 3]-->
   <div class="kimidev-content"><img aria-hidden="true" src="" /></div>
   <!--[Link Gambar 4]-->
   <div class="kimidev-content"><img aria-hidden="true" src="" /></div>
   </div>
   </div>
  
  <style>
  /*css slider by kimidev.site*/
  .kimidev .slides {
       display: flex; 
       white-space: nowrap;
       width: 100%; 
       flex-direction: row; 
       overflow: auto;
       scroll-behavior: smooth; 
       padding: 20px 0 0; 
  }
  .kimidev .kimidev-content img {
       border-radius: 7px;
       max-height: 225px;
       max-width: 720px;
       margin: 0 5px;
       scroll-snap-align: start;
  }
  
  </style>

preview

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Post Shortcodes
Native HTML is the best SEO friendly!


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 
<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>

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
gambar title
Mod Bussid Pesawat Tempur F-16 A Download (14,49 Mb)
LINK DOWNLOAD FILE
share Game YouTube telegram group

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

loại 4 table download nhiều phiên bản 




      
      
      
  

    slive blogger post
  

      
     
  

   
Blogger Widgets

   Expanding Flex Cards Blogger Widget by KiMiDev






 


 

{fullwidth}

Design by @KiMiDev


































    

    • 

    • 

    • 

    • 

    • 

    • 























2
Nhận xét




Cảm ơn bạn đã nhận xét, chúng tôi sẽ quay lại và trả lời cho bạn sớm nhất có thể !!!










































































Nhận xét Mới