Catatan manasuka online belajar ngeblog dan apa saja

29 Januari 2019

Cara Membuat Video Youtube Responsive di Blogspot

Sebenarnya template-template blogspot yang sekarang sudah dapat dikatakan responsive. Dukungan blog agar dapat tampil di smartphone dengan baik sudah didukung oleh template.

Namun. iseng-iseng saat membuka blog kumau.info yang menggunakan platform blogspot lewat smartphone, saya menemukan tampilan video yang belum responsive. Untuk yang lain sudah.

Video Youtube Responsive di Blogspot


Terus terang meskipun menggunakan template lama yang belum responsive, namun sudah saya modifikasi agar menjadi responsive. Ternyata untuk video (iframe) belum :(

Hal yang sama juga terjadi pada blog Kang andre. Untuk video belum responsive sehingga tampilan di seluler hanya terlihat separo. Jadi nggak sempurna dan nggak enak dilihat.

Kalau blog ini telah responsive untuk embed video youtube.

Mengingat banyak artikel yang berisi video itu merupakan artikel-artikel lama dan kesulitan untuk mengedit kembali, maka salah satu cara yang tepat adalah menambah kode CSS saja.

Ada dua cara sebenarnya. Cara lama adalah menambah CSS untuk class <div>. Namun hal itu akan mengubah kembali untuk semua artikel yang berisi video menambah tag <div> untuk memanggil CSS yang berisi class responsive untuk video youtube.

Namun yang paling praktis saat ini adalah hanya menambah CSS untuk iframe.

Mengubah Video Youtube Jadi Responsive di Blogspot


Bagaimana cara membuat video Youtube agar responsive di blogspot?

Cukup tambahkan kode CSS di antara <head>...</head> di bawah ini.

<style type="text/css">
/* CSS VIDEO */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
</style>

kemudian simpan

Catatan: Atur ukuran max-height (%) jika kurang sesuai.

Sebagai contoh video berikut:


Video youtube akan terlihat lebar jika dibuka dari desktop atau laptop, karena menggunakan
class: .post-body iframe {width:100%!important;}.

Namun akan tampil bagus di smartphone karena menyesuaikan lebar layar. Jika dikurangi % -nya, akan terlihat semakin kecil di smartphone.

Cukup simple, bukan?


Cara Membuat Video Youtube Responsive di Blogspot

16 Januari 2019

Migrasi Blog Ke Platform Wordpress

Beberapa blog saya yang menggunakan platform blogger.com (blogspot) telah berpindah ke wordpress dengan hosting sendiri. Terutama blog yang menggunakan domain khusus (custom domain).

Ada beberapa hal yang mendasari migrasi blog tersebut, salah satunya adalah masalah monetize blog yang kurang maksimal.

Dibandingkan dengan blog wordpress yang saya miliki, hasil iklan lebih banyak dibandingkan dengan yang menggunakan blogspot.

Selain itu, beberapa pihak ketiga yang menawarkan artikel review kurang tertarik dengan blog yang menggunakan blogspot, meskipun trafik blog lumayan tinggi.

Migrasi Blogspot Ke Wordpress


Beberapa blog saya yang telah migrasi ke wordpress antara lain:

  • Lentera.my.id
  • Lenterasehat.web.id
  • Lenterabisnis.com
  • Kanal.web.id
Namun masih ada yang bertahan menggunakan blogspot, yaitu:
  • Blog ini, seokecil.my.id
  • Kanalinfo.web.id
  • Kangandre.web.id
  • Daihatsuzebra.web.id
  • sdnkacok02.sch.id
  • kafekolong.com
  • sdnpotoanlaok1.sch.id
Sebenarnya maunya saya pindah semua, namun ada keterbatasan baik itu masalah biaya dan tenaga. Belum lagi proses migrasi yang penuh resiko. 

Baca Migrasi Dari Blogspot Ke WordPress untuk blog Kanal Pengetahuan.



Migrasi Blog Ke Platform Wordpress

Copyright © Catatan SEO Kecil