Membuat Demo Tutorial Blog Di Google Drive

Membuat Demo Tutorial Blog Di Google Drive

Bola Hero Gawai

Membuat Demo Tutorial Blog Di Google Drive

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>

Hasilnya

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

Bagaimana, mudah bukan? Selamat mencoba.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×