Igniplex dicumentation and all codes

code box

<pre class="css"><code>.post-body pre {
  background-color: #333;
  border-left: 5px solid #009688;
  padding: 0;
  margin: .5em auto;
}</code><i class="copy"></i></pre>

buttons

<button class="download">Download</button>

<button class="demo">Demo</button>

warning box

<div class="box">Box default</div>
<div class="box blue">Box default</div>
<div class="box red">Box default</div>

galleries

<div class="gallery carousel">
  <div class="carousel-outer r"><div class="carousel-inner">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjPpU0c9gp0NqV7A4TrwbzO8HbebNrr_5O8JX_t_ZSzdHdnUSOXbzdJP1k8PbuaaY_JHOdLzYXN0ANbA52MQxxKUiTf72Ny5W-BNRBCTYoqj0CIz4-ygI7wjLBkMEEobLpUqgRAgA4gQ8f5Fs0922TOL5gmwAY-UynTA51-4lnxj5geJYo3nh3MejnA/s1600/cat-01-ls.jpeg" title="Igniplex Carousel Image" width="316" style="width: 316px;">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6270fgNeJ8BNjmOfr1dmmbVYfSYQPMnfIozY1ALcIot0nxvgZWKjpoyMSB3A2QkNik1W-0Bb8T-7409csdpI_EfA8naQK56SNnJDJfl3pNZ8AditsQafzC2COsNMpUaU-1q_lrb-fh1igD4E6j3LlZjDeQ3vFyRC7NLJqGLQIQe-oDdzvct2eEE_PtA/s1600/cat-02-ls.jpeg" title="Igniplex Carousel Image" width="316" style="width: 316px;">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaz-H_3oPLCJP4cc2eM-CMg7LbMX9Guo_fkr3Zb6YqFS52Y7Pf4PCDdYTd_2QnJ1jggyjF-AEhJoN-4X1XZSUCzdL1rVcXKD9jCqG5eEk-ogr4xpWORc6zEW_SR-6EjOVIJaAMV8vpiBvBPchXqR-z70dIq13HCvYK8ZS-O2ZXKn4KHzY1sxRtW2jmQ/s1600/cat-03-ls.jpeg" title="Igniplex Carousel Image" width="316" style="width: 316px;">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_wyeY48a0in932H1eg4e41XzX-1UnAbA5VbsuNYQ9Dc2ntVUfl9xiPTDZKUFJCIdOdkzYywCWn2W6Z2U5nLDqtfMQjHC8fKLz6T9AxqH69GHrSgCZnyzj5Mg6cUA0uo3TD0rQgDYNFS3zhADLEykZT47dyZtd2UQcdqSqkLUiPsVXD1M9ojdgGfNLA/s1600/cat-04-ls.jpeg" title="Igniplex Carousel Image" width="316" style="width: 316px;">
  </div><div class="carousel-tx tx-sm round f a"><i>2</i>/4</div><div class="carousel-dot f a"><span class="dot round"></span><span class="dot round active"></span><span class="dot round"></span><span class="dot round"></span></div></div>
  <div class="caption">Additional caption text</div>
</div>

slide gallery

<div class="gallery swipe">
  <div class="swipe-inner">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjPpU0c9gp0NqV7A4TrwbzO8HbebNrr_5O8JX_t_ZSzdHdnUSOXbzdJP1k8PbuaaY_JHOdLzYXN0ANbA52MQxxKUiTf72Ny5W-BNRBCTYoqj0CIz4-ygI7wjLBkMEEobLpUqgRAgA4gQ8f5Fs0922TOL5gmwAY-UynTA51-4lnxj5geJYo3nh3MejnA/s1600/cat-01-ls.jpeg" title="Igniplex Carousel Image">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6270fgNeJ8BNjmOfr1dmmbVYfSYQPMnfIozY1ALcIot0nxvgZWKjpoyMSB3A2QkNik1W-0Bb8T-7409csdpI_EfA8naQK56SNnJDJfl3pNZ8AditsQafzC2COsNMpUaU-1q_lrb-fh1igD4E6j3LlZjDeQ3vFyRC7NLJqGLQIQe-oDdzvct2eEE_PtA/s1600/cat-02-ls.jpeg" title="Igniplex Carousel Image">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaz-H_3oPLCJP4cc2eM-CMg7LbMX9Guo_fkr3Zb6YqFS52Y7Pf4PCDdYTd_2QnJ1jggyjF-AEhJoN-4X1XZSUCzdL1rVcXKD9jCqG5eEk-ogr4xpWORc6zEW_SR-6EjOVIJaAMV8vpiBvBPchXqR-z70dIq13HCvYK8ZS-O2ZXKn4KHzY1sxRtW2jmQ/s1600/cat-03-ls.jpeg" title="Igniplex Carousel Image">
    <img alt="Igniplex Carousel Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_wyeY48a0in932H1eg4e41XzX-1UnAbA5VbsuNYQ9Dc2ntVUfl9xiPTDZKUFJCIdOdkzYywCWn2W6Z2U5nLDqtfMQjHC8fKLz6T9AxqH69GHrSgCZnyzj5Mg6cUA0uo3TD0rQgDYNFS3zhADLEykZT47dyZtd2UQcdqSqkLUiPsVXD1M9ojdgGfNLA/s1600/cat-04-ls.jpeg" title="Igniplex Carousel Image">
  </div>
  <div class="caption">Additional caption text</div>
</div>

Tab post

<div class="tabs">
  <div class="arrow prev pointer a">❮</div><div class="arrow next pointer a active">❯</div><ul>
    <li class="current">First Tab</li>
	<li>Second Tab</li>
	<li>Third Tab</li>
    <li>Fourth Tab</li>
  </ul>
  <div class="content visible">
    Content of the first tab (1st).
 </div>
  <div class="content">
    Content of the second tab (2nd).
  </div>
  <div class="content">
    Content of the third tab (3rd).
  </div>
  <div class="content">
    Content of the fourth tab (4th).
  </div>
</div>

Accordion

<details class="accordion" open="open">
  <summary>Accordion Open By Default</summary>
  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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</details>

spoiler text

<details class="spoiler">
  <summary>Spoiler</summary>
  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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</details>

lazyload youtube code

<div class="youtubelazy" data-embed="dN1uTXrgaDY"><figure><img alt="Youtube video player" src="https://img.youtube.com/vi/dN1uTXrgaDY/sddefault.jpg" title="Youtube video player" class="lazyloaded"></figure></div>

you can also use this lazy yt player

go to code

how to apply template in our website

go to theme options and click on edit html
open my theme in any text editor app like trebedit
now come to theme section and select all code then pre 0 but first 🙂 don't forget to chenge mobile mode to desktop mode
if you are not using h@cker keyboard app now copy all code from my igniplex theme then paste on edit html section
this process helps to remove all previous gadget 👍🏻

customization under the edit HTML section

here you need to Chenge meta tag to provide proper information about your blog to google it is necessary bicouse google also use these Meta tag as ranking factor

meta image

it is a social preview image show when you share your homepage url so you can custmize your custom home page image

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisteIIVfV4hUWUPbhrr5Wzjue4hAhtXOM5PJ9UzQEf2oowb3Rxw1BpzI5iLTKjGA5ICJQPKBGkcTF4lAWRBPOQRHuND2AfS1yMjSPuBLFVhfc_q0s-A3y1DBS__dH1P_RHpXzn0XNELfy8/s1600/Igniplex-Documentation.png' property='og:image'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisteIIVfV4hUWUPbhrr5Wzjue4hAhtXOM5PJ9UzQEf2oowb3Rxw1BpzI5iLTKjGA5ICJQPKBGkcTF4lAWRBPOQRHuND2AfS1yMjSPuBLFVhfc_q0s-A3y1DBS__dH1P_RHpXzn0XNELfy8/s1600/Igniplex-Documentation.png' name='twitter:image'/>

Add google varification code with xx if you want if not you can leave

<b:comment>TRACKING CODE</b:comment>
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxx' name='msvalidate.01'/>

Alert box