> Parse Kode

Parse Kode

Tool Parse Kode HTML

Kode HTML untuk Postingan Syntax Highlighter

 <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>



Kode Daftar Isi Berdasarkan Label

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">.table-of-content{background-color:#eee;color:#ddd;font-family:Roboto,Arial,Sans-Serif;font-size:13px;font-weight:600;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)} .table-of-content .toc-header{color:#fff;font-family:Roboto;font-weight:600;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial} .table-of-content .toc-header:hover{background-color:#3a3a3a} .table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#444 transparent transparent;transition:all .3s ease} .table-of-content .toc-header.active{background:#3a3a3a;color:#fff} .table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)} .table-of-content .loading{display:block;padding:15px;text-decoration:blink} .table-of-content ol{margin:0;padding:0;list-style:none;transition:initial} .table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#eee!important;transition:initial} .table-of-content a{color:#000;text-decoration:none;font-size:90%;transition:initial} .table-of-content a:visited{color:#000;transition:initial} .table-of-content a:hover,.table-of-content a:visited:hover{color:#179bff;text-decoration:none;transition:initial} .post ol li:before{display:none} </style><br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>var toc_config = {     url: 'http://zonakbm.blogspot.com/',     containerId: 'table-of-content',     showNew: 15,     newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#e05706;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',     sortAlphabetically: {         thePanel: true,         theList: true     },     maxResults: 9999,     activePanel: 1,     slideSpeed: {         down: 400,         up: 400     },     slideEasing: {         down: null,         up: null     },     slideCallback: {         down: function() {},         up: function() {}     },     clickCallback: function() {},     jsonCallback: '_toc',     delayLoading: 0 }; </script><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script></div>

CSS Multiple Page Slide
 /* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

Jquery Multiple Page Slide
 <script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

HTML Multiple Page Slide
 <div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

Drop Caps 
 <span class="first-letter">Your First Letter here</span>

Buttons 
 <div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>

Spoiler 
 <div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Membagi konten post menjadi tiga 
 <div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Memasang Table di postingan 
 <table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>

Iklan di Postingan 
 &lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;

0 komentar

Post a Comment

Subscribe to: Posts (Atom)