Documentation
Highlight Code:
<p><mark><mark> (highlight)</mark><br>
<code><code></code><br>
<kbd><kbd></kbd><br>
<samp><samp></samp><br>
<var><var></var></p>
Classic Syntex Highlighter:
CSS
<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>
HTML
<pre class="html"><code><html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html></code><i class="copy"></i></pre>
Multi Tab Syntex:
<div class="tabs syntax">
<ul>
<li class="">HTML</li>
<li class="current">CSS</li>
<li class="">JS</li>
</ul>
<div class="content">
<pre class="html"><code><html>
<head>
<title>Igniel</title>
</head>
<body>
....
....
</body>
</html></code><i class="copy"></i></pre>
</div>
<div class="content visible">
<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>
</div>
<div class="content">
<pre class="js"><code>!function() {
// Estimated Reading Time by igniel.com
const post = document.querySelector('.post-body')[0],
tx = post.innerText,
wpm = 225,
wd = tx.trim().split(/\s+/).length,
tm = Math.ceil(wd / wpm);
if (document.querySelector('.read-time')) {
document.querySelector('.read-time i').innerText = tm;
}
}();</code><i class="copy"></i></pre>
</div>
</div>
Fill Button
<p><button>Button</button> <button class="download">Download</button> <button class="demo">Demo</button></p>
<p><button class="round">Button Round</button> <button class="download round">Download Round</button> <button class="demo round">Demo Round</button></p>
Outline Button
<p><button class="outline">Button</button> <button class="outline download">Download</button> <button class="outline demo">Demo</button></p>
<p><button class="outline round">Button Round </button> <button class="outline download round">Download Round</button> <button class="outline demo round">Demo Round</button></p>
BOX
<h2 id="Kotak__Box">Kotak (Box)</h2>
<div class="box">Box default</div>
<div class="box green">Box green</div>
<div class="box blue">Box blue</div>
<div class="box red">Box red</div>
<div class="box yellow">Box yellow</div>
Quote
<blockquote>Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur</blockquote>
Quote with Author
<blockquote>Karena sesungguhnya sesudah kesulitan itu ada kemudahan.
<footer>QS,. Ash-Sharh:5</footer>
</blockquote>
Images
1.Default Blogger
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjJVmXhBir_3pe5vrayWppyxIl4fHcgqX-MSZ9jc8baDA_ik88CaWmaW_IEg72OzphuxEAbdOzC12q_G7zMvQ5XkAJ7OI07EY6UIMShjpVxa3Udx8xDHnzjl2jKy3OPcgu1HYBxu5U4VKZlft_-soIPbk07-lgIZO5AHRhTxRf_SCCiRcVkqyo66jAOvQ=s1920" style="display: block; margin-left: auto; margin-right: auto; padding: 1em 0px; text-align: center;"><img alt="Default style of image with caption on Blogger editor" border="0" data-original-height="1371" data-original-width="1920" src="https://blogger.googleusercontent.com/img/a/AVvXsEjJVmXhBir_3pe5vrayWppyxIl4fHcgqX-MSZ9jc8baDA_ik88CaWmaW_IEg72OzphuxEAbdOzC12q_G7zMvQ5XkAJ7OI07EY6UIMShjpVxa3Udx8xDHnzjl2jKy3OPcgu1HYBxu5U4VKZlft_-soIPbk07-lgIZO5AHRhTxRf_SCCiRcVkqyo66jAOvQ=s600" title="Default style of image with caption on Blogger editor" width="600"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Default style of image with caption on Blogger editor</td></tr></tbody></table>
2.Figure
<figure>
<img alt="Standard figure HTML tag" src="https://blogger.googleusercontent.com/img/a/AVvXsEjJVmXhBir_3pe5vrayWppyxIl4fHcgqX-MSZ9jc8baDA_ik88CaWmaW_IEg72OzphuxEAbdOzC12q_G7zMvQ5XkAJ7OI07EY6UIMShjpVxa3Udx8xDHnzjl2jKy3OPcgu1HYBxu5U4VKZlft_-soIPbk07-lgIZO5AHRhTxRf_SCCiRcVkqyo66jAOvQ=s600" title="Standard figure HTML tag">
<figcaption>Standard figure HTML tag</figcaption>
</figure>
3. Gallery (Coursel)
<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="706" style="width: 706px;">
<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="706" style="width: 706px;">
<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="706" style="width: 706px;">
<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="706" style="width: 706px;">
</div><div class="carousel-tx tx-sm round f a"><i>1</i>/4</div><div class="carousel-arrow"><button aria-label="Previous" class="tx-75 tx-sm arrow prev round h f a">❮</button><button aria-label="Next" class="tx-75 tx-sm arrow next round f a">❯</button></div><div class="carousel-dot f a"><span class="dot round active"></span><span class="dot round"></span><span class="dot round"></span><span class="dot round"></span></div></div>
<div class="caption">Additional caption text</div>
</div>
4. Gallery (Swipe Portrait)
<div class="gallery swipe portrait">
<div class="swipe-outer r"><div class="swipe-inner">
<img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_URvjV4709PbVsiTycHlf0NXtjdjysih2FgTULnPETr_RLTEj-Y3bcS3-rdzKULAT2Fp8Etzrwz9z4FHp74TR2tbBgsC1Qk8g8-NNfk8epy60YjPTKWzFT4od3seRDkKuIFr1_wYVZVWnebzcM4LHLlOImRK4am5hSTIf2aZH8l91arFxd9xHORX2A/s1600/cat-01.jpeg" title="Igniplex Swipe Image">
<img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaZ2zzaDJfdfG6DgmmW1UYOruezNTSq1-kSag_DSSCHYIw39x5yozLO1RaON_Di79bH_erTMGK9JnvSi0vNAODpBWQkKc-2o1AYedOMJi5cROkQtN-Io7pbHYqB98xdmtIF683LuUCqrpCzigvkOdsjln__e5SN9Jo3yoLUCzNoUlFDdfAVrg-00RAQ/s1600/cat-02.jpeg" title="Igniplex Swipe Image">
<img alt="Igniplex Gallery Style 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1Hn1jP02Rvgbylmmb2qD3ZZ7-Zz92aOA_F4hd8ZmBNhBWVD6z7MirQViJrERSIw5xgdcSvvihaERmB8TlZl85bS8voBu3DHNMsJ8FSDjWy-HYxYKldX-YN45fesf7hNjGxKhLrtYV2z0bwNKT6zAjzcuYXzzINJ88AjXQUqOwSTCM0XqbjogOowQTg/s1600/cat-03.jpeg" title="Igniplex Swipe Image">
<img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaD-lLO1apNOysUr-awjE2ZBUx_IKIBDvMtwE5wcbsFn5F3Cyyt8uGni3bECbeMm5Byf6y-4JrOXHmj0mlBvBGZ9TlNWz3NBE4sJE4FHHOXeD2lKpArgW6rC2sUDzZf0OrX5LCLaRLOgYCZGQJb2qhAxFhW7Y1mVPgcND8pTwYlt6sCCbPEH4Uba8tA/s1600/cat-04.jpeg" title="Igniplex Gallery Style 1">
<img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdn5lnmVf2hrHZf1Qqxo4b_qfhVhZeSD2KjX9ppXlLFcMLj5XNfOFCMnhe6EWbjjTPn3mtwb8dLwfY1p-VFK_T-niZoBy1FCvYAeXn6WiXIt0_zpkQ9o5tQqPTMdiIV6oU7zKOltR6bH1efFZYPcQNynIkkbxUq93x5lmBiUV-Z74dZoj4Oam5lyRfQ/s1600/cat-05.jpeg" title="Igniplex Swipe Image">
</div><div class="swipe-arrow"><button aria-label="Previous" class="tx-75 tx-sm arrow prev round h f a">❮</button><button aria-label="Next" class="tx-75 tx-sm arrow next round f a">❯</button></div></div>
<div class="caption">Additional caption text</div>
</div>
5. Gallery (Simple Swipe)
<div class="gallery swipe">
<div class="swipe-outer r"><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="swipe-arrow"><button aria-label="Previous" class="tx-75 tx-sm arrow prev round h f a">❮</button><button aria-label="Next" class="tx-75 tx-sm arrow next round f a">❯</button></div></div>
<div class="caption">Additional caption text</div>
</div>
Gallery (Grid More):
<div class="gallery grid more">
<div class="grid-inner">
<figure><img alt="Igniplex Grid Iimage" src="https://blogger.googleusercontent.com/img/a/AVvXsEjJVmXhBir_3pe5vrayWppyxIl4fHcgqX-MSZ9jc8baDA_ik88CaWmaW_IEg72OzphuxEAbdOzC12q_G7zMvQ5XkAJ7OI07EY6UIMShjpVxa3Udx8xDHnzjl2jKy3OPcgu1HYBxu5U4VKZlft_-soIPbk07-lgIZO5AHRhTxRf_SCCiRcVkqyo66jAOvQ=s600" title="Igniplex Grid Iimage"></figure>
<figure><img alt="Igniplex Grid 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 Grid Image"></figure>
<figure><img alt="Igniplex Grid 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 Grid Image"></figure>
<figure><img alt="Igniplex Grid 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 Grid Image"></figure>
<figure class="expand pointer r" data-more="2"><img alt="Igniplex Grid Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_wyeY48a0in932H1eg4e41XzX-1UnAbA5VbsuNYQ9Dc2ntVUfl9xiPTDZKUFJCIdOdkzYywCWn2W6Z2U5nLDqtfMQjHC8fKLz6T9AxqH69GHrSgCZnyzj5Mg6cUA0uo3TD0rQgDYNFS3zhADLEykZT47dyZtd2UQcdqSqkLUiPsVXD1M9ojdgGfNLA/s1600/cat-04-ls.jpeg" title="Igniplex Grid Image"></figure>
<figure class="h"><img alt="Igniplex Grid Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDux7zJS4hCluSA9MDhqck8GDqxUZloElVvQwSVp10T4f3pcfF1pyRoJDwUU14zxIKrzAYPbspULhv5jhgI6-qwM_ZQSu3mhWLShJSbti51DjQcs2NZE06wRxQbsD-Ec3t6hjsQaHqByWt/s1600/Igniplex-Documentation.png" title="Igniplex Grid Image"></figure>
</div>
<div class="caption">Additional caption text</div>
</div>
Gallery (Grid):
<div class="gallery grid">
<div class="grid-inner">
<figure><img alt="Igniplex Grid Iimage" src="https://blogger.googleusercontent.com/img/a/AVvXsEjJVmXhBir_3pe5vrayWppyxIl4fHcgqX-MSZ9jc8baDA_ik88CaWmaW_IEg72OzphuxEAbdOzC12q_G7zMvQ5XkAJ7OI07EY6UIMShjpVxa3Udx8xDHnzjl2jKy3OPcgu1HYBxu5U4VKZlft_-soIPbk07-lgIZO5AHRhTxRf_SCCiRcVkqyo66jAOvQ=s600" title="Igniplex Grid Iimage"></figure>
<figure><img alt="Igniplex Grid 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 Grid Image"></figure>
<figure><img alt="Igniplex Grid 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 Grid Image"></figure>
<figure><img alt="Igniplex Grid 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 Grid Image"></figure>
</div>
<div class="caption">Additional caption text</div>
</div>
Tabs
<div class="tabs">
<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>
FAQs (Accordin Open)
<details class="accordion" 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>
FAQs (Accordin Close)
<details class="accordion">
<summary>Accordion</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
<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>
Lazy Youtube
<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>
Dropcaps
<p><span class="drop">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.</p>
Comments
Post a Comment