Skip to main content

Membuat Demo Tutorial Blog Di Google Drive

Untuk membuat sebuah demo dari sebuah tutorial blogger seperti widget share dan lainnya, sudah banyak situs penyedia coding playground seperti JsFiddle, Codepen, Liveweave, dan lain-lain yang bisa digunakan secara gratis.

Namun selain dari situs coding playground untuk membuat demo tutorial, kita juga bisa memanfaatkan Google Drive untuk menampilkan demo dari tutorial koding yang kita buat. Namun berbeda dengan situs coding playground yang tinggal memasukan kode-kode HTML, CSS, ataupun javascript, untuk membuat demo koding di Google Drive kita harus membuat halaman web kemudian menghostingnya.

Untuk membuat halaman web di Google Drive, kita bisa gunakan kode di bawah ini:


<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>

</head>
<body>

</body>
</html>

Kode CSS simpan di atas kode </head>. Kode HTML simpan di bawah kode <body>. Dan untuk kode Javascript bisa di simpan di atas kode </head> ataupun di atas kode </body>. Namun perlu diperhatikan, jika kita menyertakan script dari pihak ketiga baik js maupun css maka harus menggunakan https, begitu pun dengan iframe.

Copy kode di atas dan paste di notepad, kemudian lengkapi dengan kode CSS, HTML, dan atau Javascript kemudian SAVE AS dengan file type All Files *.html misalnya demo.html kemudian upload file tersebut di Google Drive.

Sebagai contoh, saya akan menampilkan demo embed youtube video with URL only seperti di bawah ini.


<!DOCTYPE html>
<html>
<head>
<title>Demo Embed Youtube Video With URL Only</title>
<style>
body, html {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0 auto 50px;
  font-weight: bold;
  font-size:24px;
}
.videoyoutube{
    margin:20px auto;
    width:100%;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}
.center{
  width: 600px;
  height: auto;
  position: fixed;
  top: 100px;
  left: calc(50% - 300px);
  text-align: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="center">
<h1>Demo Embed Youtube Video With URL Only</h1>
<div>
https://www.youtube.com/watch?v=j01I9Y8EyoQ
</div>
</div>
<script>
var videoEmbed = {
    invoke: function(){    
        $('.center').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });  
    },
    convertMedia: function(html){
          var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;    
        if(pattern.test(html)){
              var replacement = '<div class="videoyoutube"><div class="video-responsive"><iframe height="281" width="500" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div></div>';
              var html = html.replace(pattern, replacement);
        }
         return html;
    }
}
setTimeout(function(){
    videoEmbed.invoke();
},800);
</script>
</body>
</html>


Untuk meyakinkan, coba saja lihat page source halaman hasil demo di atas.

Bagaimana, mudah bukan? Selamat mencoba.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB