KonyolBook

Google Drive Video with Custom Player2

Ini adalah tutorial cara pemasangan script video pada blogspot.

A. Edit Theme 

Buka blogger, pilih Theme, lalu edit Theme

1. Gunakan fitur search, cari "/head", tanpa tanda kutip
2. Copy dan paste kode berikut, tepat di atas baris ....../head>, lihat gambar
<link href='https://vjs.zencdn.net/4.3.0/video-js.css' rel='stylesheet'/>

3. Cari lagi kata "/body",
4. Copy dan paste kode berikut, tepat di atas .....body>
<script src='https://vjs.zencdn.net/4.3.0/video.js'/>

B. Membuat postingan Video dari Google Drive

1. Buat postingan seperti biasanya
2. Untuk memasukkan video, pilih tab HTML,
3. Copy dan paste kode berikut
<video class="video-js vjs-default-skin vjs-controls-enabled vjs-big-play-centered" controls="" controlslist="nodownload" data-setup="{}" height="360px" id="my-video" poster="http://LINK_GAMBAR.JPG" preload="auto" width="100%">
<source src="https://drive.google.com/uc?export=download&id=ID_FILE_GOOGLE" type="video/mp4"></source>
</video>
4. Ganti LINK_GAMBAR.JPG dengan link gambar untuk dijadikan thumbnail video (poster)
5. Ganti ID_FILE_GOOGLE, dengan id file di google drive Anda
Untuk mendapatkan id file google drive, caranya buka file di google drive, pada menu titik tiga, klik open in new window.


Untuk fitur hanya bisa diakses via mobile/smartphone, ikuti langkah berikut:
1. Search kembali "/head"
2. Tambahkan kode berikut, tepat di bawah kode yang pertama kali ditambahkan tadi (Bagian A, Langkah 1)
<style>
@media only screen and (min-width: 769px)
{ * {display:none} }
</style>

Untuk lebih lengkapnya, bisa dilihat pada video berikut, terima kasih.



Google Drive Video with Custom Player

Ini adalah contoh Video dari Google Drive, tetapi menggunakan Custom Player
Untuk full screennya mudah-mudahan sudah seperti yang bapak harapkan, :D

Kelebihan:
- Tidak ada link ke youtube tentunya, karena menggunakan Google Drive video
- Bisa menambakan thumbnail sendiri
- Cara pasang cukup copy-paste saja, dan mengambil ID File video dari Google Drive


Kekurangan:
- Butuh proses untuk upload dan meng-embed video
- Gambar thumbnail video harus buat manual



Youtube Video Potong Atas Frame

Ini adalah contoh Video dari Youtube.

Video from Google Drive

Ini adalah contoh Video dari Google Drive.
Untuk full screennya tidak ada cara lain melalui script, cukup dengan aktifkan "auto rotate" pada smartphone, klik logo full screen, lalu putar smartphone menjadi melintang (landscape) seperti biasa.


Kelebihan:
- Tidak ada link ke youtube

Kekurangan:
- Butuh proses untuk upload dan meng-embed video
- Tidak bisa menambahkan parameter video, seperti menghilangkan tombol dll



Video Responsive with More Options

Ini adalah contoh Video dari Youtube.
Kelebihan:
- Cara buat tinggal paste id video dari youtube
- Untuk tampilan awal hanya berupa gambar
- Di-klik langsung play, fullscreen
- Control tidak tampil

Kekurangan:
- Link ke youtube ada, dan ini tidak bisa hilang (optionnya sudah dihilangkan oleh Youtube)


Catatan:
Untuk link ke youtube, bisa diakali dengan memotong frame video atas beberapa pixel, untuk tampilan, silahkan cek link berikut

Play this video

Video Responsive Sample

Berikut contoh video responsive.



shortcode lagi

Berikut ini shortcodes yang sudah dibuatkan:

Heading

Sub Heading

Minor Heading

Largest
Large
Normal
Small
Smallest

Contoh Paragraf

Ini adalah contoh paragraf, rata-kanan-kiri (justify), sudah ada kok di editor blogger. Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Contoh Gambar








Kode-kode

Mel putent quaeque an, ut postea melius denique sit. Officiis sensibus at mea, sea at labitur deserunt. Eam dicam congue soluta ut

Contoh Kutipan Paragraf

Eu mei solum oporteat eleifend, libris nominavi maiestatis duo at, quod dissentiet vel te. Legere prompta impedit id eum. Te soleat vocibus luptatum sed, augue dicta populo est ad, et consul diceret officiis duo. Et duo primis nostrum.

UnOrdered List

  • Blogger templates
  • Templates
  • Blogs
  • Layouts
  • Skins

Ordered list

  1. Login
  2. Visit Namina
  3. Download template
  4. Install
  5. Enjoy!


Youtube Video




Tombol-tombol


Kotak (Bukan Band)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae quo assumenda quaerat quae incidunt eum eius,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae quo assumenda quaerat quae incidunt eum eius,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae quo assumenda quaerat quae incidunt eum eius,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae quo assumenda quaerat quae incidunt eum eius,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae quo assumenda quaerat quae incidunt eum eius,

Tabel

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3