bergabung di grup telegram kami

Wendy Code

Beranda
Blogger

membuat halaman demo yang menarik

cara membuat halaman demo yang menarik dengan tools responsive. sebuah blog ber'niche tutorial tidak menarik jika tidak di lengkapi fitur demo

membuat halaman demo yang menarik

sebuah blog niche tutorial tidak menarik jika tidak di lengkapi demo, mengapa demikian, karena setiap orang yang ingin mencari tutorial tentu ingin melihat hasilnya sebelum menerapkan pada blog mereka.

terkadang ada juga hanya menampilkan foto untuk di jadikan demo, tentu pengunjung masi merasa kurang puas jika tidak melihatnya secara langsung.

dan tidak jarang juga pengunjung meninggalkan blog kita karena tidak menyediakan hasil demo pada tutorial yang sudah di buat, hal itu tentu wajar - wajar saja, siapa coba yang mau sudah mengikuti tutorial buang2 waktu pada akhirnya tidak sesuai ekspektasi.

oleh karena itu di sini saya akan memberikan tutorial cara membuat halaman demo yang menarik dan terlihat profesional.

jadi di sini kita akan menggunakan halaman stastis blogger untuk menjadikan iframe demo, tentunya ini akan lebih menarik dan tampak profesional, karna demo yang akan kita tampilkan nanti masi di dalam blog kita.

buat yang masi belum paham di sini saya contohkan saja, misalnya saja saya membuat tutorial cara membuat pop up mirip situs choipan wendy dan tombol demonya di bawah ini

bisa kalian lihat tombol tersebut membuka situs choipan wendy tapi di address bar nya masi domain / url blog ini. sampai di sini saya rasa kalian sudah paham apa yang akan kita buat, jika tertarik ingin membuatnya langsung saja mari simak tutorialnya di bawah ini

Membuat Halaman Demo Yang Menarik

silakan masuk ke blogger kalian pilih halaman dan pilih + halaman baru kalian bisa memberi judul demo agar url nya juga tidak terlalu panjang tentunya nanti. dan gunakan tampilan html bukan tampilan menulis , silakan salin kode di bawah ini ke halaman tersebut


<style type='text/css' scoped=''>
/*<![CDATA[*/
.post-title,.footer, .header, .sidebar, .navMobile, .credit, .mainMenu{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/AVvXsEgshjwG-fvdbg2YpsZAdMLCdqwD3NfjnbJ6ljhKfP5b8HVqmVncBIVfprogeNPDieeEo67ACxvSIoETt7mnSvOOnMH6yR4uJEEfIFaeF6qswnhx5_xZWHVbSqElEqJOOEzf5CaxkSk4XNs/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/AVvXsEgNugFxmyfQ72OaEwh84wTAIiy9SnJxPDl9DEuzHU6NWwDUT-RtHO-nq4kCmRNerzNiB9NB8eevq5aNrWwREFCIU3ObMEPqo80QeQOfvL89saAe9Z3s-IJQsaPtOeAscVnzspQcy4l5unE/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/AVvXsEgNugFxmyfQ72OaEwh84wTAIiy9SnJxPDl9DEuzHU6NWwDUT-RtHO-nq4kCmRNerzNiB9NB8eevq5aNrWwREFCIU3ObMEPqo80QeQOfvL89saAe9Z3s-IJQsaPtOeAscVnzspQcy4l5unE/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigYFqhDkyv5jLrWJ_vlXgrGdqxAuGPkJBvnt-UGcaO4gUGVAfRJllCx1Bw42Qy2EAmA0zBnLsZEkZJLJKucdmbykKJa3fw6776Qk9IAgKiM_wBJnw9xD3BP0jjHCE0zeh88-dQXHc0VjE/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigYFqhDkyv5jLrWJ_vlXgrGdqxAuGPkJBvnt-UGcaO4gUGVAfRJllCx1Bw42Qy2EAmA0zBnLsZEkZJLJKucdmbykKJa3fw6776Qk9IAgKiM_wBJnw9xD3BP0jjHCE0zeh88-dQXHc0VjE/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/AVvXsEgPIejNC8Xfhbo07BhYMcgaW2iFmFgSnZ-_qShcjoxdLgTYxgPbBINEAvqUFEhCmkQEje8XwwnhoQehx9ucLsxZAIr5Zen4abHzaE-VfPJOP-D_qYjDaDNzwTIvl3UvhqI9RnY2e9Gs5ck/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}
@media screen and (max-width:480px){
ul.resize-tool{display:none}}
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='https://www.wendycode.com/'><img alt='mftemplates' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMBO956qMMkOZsAGXhPdoIRVqpi674hPB4ZKNSGR_dS3RlAkZxp-zuZEimIk83J-TRqzfdGSuH0SIqhcJKBAVVStMiVUndwrr638j-N7QiFkc5LjVko3PqXbopPiZ-Gw-dwpGmKslMn3gi/s1600/20210101_093556.png' title='mftemplates' width='212'/></a>
<ul class='resize-tool'>
<li>
<a href='javascript:;' onclick='w1024();'>
<svg style='width:24px;height: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'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w960();'>
<svg style='width:24px;height: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'/>
</svg></a>
<a href='javascript:;' onclick='w600();'>
<svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-7px' 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'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w414();'>
<svg style='width:24px;height: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'/>
</svg></a>
<a href='javascript:;' onclick='w736();'>
<svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' 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'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w320();'>
<svg style='width:20px;height: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'/>
</svg></a>
<a href='javascript:;' onclick='w480();'>
<svg style='width:20px;height:20px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' 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'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='refresh();'>
<svg style='width:24px;height: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'/>
</svg></a>
  </li>
  </ul>
<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>
</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>

bagian yang saya tandai bisa kalian sesuaikan seperti url blog kalian dan logo. jika sudah selesai silakan klik simpan

cara menggunakannya url halaman demo kalian saya contohkan seperti ini https://www.wendycode.com/p/demo.html dan di tambah ?url= dan di tambah url target / tujuan misalnya ke situs choipan wendy yang saya contohkan di atas sebelumnya https://www.choipanwendy.com sehingga keseluruhan akan tampak seperti di bawah ini


https://www.wendycode.com/p/demo.html?url=https://www.choipanwendy.com

sekian cara membuat halaman demo yang menarik dan tampak profesional, semoga bermanfaat dan jika punya pertanyaan silakan tinggalkan komentar di bawah ini

referensi:
https://www.kompiajaib.com/2017/03/membuat-halaman-demo-template-di.html

Baca juga :
tutorial blogger
perlu bantuan?