Cara Membuat Halaman Demo Template di Blogger


Halaman Demo Template di Blogger - Membuat Halaman demo template bukanlah hal yang sulit sobat, tentu sangat mudah sekali dengan beberapa tool responsive dalam pembuatannya.

Admin membagikan ini karena request daripada teman teman semua. Jadi admin mencoba untuk membagikannya sekarang.

Oke gmna sudah cukup, Ohh ya 1 lagii, dengan adanya halaman demo template ini, kita tidak memberikan backlink terhadap blog demonya, justru menambah pageviews kita loh sobat..

Oke langsung saja ke tahap pembuatannnya.

Tahap Pertama : 

1. Login ke Blogger
2. Buka Tab Halaman > Buat Halaman baru > Masukkan kode dibawah ini pada tab HTML bukan Compose
3. Masukkan Judul Terserah, Misal "Demo template"

<style scoped="" type="text/css">
/*<![CDATA[*/
.mega-wrapper,.post-title,.postmeta,.creditpic{display:none}
body {background:white;overflow: auto;}
#tab-demo,#view{width:100%;left:0}
.closebutton,.dlbutton,a.dlbutton{text-align:center;cursor:pointer;top:0;height:50px}
#view{padding:0;margin:0;border:0;position:fixed;top:50px;right:0;bottom:0;height:calc(100% - 50px);background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_0pCNzx2ElngyndNvZMgYf0GM5Py8dLLLGOMALVGsWd7tUd6zF0PiMWR3I3SvmKS9XoQDfvfcOV7nMJcCbGiTkQlzIdkNMrKCJzqS7Jllo0BntvytwfjZ6Oji7_Rg_HJfe7MhbKt50qY/s1600/loader.gif) center center no-repeat;transition:all .4s ease-out;box-shadow: 0 0 40px rgba(0,0,0,0.2);}
#tab-demo{height:50px;top:0;background:#222;color:#fff;font:400 13px Arial,sans-serif;z-index:99999;position:fixed}
.closebutton,.demologo,.dlbutton,a.demologo,a.dlbutton{line-height:50px;position:fixed;color:#fff}
.closebutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkqWPD0n73HaRVnr8NXbbskeXDa53h6PSHNw_ojlOQeagP4LzJlTM5cWn73ojnlNmpwlIKKVUvBOgmSzMO7nSPhCVTHPzazIVSNR81clslaml7RQK_ZhSyvCDQi6zSxQMKZAI_N3hZcxc/s1600/close.png) 15px 50% no-repeat #25d0e9;padding:0 20px 0 50px;right:0}
a.closebutton{color:#fff;text-decoration:none}
.closebutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkqWPD0n73HaRVnr8NXbbskeXDa53h6PSHNw_ojlOQeagP4LzJlTM5cWn73ojnlNmpwlIKKVUvBOgmSzMO7nSPhCVTHPzazIVSNR81clslaml7RQK_ZhSyvCDQi6zSxQMKZAI_N3hZcxc/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWrsTrghtr7Egx_I_4eXuM97-22PPqrA83FwiXxlrO7YDwxwOmvWQSPnubffOKbOaJWgqT-5hhuym5ZUwx_kfdv7bj9lxlfnmrvW9q6icLvPQr6hr3s1X8qlrJ6BxZhVjtQYho1UjwJs/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWrsTrghtr7Egx_I_4eXuM97-22PPqrA83FwiXxlrO7YDwxwOmvWQSPnubffOKbOaJWgqT-5hhuym5ZUwx_kfdv7bj9lxlfnmrvW9q6icLvPQr6hr3s1X8qlrJ6BxZhVjtQYho1UjwJs/s1600/download.png) 15px 50% no-repeat;padding:0 20px 0 55px;right:158px;text-decoration:none}
.demologo,a.demologo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQxdzl1yzhTxuJSslgTNEXac4ru0A88Y3-rLR0fBBKLxRgYHHkhl9XZc01eQx7MhG_A838qFHMzZWFCAHF52y2DBjrxJ6CITVW40mewbYFXNhcQfg3J8MHwx6TUZbac8Fib-vKrduMa4/s1600/ki-logo.png) left center no-repeat;padding-left:55px;font-size:17px;font-weight:400;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;left:15px;text-decoration:none}
.logo{display:inline;float:left;}
ul.resize-tool,ul.resize-tool li{list-style:none}
ul.resize-tool{display:inline;float:left;margin:0 0 0 50px!important}
ul.resize-tool li{display:inline;float:left;height:50px;line-height:50px;margin:0 20px 0 0}
ul.resize-tool li svg{vertical-align:middle}
ul.resize-tool li a:active svg path,ul.resize-tool li a:focus svg path{fill:red}
.w1024{width:1024px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important}
.w960{width:600px!important;height:960px!important;position:absolute!important;margin-bottom:50px!important}
.w600{width:960px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important}
.w414{width:414px!important;height:736px!important;position:absolute!important;margin-bottom:50px!important}
.w736{width:736px!important;height:414px!important;position:absolute!important;margin-bottom:50px!important}
.w320{width:320px!important;height:480px!important;position:absolute!important;margin-bottom:50px!important}
.w480{width:480px!important;height:320px!important;position:absolute!important;margin-bottom:50px!important}
/*]]>*/
</style>

<div id="tab-demo">
<a class="logo" href="http://www.chayaeducation.com"><img alt="Chayaeducations" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_OlfDycF2JVpZ0KXNhppG4GO7Z7mQIhnC8068Xi8T2FV7ZzATyfnUHmw1m9-oq8RDODGFkPxbhvnjtz4tl5YMiy6HW-bx4gEyii_cZGw-ghXCJyd7KrImNW3oSykWgXZeH7-IuOayso/s1600/Logo+template+chaya.png" title="Chayaeducation" width="212" /></a>
<ul class="resize-tool">
<li>
<a href="javascript:;" onclick="w1024();">
<svg style="height: 24px; width: 24px;" viewbox="0 0 24 24">
<path d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" fill="#fff">
</path></svg></a>
</li>
<li>
<a href="javascript:;" onclick="w960();">
<svg style="height: 24px; width: 24px;" viewbox="0 0 24 24">
<path d="M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z" fill="#fff">
</path></svg></a>
<a href="javascript:;" onclick="w600();">
<svg style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); height: 24px; margin-bottom: -7px; transform: rotate(90deg); width: 24px;" viewbox="0 0 24 24">
<path d="M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z" fill="#fff">
</path></svg></a>
</li>
<li>
<a href="javascript:;" onclick="w414();">
<svg style="height: 24px; width: 24px;" viewbox="0 0 24 24">
<path d="M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z" fill="#fff">
</path></svg></a>
<a href="javascript:;" onclick="w736();">
<svg style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); height: 24px; margin-bottom: -10px; transform: rotate(90deg); width: 24px;" viewbox="0 0 24 24">
<path d="M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z" fill="#fff">
</path></svg></a>
</li>
<li>
<a href="javascript:;" onclick="w320();">
<svg style="height: 20px; width: 20px;" viewbox="0 0 24 24">
<path d="M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z" fill="#fff">
</path></svg></a>
<a href="javascript:;" onclick="w480();">
<svg style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); height: 20px; margin-bottom: -10px; transform: rotate(90deg); width: 20px;" viewbox="0 0 24 24">
<path d="M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z" fill="#fff">
</path></svg></a>
</li>
<li>
<a href="javascript:;" onclick="refresh();">
<svg style="height: 24px; width: 24px;" viewbox="0 0 24 24">
<path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" fill="#fff">
</path></svg></a>
</li>
</ul>
<a class="closebutton" href="javascript:void(0)" onclick="document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%'">Remove Frame</a></div>

<script type="text/javascript">
//<![CDATA[
function getQueryVariable(e){for(var t=window.location.search.substring(1),n=t.split("&"),r=0;r<n.length;r++){var a=n[r].split("=");if(a[0]==e)return a[1]}return!1}function w1024(){document.getElementById("view").className="w1024";var e=getQueryVariable("url");document.getElementById("view").src=e}function w960(){document.getElementById("view").className="w960";var e=getQueryVariable("url");document.getElementById("view").src=e}function w600(){document.getElementById("view").className="w600";var e=getQueryVariable("url");document.getElementById("view").src=e}function w414(){document.getElementById("view").className="w414";var e=getQueryVariable("url");document.getElementById("view").src=e}function w736(){document.getElementById("view").className="w736";var e=getQueryVariable("url");document.getElementById("view").src=e}function w320(){document.getElementById("view").className="w320";var e=getQueryVariable("url");document.getElementById("view").src=e}function w480(){document.getElementById("view").className="w480";var e=getQueryVariable("url");document.getElementById("view").src=e}function refresh(){location.reload()}window.onload=function(){var e=getQueryVariable("url");document.getElementById("view").src=e};

//]]>
</script>
<iframe id="view"></iframe>


Keterangan.
1. http://www.chayaeducation.com = Ganti dengan link URL blog Sobat
2. Ganti juga Logo nya

<a class="logo" href="http://www.chayaeducation.com"><img alt="Chayaeducations" height="50" src="https://3.bp.blogspot.com/m4Q18_09IY8/WtzJ5aWQeVI/AAAAAAAADPo/qgwPgTUlyOEjz95GFWmk4IVWDslACxA2ACLcBGAs/s1600/Logo%2Btemplate%2Bchaya.png" title="Chayaeducation" width="212" /></a>

Silahkan sesuaikan untuk URL homepage dan logo blognya pada kode berikut:

Tahap Kedua : 
Ini adalah untuk format penulisan di dalam postingan untuk menampilkan tombol demo template. Silahkan gunakan format di bawah ini untuk URL link demo template:

url_halaman_static_demo_template.html?url=url_demo_template
Contoh Penulisan : 

http://www.chayaeducation.com/p/demo-template.html?url=LINK DEMO

Gimana sobat, Mudah kan? Jika bermanfaat, tolong tinggalkan komentar di kolom yang disediakan ya+_+ Terima kasih.




































Komentar











Posting Komentar























Postingan populer dari blog ini









Premium Template LK 21 Movie Streaming




















Gambar







Template Layar Kaca 21 atau LK21 merupakan template yang dipakai oleh Lk21, yang sekarang sudah berganti domain menjadi dunia21.net Download template Film ilegal tersebut menjadi salah satu dambaan bagi para penonton film untuk menonton film film yang muncul. Namun admin tidak akan menjelaskan itu, admin mencoba menjual template yang digunakan oleh lk21, atau dunia21. Simak berikut ini : No Features Template Available 1 Responsive True 2 Mobile Friendly True 3 SEO Friendly True 4 Show Hide Search Box True 5 Ads Ready True 6 Validated Structured True 7 Minimalist True 8 Fast Loading True 9 HTML5 dan CSS3 True 10 Support HTTPS (SSL) True 11 Custum Error 404 page True 12 Related Post With Thumbnail True 13 Responsive Social Share Button True 14 Threaded Comment(Blogger) True 15 Auto Readmore With Resize True  16 Social Media Button True  17 Costum Sitemap True  18 Responsive Fixed Menu True  19 Compatible with major browsers True  20 Dll True Demo     ...








Baca selengkapnya










Spesifikasi GTA - Grand Theft Auto 6 




















Gambar







 Spesifikasi minimum Grand Theft Auto VI: CPU: Core i5-4460 3.2GHz or FX-8350    GPU: GeForce GTX 760 or Radeon R7 260X v3    RAM: 8 GB    Operating System: Win 10 64      DirectX: DX 12    Harddisk Drive: 55 GB    Spesifikasi rekomendasi Grand Theft Auto VI: CPU: Core i7-4790 4-Core 3.6GHz or FX-8370    GPU: GeForce GTX 980 Ti 6GB or Radeon R9 FURY X 4GB    RAM: 16 GB    Operating System: Win 10 64      DirectX: DX 12    Harddisk Drive: 55 GB     Homesite: http://www.rockstargames.com/V/ Publisher: Take Two Interactive Developer: Rockstar Trailer: -








Baca selengkapnya










Cara Menghapus Credit Link Sora Template




















Gambar







Ada banyak cara untuk Menghapus Credit link atau credit footer pada template. Terlebih khusus untuk sora template. Sora template merupakan salah satu website download template yang sangat bagus dan mengesankan, karena bagus dan mengesankan tersebut membuat pemilik template mengunci dan mengencrypt template di bagian credit footer agar tetap terlihat namanya. Cara ini sangat mudah untuk dipelajari, jadii untuk mempersingkat waktu, mari simak apa saja yang harus dilakukan. Hanya untuk pembelajaran saja, Lebih baik tidak melepas credit link untuk menghargai karya si pembuat template.  Cara Menghapus Credit Link Sora Template Ada Beberapa cara untuk menghapus credit link sora template, tapii admin menyediakan 3 cara, jika salah satunya tidak berhasil, maka coba lagii cara berikutnya. Cara Pertama Login Ke Blogger Lihat ke Tab Tema > Edit HTML > Dan Cari kode dibawah ini :  Hapus Kode Berikut dari tanda  <script type='text/javascript'> Sampai Dengan </script> Sete...








Baca selengkapnya