Thủ thuật này được chia sẻ rất nhiều trên các trang Blogspot. Tạo trang xem trước và tải về cho jekyll Blog <> DEMO

Các bước thực hiện

Tạo trang Preview

Trong thư mục gốc của Jekyll hoặc trong thư mục /_pages, tạo một file mới có tên preview.html với nội dung:

---
title: Preview template
permalink: /preview/
---
<style type="text/css">
@font-face{font-family:'hdtt';src:url(data:;base64,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);src:url(data:;base64,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) format('embedded-opentype'),url(data:;base64,AAEAAAALAIAAAwAwT1MvMg8SDaAAAAC8AAAAYGNtYXD/gdKxAAABHAAAAGRnYXNwAAAAEAAAAYAAAAAIZ2x5ZtzO05cAAAGIAAAC6GhlYWQMrUveAAAEcAAAADZoaGVhCAsEEgAABKgAAAAkaG10eBUlAIQAAATMAAAAIGxvY2ECVAGeAAAE7AAAABJtYXhwAA0AVAAABQAAAAAgbmFtZZlKCfsAAAUgAAABhnBvc3QAAwAAAAAGqAAAACAAAwNuAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADxCAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQASAAAAA4ACAACAAYAAQAg8A3wGfEI//3//wAAAAAAIPAM8BnxCP/9//8AAf/jD/gP7Q7/AAMAAQAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBFAFEDuwL4ACQAAAEUBgcBDgEjIiYnAS4BNTQ2PwE+ATMyFh8BAT4BMzIWHwEeARUDuwgI/hQHFQoLFQf+4wgICAhOCBQLChUIqAF2CBUKCxQITggIAnMKFQf+FAgICAgBHQcVCwoVB04ICAgIqAF3CAgICE4HFQsAAAEAPwA/AuYC5gA8AAAlFAYPAQ4BIyImLwEHDgEjIiYvAS4BNTQ2PwEnLgE1NDY/AT4BMzIWHwE3PgEzMhYfAR4BFRQGDwEXHgEVAuYJB04IFAsLFAioqAcVCwoVB04ICAgIqKgICAgITgcVCgsVB6ioCBQLCxQITgcJCQeoqAcJwwoVB04ICAgIqKgICAgITgcVCgsVB6ioCBQLCxQITgcJCQeoqAcJCQdOCBQLCxQIqKgHFQsAAAAEAAAASQO3A7cACwAXADEAUQAAJTQmIyIGFRQWMzI2NzQmIyIGFRQWMzI2NxUUBiMhIiY9ATQ2MyEXHgEzMjY/ASEyFhUDFgYHAQ4BIyImJwEuATc+ATsBETQ2OwEyFhURMzIWFwLbFQ8PFhYPDxWTFg8PFRUPDxZJIBf8txcgIBcBCk0QKBUWKBBOAQkXILoEBAj/AAUOBwYOBf8ACAUFBBILkxUPkw8VkgwSBLcPFRUPDxYWDw8VFQ8PFhaPtxcgIBe3FyBODxERD04gFwFFChYI/wAGBQUGAQAIFgoKDAEADxYWD/8ADAoAAAIAAAAABEkDtwAPAC4AAAERNCYjISIGFREUFjMhMjYTERQGIyEUFhUUBiMhIiY1NDY1ISImNRE0NjMhMhYVBAALB/xtBwsLBwOTBwtJNiX+ySQVD/7bDxUk/sklNjYlA5MlNgGAAdsICwsI/iUHCwsB4v2TJjYkOg8PFhYPDzklNiYCbSY2NiYAAAAAAQAAAAAAANxZ6ntfDzz1AAsEAAAAAADUo4OVAAAAANSjg5UAAAAABEkDtwAAAAgAAgAAAAAAAAABAAADwP/AAAAESQAAAAAESQABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAABFAyUAPwO3AAAESQAAAAAAAAAKABQAHgBcALgBLgF0AAAAAQAAAAgAUgAEAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),url(data:application/font-woff;base64,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) format('woff'),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hmMDBjOyIgZ2x5cGgtbmFtZT0iY2hlY2siIGQ9Ik05NTQuODU3IDYyNy40MjhjMC0xNC4yODYtNS43MTQtMjguNTcxLTE2LTM4Ljg1N2wtNDkxLjQyOS00OTEuNDI5Yy0xMC4yODYtMTAuMjg2LTI0LjU3MS0xNi0zOC44NTctMTZzLTI4LjU3MSA1LjcxNC0zOC44NTcgMTZsLTI4NC41NzEgMjg0LjU3MWMtMTAuMjg2IDEwLjI4Ni0xNiAyNC41NzEtMTYgMzguODU3czUuNzE0IDI4LjU3MSAxNiAzOC44NTdsNzcuNzE0IDc3LjcxNGMxMC4yODYgMTAuMjg2IDI0LjU3MSAxNiAzOC44NTcgMTZzMjguNTcxLTUuNzE0IDM4Ljg1Ny0xNmwxNjgtMTY4LjU3MSAzNzQuODU3IDM3NS40MjljMTAuMjg2IDEwLjI4NiAyNC41NzEgMTYgMzguODU3IDE2czI4LjU3MS01LjcxNCAzOC44NTctMTZsNzcuNzE0LTc3LjcxNGMxMC4yODYtMTAuMjg2IDE2LTI0LjU3MSAxNi0zOC44NTd6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZjAwZDsiIGdseXBoLW5hbWU9ImNsb3NlLCByZW1vdmUsIHRpbWVzIiBob3Jpei1hZHYteD0iODA1IiBkPSJNNzQxLjcxNCAxOTUuNDI4YzAtMTQuMjg2LTUuNzE0LTI4LjU3MS0xNi0zOC44NTdsLTc3LjcxNC03Ny43MTRjLTEwLjI4Ni0xMC4yODYtMjQuNTcxLTE2LTM4Ljg1Ny0xNnMtMjguNTcxIDUuNzE0LTM4Ljg1NyAxNmwtMTY4IDE2OC0xNjgtMTY4Yy0xMC4yODYtMTAuMjg2LTI0LjU3MS0xNi0zOC44NTctMTZzLTI4LjU3MSA1LjcxNC0zOC44NTcgMTZsLTc3LjcxNCA3Ny43MTRjLTEwLjI4NiAxMC4yODYtMTYgMjQuNTcxLTE2IDM4Ljg1N3M1LjcxNCAyOC41NzEgMTYgMzguODU3bDE2OCAxNjgtMTY4IDE2OGMtMTAuMjg2IDEwLjI4Ni0xNiAyNC41NzEtMTYgMzguODU3czUuNzE0IDI4LjU3MSAxNiAzOC44NTdsNzcuNzE0IDc3LjcxNGMxMC4yODYgMTAuMjg2IDI0LjU3MSAxNiAzOC44NTcgMTZzMjguNTcxLTUuNzE0IDM4Ljg1Ny0xNmwxNjgtMTY4IDE2OCAxNjhjMTAuMjg2IDEwLjI4NiAyNC41NzEgMTYgMzguODU3IDE2czI4LjU3MS01LjcxNCAzOC44NTctMTZsNzcuNzE0LTc3LjcxNGMxMC4yODYtMTAuMjg2IDE2LTI0LjU3MSAxNi0zOC44NTdzLTUuNzE0LTI4LjU3MS0xNi0zOC44NTdsLTE2OC0xNjggMTY4LTE2OGMxMC4yODYtMTAuMjg2IDE2LTI0LjU3MSAxNi0zOC44NTd6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZjAxOTsiIGdseXBoLW5hbWU9ImRvd25sb2FkIiBob3Jpei1hZHYteD0iOTUxIiBkPSJNNzMxLjQyOSAxODIuODU3YzAgMjAtMTYuNTcxIDM2LjU3MS0zNi41NzEgMzYuNTcxcy0zNi41NzEtMTYuNTcxLTM2LjU3MS0zNi41NzEgMTYuNTcxLTM2LjU3MSAzNi41NzEtMzYuNTcxIDM2LjU3MSAxNi41NzEgMzYuNTcxIDM2LjU3MXpNODc3LjcxNCAxODIuODU3YzAgMjAtMTYuNTcxIDM2LjU3MS0zNi41NzEgMzYuNTcxcy0zNi41NzEtMTYuNTcxLTM2LjU3MS0zNi41NzEgMTYuNTcxLTM2LjU3MSAzNi41NzEtMzYuNTcxIDM2LjU3MSAxNi41NzEgMzYuNTcxIDM2LjU3MXpNOTUwLjg1NyAzMTAuODU3di0xODIuODU3YzAtMzAuMjg2LTI0LjU3MS01NC44NTctNTQuODU3LTU0Ljg1N2gtODQxLjE0M2MtMzAuMjg2IDAtNTQuODU3IDI0LjU3MS01NC44NTcgNTQuODU3djE4Mi44NTdjMCAzMC4yODYgMjQuNTcxIDU0Ljg1NyA1NC44NTcgNTQuODU3aDI2NS43MTRsNzcuMTQzLTc3LjcxNGMyMS4xNDMtMjAuNTcxIDQ4LjU3MS0zMiA3Ny43MTQtMzJzNTYuNTcxIDExLjQyOSA3Ny43MTQgMzJsNzcuNzE0IDc3LjcxNGgyNjUuMTQzYzMwLjI4NiAwIDU0Ljg1Ny0yNC41NzEgNTQuODU3LTU0Ljg1N3pNNzY1LjE0MyA2MzZjNS43MTQtMTMuNzE0IDIuODU3LTI5LjcxNC04LTQwbC0yNTYtMjU2Yy02Ljg1Ny03LjQyOS0xNi41NzEtMTAuODU3LTI1LjcxNC0xMC44NTdzLTE4Ljg1NyAzLjQyOS0yNS43MTQgMTAuODU3bC0yNTYgMjU2Yy0xMC44NTcgMTAuMjg2LTEzLjcxNCAyNi4yODYtOCA0MCA1LjcxNCAxMy4xNDMgMTguODU3IDIyLjI4NiAzMy43MTQgMjIuMjg2aDE0Ni4yODZ2MjU2YzAgMjAgMTYuNTcxIDM2LjU3MSAzNi41NzEgMzYuNTcxaDE0Ni4yODZjMjAgMCAzNi41NzEtMTYuNTcxIDM2LjU3MS0zNi41NzF2LTI1NmgxNDYuMjg2YzE0Ljg1NyAwIDI4LTkuMTQzIDMzLjcxNC0yMi4yODZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZjEwODsiIGdseXBoLW5hbWU9ImRlc2t0b3AiIGhvcml6LWFkdi14PSIxMDk3IiBkPSJNMTAyNCAzODR2NDc1LjQyOWMwIDkuNzE0LTguNTcxIDE4LjI4Ni0xOC4yODYgMTguMjg2aC05MTQuMjg2Yy05LjcxNCAwLTE4LjI4Ni04LjU3MS0xOC4yODYtMTguMjg2di00NzUuNDI5YzAtOS43MTQgOC41NzEtMTguMjg2IDE4LjI4Ni0xOC4yODZoOTE0LjI4NmM5LjcxNCAwIDE4LjI4NiA4LjU3MSAxOC4yODYgMTguMjg2ek0xMDk3LjE0MyA4NTkuNDI4di02MjEuNzE0YzAtNTAuMjg2LTQxLjE0My05MS40MjktOTEuNDI5LTkxLjQyOWgtMzEwLjg1N2MwLTQ4LjU3MSAzNi41NzEtODkuNzE0IDM2LjU3MS0xMDkuNzE0cy0xNi41NzEtMzYuNTcxLTM2LjU3MS0zNi41NzFoLTI5Mi41NzFjLTIwIDAtMzYuNTcxIDE2LjU3MS0zNi41NzEgMzYuNTcxIDAgMjEuMTQzIDM2LjU3MSA2MCAzNi41NzEgMTA5LjcxNGgtMzEwLjg1N2MtNTAuMjg2IDAtOTEuNDI5IDQxLjE0My05MS40MjkgOTEuNDI5djYyMS43MTRjMCA1MC4yODYgNDEuMTQzIDkxLjQyOSA5MS40MjkgOTEuNDI5aDkxNC4yODZjNTAuMjg2IDAgOTEuNDI5LTQxLjE0MyA5MS40MjktOTEuNDI5eiIgLz4KPC9mb250PjwvZGVmcz48L3N2Zz4=) format('svg');font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'hdtt'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-close:before{content:"\f00d"}.icon-remove:before{content:"\f00d"}.icon-times:before{content:"\f00d"}.icon-download:before{content:"\f019"}.icon-desktop:before{content:"\f108"}
body{background:#fff}
#view{padding:0;margin:0;border:0;position:fixed;top:60px;left:0;right:0;bottom:0;width:100%;height:94%;transition:all .4s ease-out}
#tab-demo{width:100%;height:60px;top:0;left:0;background:#34495e;color:#fff;z-index:99999;position:fixed;-webkit-transform:translateZ(0)}
.closebutton{background:#2ecc71;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:0;line-height:60px;cursor:pointer;color:#fff;right:20px;transition:all .3s}
.closebutton:before{content:'\f00d';position:absolute;left:0;font-family:'hdtt';padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
a.closebutton {color:#fff;text-decoration:none;}
.closebutton:hover {background:#27ba66}
.closebutton:hover:before {transform:rotate(360deg);}
.dlbutton,a.dlbutton{background:#3f5870;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:146px;line-height:60px;cursor:pointer;color:#fff;text-decoration:none;transition:all .3s}
.dlbutton:before{content:'\f019';position:absolute;left:0;font-family:'hdtt';padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
.dlbutton:hover {background:#2c3e50}
.dlbutton:hover:before {transform:rotate(360deg);content:'\f00c';}
.demologo,a.demologo{padding-left:75px;font-size:18px;font-weight:700;text-transform:uppercase;line-height:60px;left:20px;position:fixed;color:#fff;letter-spacing:.5px;text-decoration:none}
.demologo:before{content:'\f108';position:absolute;left:0;background:#2ecc71;font-family:'hdtt';padding:0 20px;font-weight:normal;font-size:22px;}
.demologo:after {content: '- Blog chia sẻ thủ thuật';text-transform:capitalize;opacity:0;visibility:hidden;padding-left:5px;transform:scale(0.9) translate(-34px,0);transition:all.3s;}
.demologo:hover:after {opacity:1;visibility:visible;transform:scale(1.0) translate(0,0);}
</style>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(e){for(var r=window.location.search.substring(1),t=r.split("&"),n=0;n<t.length;n++){var a=t[n].split("=");if(a[0]==e)return a[1]}return!1}window.onload=function(){var e=getQueryVariable("url"),r=getQueryVariable("download");document.getElementById("view").src=e,document.getElementById("dl").href=r};
//]]>
</script>

<div id='tab-demo'>
<a class='demologo' href='https://huongdanthuthuat.com/'>HUONGDANTHUTHUAT</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&#39;tab-demo&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;view&#39;).style.top=&#39;0&#39;;document.getElementById(&#39;view&#39;).style.height=&#39;100%&#39;'>Remove</a>
</div>
<iframe id='view'></iframe>

Lưu ý: thay HUONGDANTHUTHUAT bằng tiêu đề blog, sau đó lưu lại.

Khi thực hiện viết bài dùng code bên dưới để dẫn link:

[DEMO](/preview/?url=demo-url&download=download-url "Click here to see preview"){:target="_blank" rel="nofollow"}

Chú ý thay:

  • demo-url : địa chỉ được chuyển tới
  • download-url : địa chỉ tải (download)

DEMO