Membuat Live Demo Template Di Halaman Statis

Putra Ngawi

September 22, 2020 September 25, 2020

Live Demo Tool yang sangat sederhana ini, saya dapatkan dari salah satu senior blogger, Kompi Ajaib, beberapa hari lalu. Cara pemasangannya mudah sekali, dengan tampilan reponsive. Tool ini juga mudah dipahami pengaturannya, terutama bagi pemula 😉

Daftar isi

Fungsi?
Keunggulan?
Pemasangan
Penerapan
Pengaturan

Fungsi Live Demo Template:

Live Demo Responsive Tool ini merupakan live tool untuk menampilkan sebuah halaman Blog/website lain didalam blog sendiri tanpa harus beralih ke halaman situs tersebut dengan memanfaatkan iframe.






Keunggulan Tool ini:

Seperti kebanyakan orang yang akan menggunakan & memasang live demo tool sering kali mengalami kendala dalam penerapan dimasing-masing pada blog mereka. Dengan memanfaatkan <iframe>, anda tidak perlu lagi repot-repot melakukan pengeditan & penambahan kode script pada template. Cukup copy & paste, lalu ikuti tutorial berikut ini.

Pemasangan:

Login ke blogger anda
Buat halaman baru



Buat judul halaman tersebut (e.g: demo)
Copy & Paste kode berikut ke dalam halaman yang barusan di buat:

<style type='text/css' scoped=''>
/*<![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/AVvXsEiQm7eV-s1xuWMwVW-VZ2l1tn2wt47YILPX0NOSnWEUyZrFrF2gX-uON9VOIUoawEM7Nfr2dRFZhm8rqu5ybNpG99VhlcoRVsDnH9dbT706XyZsw_-e3iaUTTu6OQJ7ELmmvDgaCJhH4Vs/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/AVvXsEjwkDroafRQjxuCK1VLzqCku2hfTeCZbqBiOVHBzliXTK0BxiMcg5abqYqMLW63UZH57xX5ELB1yET5tzKXnBvWPu9Wm8mjXWK1f6Bn1BDoYBfhu3lvwuDF36rA7nZa1tz5dWZ6SPlavBo/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/AVvXsEjwkDroafRQjxuCK1VLzqCku2hfTeCZbqBiOVHBzliXTK0BxiMcg5abqYqMLW63UZH57xX5ELB1yET5tzKXnBvWPu9Wm8mjXWK1f6Bn1BDoYBfhu3lvwuDF36rA7nZa1tz5dWZ6SPlavBo/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXRfvXVocPCHJErpn-xPWUyV-v6uS9AmJgZr1U_z84akDN2tPRlPXuK_eHgbTbfcxSD1ZHlJHYL4Ezf5FcoLhibpxFbzjnU-YxwScaYvDo3xrkxWI9ChRZz5mM1z1rh5LE2X5zdWhF3ys/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXRfvXVocPCHJErpn-xPWUyV-v6uS9AmJgZr1U_z84akDN2tPRlPXuK_eHgbTbfcxSD1ZHlJHYL4Ezf5FcoLhibpxFbzjnU-YxwScaYvDo3xrkxWI9ChRZz5mM1z1rh5LE2X5zdWhF3ys/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/AVvXsEj_7BaAyP2GIudUpf_WX02xxbHiHRMP8ksic4nPVrQc48yujiHmENwtRmca9IY8qRdcbRyFsgnSLWSP_lsvP7tJzVtgNWhnMkqWhOTqgH1711X7suKqxeovNMuV_W-8syR3yRd2tDbphvY/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='https://warkop-indie.blogspot.com/'><img alt='Warkop Indie' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGF0Qf-id3Q3qUiWVfzJ3NH0qY4uK1R4ta-XxwMQr7pV48xlTzntMUzNm0GTz5AfB6EBZH90no5k86tM_bzTo8e3Oefj8Msza5BuangTwNxzvkbgC4ETINIV2qkHTfZ5MrIzHE4RxDX9Eh/s1600/demo-template.jpg' title='mftemplates' width='200'/></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>


Lalu save atau publikasikan


Pengaturan:
Pertama

Cari & sesuaikan URL Homepage dan Logo blognya pada kode berikut ini:

<a class='logo' href='https://warkop-indie.blogspot.com/'><img alt='Warkop Indie' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGF0Qf-id3Q3qUiWVfzJ3NH0qY4uK1R4ta-XxwMQr7pV48xlTzntMUzNm0GTz5AfB6EBZH90no5k86tM_bzTo8e3Oefj8Msza5BuangTwNxzvkbgC4ETINIV2qkHTfZ5MrIzHE4RxDX9Eh/s1600/demo-template.jpg' title='Warkop Indie' width='212'/></a>



Kedua:
Beberapa custom template akan ada sedikit error dimana sebagian tampilan live tool ini tidak muncul, bisa di karenakan css display widget, menu navigasi, sidebar, dll. belum di atur. Untuk mengatasi masalah tersebut, cari dan modifikasi kode css pada live demo tool yang tadi sudah anda buat:
.mega-wrapper,.post-title,.postmeta,.creditpic{display:none}

e.g: Menambahkan beberapa kode css template utama untuk disembunyikan (misalnya: sidebar).
========================================================================================================
.mega-wrapper,.post-title,.postmeta,.creditpic, navigation-menu, .navigation-mobile, .header, .dark-mode, .followByEmail,#nav-widget,.sidebar{display:none;}




Penerapan:
format penulisan di dalam postingan untuk menampilkan live demo template. Silahkan gunakan format di bawah ini untuk URL link demo template anda:

Format penerapan live demo template:
url-halaman-static-demo-template.html?url=url-live-template
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 
Contoh:
https://warkop-indie.blogspot.com/p/about-demo.html?url=https://nhiddayah.blogspot.com


Lihat Demo



Sekian, semoga bermanfaat

Source: Kompi Ajaib

WARKOP INDIE

Membuat Live Demo Template Di Halaman Statis

Fungsi Live Demo Template:

Keunggulan Tool ini:

Pemasangan:

Pengaturan:

Penerapan:

Sekian, semoga bermanfaat

Posting Komentar