Cara Gampang Menciptakan Halaman Demo Template Blog + Responsive Tool
Sebelumnya, pernah membagikan tutorial perihal cara Membuat Halaman Demo Template Blog dan Downloadnya. Tuturial ini dimaksudkan untuk para blogger yang bahagia membagikan atau menciptakan template blog. Dengan tutorial ini, seorang blogger dapat menampilkan demo blog di halaman statis mereka sendiri. Keuntungan dengan menciptakan tampilan demo di halaman statis tentunya yakni untuk menambah PAGEVIEW daripada blog kita. Bayangkan kalau sahabat memiliki blog yang membagikan template, sedang disitu sahabat menciptakan halaman statis sebagai demo template yang kita bagikan, tentun pageview daripada blog kita akan bertambah berkali lipat.Namun ternyata sebagian sahabat merasa kesulitan dalam mempraktikkan tutorial di atas. Oleh alasannya itu, pada kesempatan ini, akan menyebarkan kembali cara membuatnya tentunya dengan CARA YANG LEBIH MUDAH. Eits, pada tutorial ini, lebih ajiib lagi, soalnya akan dilengkapi juga dengan responsive tool.
DEMO
Cara Praktis Membuat Halaman Demo Template Blog dan Responsive Tool
OK, eksklusif saja berikut tutorial perihal cara menciptakan halaman demo template blog plus responsive tool. Tutorial ini milik mas Adhy Suryadi pemilik kompiajaib.
#Langkah Pertama
Silahkan sahabat menciptakan halaman statis terlebih dahulu sebagai alamat demo nantinya, menyerupai contohnya dengan judul DEMO. Setelah itu, masukkan instruksi di bawah ini pada halaman tersebut di HTML, bukan COMPOSE
<style scoped="" type="text/css">
/*<![CDATA[*/
#header2,.logo-blog,.creditpic,#credit,#menu,#comments-show,.post-upper,.postmeta{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/AVvXsEhavVQCNUxf3WLIin5-0QPKKyqGwjkEi_YXuwzyBDjzrGLiMq_hDrAZRfUW0UTZZMst7HSoa2N21DX5cg3fr6ihq4A1r8iJC6CzP95r018chvqc5PrTWT_TTaesVGqPM0hcppzsvvTUo9E/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/AVvXsEgkNoFldQtsqse4Pf8vrN5mppcETYfaWNljh8NGq5RCY-hEdzWhZdpaIQ_CWUEv-a0NTachv_bUUM5qPLYjiAmhM3N2f6vkl6l__aV1GIjDk_NcbOarZbYDh7WBwxn_X-wCbDJZJiPYlc4/s1600/close.png) 15px 50% no-repeat #66af33;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/AVvXsEgkNoFldQtsqse4Pf8vrN5mppcETYfaWNljh8NGq5RCY-hEdzWhZdpaIQ_CWUEv-a0NTachv_bUUM5qPLYjiAmhM3N2f6vkl6l__aV1GIjDk_NcbOarZbYDh7WBwxn_X-wCbDJZJiPYlc4/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdbr1nJ7K5do00XuY6sdS7YEqqIPhgUszCRBCZMM_QUsSxVh38cXkyHBHNvQPSRe2OZIvFZga07PGF-Hcm-u5vQ4FgxUbfPiikn15PPLUtXaN220PA9xPc4zfdY_qPHWGLlhM7H4uIro/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdbr1nJ7K5do00XuY6sdS7YEqqIPhgUszCRBCZMM_QUsSxVh38cXkyHBHNvQPSRe2OZIvFZga07PGF-Hcm-u5vQ4FgxUbfPiikn15PPLUtXaN220PA9xPc4zfdY_qPHWGLlhM7H4uIro/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/AVvXsEiKg0-tDnq_gSKVtD66Wg92DDXm8pRSEHM1uq7hvg1-KEY7d4XXfpwzRjfWe5G-K8_FJStdl9zLJNQ6ImB9B2g08rQQAlsa2SeA_Pbts50IetO1pgXx_zkgfLIZxbRt9rEM4_R1pkd_Wa0/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>
<br />
<div id="tab-demo">
<a class="logo" href="http://www.blog.pustakamadrasah.web.id/"><img alt=" pernah membagikan tutorial perihal cara Cara Praktis Membuat Halaman Demo Template Blog + Responsive Tool"color: red;">" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2fS7e-wdndp8_URFsgTF99ZslRNmYkVR3XyVHr-nM9_0zzIp5e4JJYgqdUXPeF4cxvCFvy4QslKD6a5d7_7j5ZojKbG0XfVCbbDvY2U2eWmOH-FErdmeLh_WKuHxbCaRpA59DYielxI/s1600/ngonline06.png" title="Cara Praktis Membuat Halaman Demo Template Blog + Responsive Tool"color: red;">" width="212" /></a>
<br />
<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>
Sesuaikan aksara yang berwarna merah di atas dengan alamat blog sahabat dan juga logo blognya.
#Langkah Kedua
Jika pada langkah pertama sudah selesai, maka kini tinggal cara mempostingnya. Untuk memposting halaman demo template blog, silahkan ikuti susunan alamatnya menyerupai di bawah ini:
url_halaman_static_demo_template.html?url=url_demo_template
Sebagai contoh, lihat susunan alamatnya di bawah ini:
http://www.blog.pustakamadrasah.web.id/p/demo_11.html?url=https://www.pustakamadrasah.web.id/
Bagaimana gampang bukan? Maka silahkan lihat risikonya dan anda akan kaget dengan peningkatan pageview blog sahabat dengan memanfaatkan halaman demo template. Dan tentunya, blog sahabat pun akan semakin ciamik dan terlihat profesional. Selamat mempraktikkan dan biar berhasil ya... Silahkan kalau ada kesulitan, coret-coret di komentar yang telah ada... :)
Sumber https://www.blog.pustakamadrasah.web.id/
