Membuat Demo Tutorial Blog Di Google Drive
Untuk menciptakan sebuah demo dari sebuah tutorial blogger menyerupai widget share dan lainnya, sudah banyak situs penyedia coding playground menyerupai JsFiddle, Codepen, Liveweave, dan lain-lain yang dapat dipakai secara gratis.Namun selain dari situs coding playground untuk menciptakan demo tutorial, kita juga dapat 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 menciptakan demo koding di Google Drive kita harus menciptakan halaman web lalu menghostingnya.
Untuk menciptakan halaman web di Google Drive, kita dapat gunakan instruksi di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Kode CSS simpan di atas instruksi
</head>. Kode HTML simpan di bawah instruksi <body>. Dan untuk instruksi Javascript dapat di simpan di atas instruksi </head> ataupun di atas instruksi </body>. Namun perlu diperhatikan, kalau kita menyertakan script dari pihak ketiga baik js maupun css maka harus memakai https, begitu pun dengan iframe.Copy instruksi di atas dan paste di notepad, lalu lengkapi dengan instruksi CSS, HTML, dan atau Javascript lalu SAVE AS dengan file type All Files *.html contohnya demo.html lalu upload file tersebut di Google Drive.
Sebagai contoh, aku akan menampilkan demo embed youtube video with URL only menyerupai 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, gampang bukan? Selamat mencoba. Sumber https://www.kompiajaib.com/
0 Response to "Membuat Demo Tutorial Blog Di Google Drive"
Posting Komentar