Ditulis oleh: Ditulis pada: 1/12/2016
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.