Tạo trang demo template


Dưới body
<b:if cond='data:blog.url == &quot;http://www.phuongblog.com/p/preview.html&quot;'>
<script type='text/javascript'>//<![CDATA[
function getQueryVariable(a){var c=window.location.search.substring(1);var d=c.split("&");for(var b=0;b<d.length;b++){var e=d[b].split("=");if(e[0]==a){return e[1]}}return(false)}window.onload=function(){var b=getQueryVariable("url");var a=getQueryVariable("download");var c=getQueryVariable("lienhe");document.getElementById("view").src=b;document.getElementById("dl").href=a;document.getElementById("buy").href=c};
//]]></script>
<div id='tab-demo'>
<a class='demologo' href='https://www.phuongblog.com'>PhươngBlog Preview</a>
<div class='resolute'>
<button class='gadge desktop active'/>
<button class='gadge tab-square'/>
<button class='gadge iPad'/>
<button class='gadge portrait-phone'/>
<button class='gadge phone'/>
</div>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
<a class='dlbutton' href='' id='dl'>Download Free</a>
<a class='buybutton' href='' id='buy'>Liên hệ</a>
</div>
<iframe id='view' style='margin:0 auto;padding:0'/>
<style>
body {
background:white;
}
</style>
<script type='text/javascript'>/*<![CDATA[*/
$(".resolute .gadge").on("click",function(){var d=$(".resolute .active"),c=$("iframe#view");if($(this).hasClass("desktop")){d.removeClass("active");$(this).addClass("active");c.css({width:"100%"})}else{if($(this).hasClass("tab-square")){d.removeClass("active");$(this).addClass("active");c.css({width:"1039px"})}else{if($(this).hasClass("iPad")){d.removeClass("active");$(this).addClass("active");c.css({width:"783px"})}else{if($(this).hasClass("portrait-phone")){d.removeClass("active");$(this).addClass("active");c.css({width:"495px"})}else{if($(this).hasClass("phone")){d.removeClass("active");$(this).addClass("active");c.css({width:"335px"})}}}}}});
/*]]>*/</script>
</b:if>
<div id='PHUONGBLOG-REDIRECTION'>


STATIC_PAGE
<style type='text/css'>
#PHUONGBLOG-REDIRECTION{display:none}.demologo,a.demologo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq96JBcJyHhcN5fZMM53KEOmImQhm0961j2mpxdkxe_3iXgaWPJhAAPFFiEWZVxt6N0F6rvR4LxB7-qK9w1hiqHnbFcQtf3TDs7_wUgyiKEFkdvfVGBLuDQXh3lIizBi_41GnocE29giY/s1600/Phuong-Blog-logo.png)no-repeat left center;text-decoration:none;text-indent:-9999px;float:left;width:250px;height:27px;background-size:250px;margin:13px 9px 13px 20px}#view{padding:0;margin:0;border:0;position:fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:95%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmq8S0SBzd2EOUseheH4pviWoo1g_LuIokLohM1B16scexTeaB8YmJ9RweySHC6Pf6qwaJYencujFMWpfKoTba2mv8NixaoCqkyBZDgwpcYFv3GjwWYu9SXybA3HCdotYLBmht1-aZQPw/s1600/loader.gif)no-repeat center center;transition:all .4s ease-out}#tab-demo{width:100%;height:54px;top:0;left:0;background:#262626;color:white;font:normal 13px Arial,sans-serif;z-index:99999;position:fixed}.closebutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyQ7GCTGaX7nSuchwncqSHYI6uBgTSwyiu1usphHRcgdCyAIHIimAl7cz2mQPB8NcB7EMgJ8uFXjvb4OqjXW1ROF3snizwpNec4ztL6zxCQX9JII1NdmlIJFxfTG9SuCMr_2luoIEDpU/s1600/close.png)no-repeat 15px 50%;text-align:center;height:50px;color:#999;padding:0 20px 0 35px;line-height:50px;cursor:pointer;color:white;background-size:11px;float:right}a.closebutton{color:#888;text-decoration:none}.closebutton:hover{color:#fff}.dlbutton,a.dlbutton,a.buybutton{text-align:center;padding:0 20px 0 20px;line-height:34px;cursor:pointer;color:white;text-decoration:none;float:right;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;margin:10px;border:0;border-radius:4px;text-align:center;text-decoration:none;background:#00ab6f;cursor:pointer;font-size:13px;letter-spacing:1px}a.buybutton{background:#3483D2!important}.dlbutton:hover{background:#019b65}a.buybutton:hover{background:#1974cf!important}.resolute{float:left;height:30px;margin:10px 0 0 10px}.resolute .gadge{cursor:pointer;float:left;width:30px;height:30px;padding:0;margin:0 5px 0 0;border-radius:3px;outline:0;border:0;background:rgba(255,255,255,.05) url(http://goo.gl/C3q1YA);transition:background-color .15s ease,background-position .15s ease}.resolute .gadge.desktop{background-position:0 -30px}.resolute .gadge.desktop:hover,.resolute .gadge.desktop.active{background-position:0 0}.resolute .gadge.iPad{background-position:-30px -30px}.resolute .gadge.iPad:hover,.resolute .gadge.iPad.active{background-position:-30px 0}.resolute .gadge.tab-square{background-position:-60px -30px}.resolute .gadge.tab-square:hover,.resolute .gadge.tab-square.active{background-position:-60px 0}.resolute .gadge.phone{background-position:-90px -30px}.resolute .gadge.phone:hover,.resolute .gadge.phone.active{background-position:-90px 0}.resolute .gadge.portrait-phone{background-position:-120px -30px}.resolute .gadge.portrait-phone:hover,.resolute .gadge.portrait-phone.active{background-position:-120px 0}.resolute .gadge:hover{background-color:rgba(255,255,255,.1)}.resolute .gadge.active{background-color:#2a95c5}@media(max-width:990px){.resolute{display:none}}
</style>


BÀI POST
<div class="demob"><a class="demo_link" href="http://www.phuongblog.com/p/preview.html?url=LINKBLOGSPOTDEMO/&download=LINKDOWNLOADTEMPLATE&lienhe=https://www.phuongblog.com/p/contact.html" target="_blank">Live Preview</a></div>