Tutorial

  • Android
  • Blogger
  • Printer
  • Computer
  • Laptop
  • MedSos
  • Cara Publikasi Vidio Responsif Auto Thumbnail Blogger

    Membuat postingan blog tidak selama berupa teks dan gambar, ada pula postingan blog itu berupa Vidio baik itu Vidio Tutorial, Lagu, atau Filem-filem pendek. Bagian kalian yang mempunya blog dengan nice Tutorial dengan konten berupa teks, gambar dan vidio sebagai pelengkap atau nice blog kalian berupa blog share vidio dari youtube berikut ini adalah tutorial bagaimana cara memasang Vidio pada postingan blog dengan tampilan yang Responsif. 

    Mengapa dikatakan Responsif? 

    Berbeda dengan source kode Embet Vidio yang di dapatkan dari generate kode seperti dari youtube yang ukurannya sudah default dan tidak dapat menyesuaikan layar secara tampilan pada device media yang mengakses. Jadi bisa saja tampilan vidio tersebut responsif pada browser dekstop akan tetapi tidak responsif pada tampilan Mobile Android. Dengan Tutorial Cara Memasang Vidio Responsif ini kita dapat memasang vidio dengan mudah, hanya dibutuhkan ID link source vidio yang akan dipublikasikan misalnya dari Youtube. Secara otomatis size tampilan Vidio akan menyesuaikan dengan resulusi layar device yang mengaksesnya plus Auto Thumbanil gambar pada Preview postingan blog

    Berikut ini tampilan Konten Vidio pada postingan Blog versi Dekstop dan Mobile Android





    Untuk cara memasangnya sangatlah mudah, kalian hanya cukup mengikuti prosedur pemasangan Kode yang Admin bagikan berikut ini: 

    Pertama-tama Salin Kode HTML berikut ini letakkan di atas ]]></b:template-skin>

     
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }

    .video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }


    Hasil penempatannya seperti Screenshot berikut ini



    Kemudian buatlah Entri Baru (Postingan Baru)  dengan mode HTML. Pastekan Kode Berikut ini pada postingan yang akan di add vidio untuk melihat hasilnya sebelum dipublikasikan kalian bisa beralih ke metode Compose.

     
    <div class="separator" style="clear: both; text-align: center;">
    <img border="0" height="0" src="https://i2.ytimg.com/vi/--MASUKKAN ID VIDIO DISINI --/maxresdefault.jpg" width="0" />

    </div>
    <div class="video-container">
    <div style="text-align: center;">
    <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/--MASUKKAN ID VIDIO DISINI --" width="420"></iframe>
    </div>
    </div>
    <div style="text-align: center;">
    <br /></div>


    ID Vidio pada Paragraf HTML pertama berfungsi untuk memberikan auto Thumbnail Gambar pada Preview postingan. Sementara ID Vidio pada Pargraf HTML Kedua berfungsi sebagai source vidio yang akan dipublikasikan. jika kalian tidak membutuhkan Thumbanail dari Vidio yang dipublikasikan maka hapus saja paragraf pertama source kode di atas.

    Contoh Link Source Vidio dari Youtube: https://youtu.be/CvJbyOeIHgY

    Kalian dapat mendapatkan link tersebut dengan cara klik Kanan pada vidio target publikasi, kemudian pilih Salin URL Vidio. Untuk lebih jelasnya perhatikan screenshot berikut ini:



    Setelah itu pastekan Link hasil salinan URL Vidio pada akhir postingan HTML (Jika sudah selesai hapus link source) atau bisa kalian taruh sementara pada NotePad. Salin ID Vidio (perhatikan link URL vidio di atas, teks bold berwarna merah adalah ID Vidio) kemudian pastekan pada Area Penempatan ID Vidio Source Kode HTML (--MASUKKAN ID VIDIO DISINI --).

    Setelah selesai memasukkan ID Vidio langkah selanjutnya adalah seperti biasanya melengkapi Label, Edit Link Tautan Permanen dan Deskpripsi Penelusuran kemudian Publikasikan.

    Jika kalian merasa penasaran dan ingin melihat secara langsung hasil publikas vidio responsif pada postingan blogger kalian dapat berkunjung ke sini: RUMAH TAUSIYAH

    Demikianlah Tutorial Cara Publikasi Vidio Responsif Auto Thumbanail pada postingan Blogger, Bantu suport Blog Tutorial Online dengan cara share link ke media sosial dan sampai jumpa di tutorial selanjutnya.
    Want to subscribe to the Latest Post Update Notification? Please Join with Us Berbagi Tutorial Online WhatsApp Grup or Blogger SEO Knowledge On Google News
    Artikel Terkait:
    Help Support this Blog with Like FansPage, Subscribe and Share. If anything is unclear, please leave a message in the comments column
    Comment Now