11 Ogos, 2015

Membuat Video Responsif Untuk Blogger


Skrin Video Responsif Untuk Blogger

Dengan penggunaan internet yang kian meluas dan penggunaan smartphone dan tablet yang semakin meningkat naik, adalah penting bagi kita sebagai pemilik blog mempastikan bahawa kandungan blog kita terutama sekali video responsif yang berubah saiznya mengikut spesifikasi skrin setiap telefon pintar yang ada.

Tetapi sebelum itu, harus ingat bahawa Template anda sendiri hendaklah daripada yang responsif. Dan ini adalah salah satu daripada permintaan Google sendiri kerana jika anda menggunakan Template yang responsif, peluang untuk artikel anda muncul dikedudukan yang tinggi di Enjin Carian Google adalah lebih cerah.

Anda mungkin pernah meletakkan video YouTube atau Vimeo kedalam blog dan bila dilawat melalui telefon pintar, saiznya tidak berubah dan sukar untuk digunakan.

Kali ini, saya ingin berkongsi dengan anda cara penyelesaian kepada masalah tersebut dimana apa yang harus anda buat hanyalah dengan Copy Paste kod yang saya sediakan dan apa yang perlu dilakukan setiap kali anda ingin meletakkan video kedalam blog.

Panduan ini memerlukan anda untuk mengubahsuai kod CSS dan HTML diblog anda jadi silakan buat dengan penuh hati-hati.


Cara Membuat Video YouTube Dan Vimeo Responsif Mengikut Skrin

>> Copy Paste kod dibawah ini

.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%;
}

>> Klik 'Template'

>> Pastikan anda Backup Template anda dahulu sebelum meneruskan langkah selanjutnya supaya bila ada kesilapan anda boleh rujuk kepada kod Template/CSS asal anda.

>> Pilih 'Edit HTML'

>> Didalam ruangan kod itu taip 'Control+F' untuk mendapatkan kotak 'search'

>> Taip </b:skin kedalam kotak 'search' tadi untuk pergi ke barisan terakhir kod CSS blog anda

>> Paste-kan kod yang telah saya sediakan diatas.

>> Klik 'Save Template'

>> Dah siap ubahsuai kod CSS anda sekarang setiap kali anda mahu meletakkan video (embed) didalam catatan/posting, anda haruslah meletakkan kod dibawah untuk kod CSS tadi berfungsi dan video anda akan menjadi responsif mengikut kepada saiz smartphone yang digunakan.

<div class="video-container">KOD YOUTUBE/VIMEO DISINI</div>

Untuk panduan visual, sila tonton video yang saya sediakan ini. Pilih untuk lihat secara full-screen supaya lebih jelas ya. Selamat mencuba !



Atas Talian tidak bertanggungjawab keatas komen-komen yang berbaur perkauman, buli atau apa saja yang boleh menyinggung perasaan individu lain. Komenlah dengan hati dan minda yang terbuka tanpa perlu membuat provokasi. Terima kasih diatas lawatan anda, semoga penulisan bermanfaat.