Cara Membuat Youtube Upload Widget Di Blogger

Mengkostumisasi terhadap template blog atau memperbaharui fitur-fitur blog yang menampilkan banyak video memang cukup mudah. Terutama bagi anda yang menjalankan blog berkategori hiburan atau pendidikan yang sering menampilkan sumber videonya dari YouTube mungkin tertarik untuk memasang YouTube Upload Widget.

Fungsi dari widget ini yaitu untuk merekam video melalui webcam yang dimiliki pengunjung blog dan secara langsung video yang telah direkam tersebut mampu di unggah dari widget ini ke terusan YouTube mereka. Widget ini sendiri gotong royong telah diluncurkan oleh YouTube Developers sejak juni 2012 namun terakhir kali diperbaharui yaitu pada Mei 2013.

Lihat Demo

---

Persiapan :

---

Pilih salah satu instruksi di bawah ini kemudian salin instruksi tersebut.

1). Kode JavaScript

Klik ganda untuk menyalin

<div id="widget"> </div> <div id="player"> </div> <script>       var tag = document.createElement('script');       tag.src = "https://www.youtube.com/iframe_api";       var firstScriptTag = document.getElementsByTagName('script')[0];       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);       var widget;       var player;       function onYouTubeIframeAPIReady() {         widget = new YT.UploadWidget('widget', {           width: 500,           events: {             'onUploadSuccess': onUploadSuccess,             'onProcessingComplete': onProcessingComplete           }         });       }       function onUploadSuccess(event) {         alert('Video ID ' + event.data.videoId + ' was uploaded and is currently being processed.');       }       function onProcessingComplete(event) {         player = new YT.Player('player', {           height: 390,           width: 640,           videoId: event.data.videoId,           events: {}         });       }     </script>

2). Kode iFrame

Klik ganda untuk menyalin

<iframe id="widget" type="text/html" width="640" height="390"   src="https://www.youtube.com/upload_embed" frameborder="0"></iframe>

Untuk merubah lebar atau panjang dari widget tersebut, ganti width="640" dan height="390" sesuai dengan lebar dari widget blog anda saat ini.

---

Langkah-langkah :

---

1). Masuk ke akun Blogger anda kemudian klik Tata letak.

2). Klik Tambah gadget lalu pilih HTML/JavaScript.

3). Masukkan semua instruksi kedalam widget tersebut.

4). Beri judul kemudian klik Simpan.

Sekarang setiap kali pengunjung datang ke blog anda, mereka mampu melalukan upload video ke YouTube langsung dari blog. Enjoy & Happy Coding!

Referensi : YouTube Upload Widget

Sumber https://8tutorialandroid.blogspot.com/

Memasang Audio Lagu Mp3 Sendiri Dari Dropbox Di Blogger

Saya balasannya merampungkan membuat widget music player yang mampu memutar lagu MP3 atau audio milik anda sendiri. Dan bagi anda anggota band yang aktif menjalankan google blogger, ini yaitu widget yang harus anda pasang dengan tujuannya untuk mempromosikan band anda atau sekedar untuk membuat design blog anda lebih keren.

Setelah sebelumnya berhasil membuat skin wacana video player keren youtube, sekarang saya menamakan ini dengan nama Widget Music Player Keren. Proses pembuatan menggunakan CSS3 dengan tag audio valid HTML5 sehingga akan membuatnya terlihat bersih, cepat dan lebih kreatif. Sementara untuk cara kerjanya akan memutar audio mp3 yang saya host di dropbox. Kenapa tidak di host di Google Drive? karna GDrive tidak support untuk host audio sementara di dropbox anda mampu mengunggahnya sebesar apapun ukuran dari file mp3 tersebut tetapi jangan melebihi ukuran 10GB per file. Untuk demonya silahkan putar audio dibawah ini.

  DEMO

Welcome in Teach How Blog

Smexi Asisten

---

Persiapan :

---

1) Upload lagu Mp3 atau file Audio anda ke folder publik dropbox. Jika anda belum mengetahui cara host audio di dropbox silahkan baca tutorial ini.
Cara simpel hosting file CSS, JS dan Audio di Dropbox

2) Salin aba-aba dibawah ini lalu paste kedalam acara notepad

Klik ganda untuk menyalin

 <div id="musik">   <div class="avatarmusic"><img src="https://lh3.googleusercontent.com/avatarmusik.jpg" alt="avatar" /></div>   <span class="judul">Welcome in Teach How Blog</span><br /><br/><span class="penyanyi">Smexi Asisten</span>     <audio controls preload id="audio">   <source src="https://dl.dropboxusercontent.com/s/yd8pns8g17tiu32/Thblog.mp3" type="audio/mpeg" >   Maaf browser anda tidak mendukung audio, widget keren ini tidak akan bermain. </audio></div> <style type="text/css" > /* Music Player Keren by Teach How Blog © 2013 */ #musik {   background:#069c88;  font-size: 14px;   color: #EFEFEF;   text-align: left;   font-family: "Arial", sans-serif;   height: auto;   border-radius: 8px;   overflow: hidden;   width: auto;   max-width:300px;   padding: 10px; } .avatarmusic img{   background-size: 95px;border:none !important;   float: left;   height: 95px;margin-bottom:10px;   width: 95px;border-radius:10%;padding-right:4px; } .avatar img:hover{opacity:.5; } .judul{color:#f4f3f3;   font-size:1.2em;   font-weight:bolder; } .penyanyi{   color:#f4f3f3;   font-size:1em; } </style> 

3) Ubah semua konten elemen dan atribut didalam aba-aba tersebut menyerupai di bawah ini.
https://lh3.googleusercontent.com/avatarmusik.jpg dengan gambar atau foto anda.
Welcome in Teach How Blog dengan judul dari audio anda.
Smexi Asisten dengan nama penyanyi.
https://dl.dropboxusercontent.com/s/yd8pns8g1/Thblog.mp3 dengan link audio yang dihost di dropbox pada no 1.

Jika sudah akibat salin kembali semua aba-aba yang telah dirubah

---

Langkah-langkah : 

---

1) Masuk ke dashboard akun blogger anda lalu klik Tata Letak

2) Klik Tambah Gadget lalu klik Add HTML/JavaScript

3) Masukkan semua aba-aba kedalam widget tersebut lalu klik Simpan

Widget tersebut akan melakukan buffering pada saat pembaca  berkunjung tetapi tidak membuatnya autoplay. Sekarang coba anda lihat halaman blog lalu putar dan nikmati musik dari lagu audio MP3 anda sendiri yang telah dimasukkan dengan menampilkan foto anda yang membuatnya terlihat lebih kreatif. Kudos & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Cara Membuat Youtube Tv Di Blogger

Cara membuat youtube TV Di Blogger. Setelah sebelumnya anda memasang daftar video dari saluran youtube di widget sidebar blog lalu merubah tampilan video youtube yang keren dan kreatif di dalam postingan blog, maka kali ini saya akan coba untuk menyampaikan cara membuat halaman khusus di blogger yang akan secara otomatis menampilkan video-video yang telah di unggah dari saluran atau channel youtube anda dengan menggunakan jquery YouTube TV yang dikembangkan oleh Jacob Kelley. YouTube TV ini mampu menampilkan video dengan tampilan yang terlihat professional dan keren. Keuntungan dengan membuat halaman khusus video youtube ini akan memudahkan bagi para pengunjung dan pembaca setia blog anda untuk melihat daftar video youtube yang telah anda upload lalu menontonnya langsung di blogspot anda.

Lihat Demo

Cara Memasang dan Membuat YouTube TV Di Blog :
1) Log in ke blogger anda lalu buat sebuah halaman/page baru dengan mode HTML lalu publikasikan dan salin URL dari halaman tersebut

2) Klik Template lalu lakukan back up lalu klik Edit Template
3) Cari tag pembuka <b:skin><![CDATA[/* lalu salin dan pastekan css dibawah ini tepat di atasnya

 <link href='http://jakiestfu.github.io/Youtube-TV/src/ytv.css' rel='stylesheet' type='text/css'/> <link href='http://jakiestfu.github.io/Youtube-TV/demos/assets/demo.css' rel='stylesheet' type='text/css'/> 
 

4) Cari tag penutup ]]></b:skin> lalu salin dan pastekan jQuery YouTUbe-TV dibawah ini tepat di bawah jQuery utama

 <script src='http://jakiestfu.github.io/Youtube-TV/src/ytv.js' type='text/javascript'/> 
 

5) Cari tag pembuka <body> atau <body lalu salin dan pastekan tag kondisional dibawah ini tepat di bawahnya

 <b:if cond='data:blog.url != &quot;Masukkan-URL-Halaman-dari-langkah-1-kesini&quot;'> 
 

6) Cari tag penutup <body> lalu salin dan pastekan penutup tag kondisional ini tepat di atasnya

 <b:else/> <style type='text/css'> #ytvbHR{ top:0; right:0; bottom:0; left:0; z-index:99999; background: radial-gradient(ellipse at center,#1abc9c 0%,#16a085 75%); } </style> <div id='ytvbHR'> <div id='frame'/> <script type='text/javascript'> window.onload = function(){ window.controller = new YTV('frame', { user: 'TeachHowTV', accent: '#FF8C00', autoplay: false, controls: true, fullscreen: true }); }; </script></div> </b:if> 
 

Ganti TeachHowTV dengan nama channel atau saluran youtube anda. Jika belum mengetahuinya, silahkan baca
Cara merubah URL Profil Yotube

7) Klik Simpan Template

Sekarang coba anda buka halaman atau page yang telah dibuat pada langkah 1 maka halaman tersebut akan menampilkan daftar video dari channel youtube anda dan mampu langsung di tonton. Itulah cara membuat YouTube TV di blogger yang secara otomatis akan menampilkan video yang telah di upload maupun yang akan di upload dan ditampilkan pada halaman bloh YouTube TV Tersebut. Happy Coding!

Kudos : Jacob Kelley YouTube TV

Sumber https://8tutorialandroid.blogspot.com/