Marked as work-in-progress (WIP).
The content of this post may be unreliable or incomplete. Please check back later.
Open comments page
Blog post templates and custom elements.
| Live HTML - v1 |
<div contenteditable="true">
<table border="1" cellpadding="0" cellspacing="0" data-type="guitar-tab" style="width:-webkit-fill-available;">
<tr style="display:grid;overflow:auto;">
<td style="display:grid;padding:8px;overflow:auto;">
<guitar-tab-v1>
<pre style="margin:0;">placeholder</pre>
</guitar-tab-v1>
</td>
</tr>
<tr>
<td style="text-align:right;padding:4px 8px;">
<small>guitar-tab (v1)</small>
</td>
</tr>
</table>
</div> |
| html |
|---|
e|----------------------------------- B|----------------------------------- G|----------------------------------- D|----------------------------------- A|----------------------------------- E|----------------------------------- |
| Live HTML - v1 |
<div contenteditable="true">
<table border="1" cellpadding="0" cellspacing="0" data-type="chordyjs-v1" data-kind="blogger-table-component" style="width:-webkit-fill-available;">
<tr style="display:grid;overflow:auto;">
<td style="display:grid;padding:8px;overflow:auto;">
<chordyjs-v1>
<pre style="margin:0;">Placeholder</pre>
</chordyjs-v1>
</td>
</tr>
<tr>
<td style="text-align:right;padding:4px 8px;">
<small>chordyjs-v1</small>
</td>
</tr>
</table>
</div> |
| Live HTML - v1 |
<div contenteditable="true">
<table border="1" cellpadding="0" cellspacing="0" data-type="spectable-v1" style="width:-webkit-fill-available;">
<tr style="overflow:auto;">
<td style="padding:8px;">
<spectable-v1>
<ul>
<li>sample text: some value</li>
</ul>
</spectable-v1>
</td>
</tr>
<tr>
<td style="text-align:right;padding:4px 8px;">
<small>spectable-v1</small>
</td>
</tr>
</table>
</div> |
| Live HTML - v1 |
<div contenteditable="true">
<table border="1" cellpadding="0" cellspacing="0" data-type="fretchart-v2" style="width:-webkit-fill-available;">
<tr style="display:grid;overflow:auto;">
<td style="display:grid;padding:8px;overflow:auto;">
<fretchart-v2>
<pre style="margin:0;">Placeholder</pre>
</fretchart-v2>
</td>
</tr>
<tr>
<td style="text-align:right;padding:4px 8px;">
<small>fretchart-v2</small>
</td>
</tr>
</table>
</div> |
| Live HTML - v1 |
YouTube ID <input id="inYt" value="0cs_wheBIvs"/>
<button onclick="generate()">generate</button>
<div style="height:10px;"></div>
youtube iframe player v1.1
<div contenteditable="true">
<table border="1" data-type="yt-iframe-v1" cellpadding="0" cellspacing="0" style="width:-moz-available;width:-webkit-fill-available;width:fill-available;">
<tbody>
<tr style='display:grid;grid-template-columns:1fr 1fr;max-height:200px;overflow:hidden;'>
<td id="one" style='overflow:hidden;'>Thumbnail</td>
<td id="two" style='overflow:hidden;'>YouTube</td>
</tr>
<tr>
<td style='text-align:right;padding:4px 8px;' colspan='2'>
<span data-original-tag="yt-iframe-v1"><small>@pacolemon/yt-iframe-v1.0.1</small></span>
</td>
</tr>
</tbody>
</table>
</div>
<script> $ = function(selector, node=document) { let nodes = node.querySelectorAll(selector); return selector.startsWith('#') ? nodes[0] : nodes } </script>
<script> L = console.log </script>
<script>
function generate() {
let id = inYt.value.trim();
$('#two').innerHTML = `<iframe width="100%" height="100%" class="BLOG_video_class" src="https://www.youtube.com/embed/${id}" youtube-src-id="${id}"></iframe>`
$('#one').innerHTML = `<img width="100%" border="0" alt="Yuru camp video on YouTube" src="https://img.youtube.com/vi/${id}/hqdefault.jpg">`
}
</script> |