Cara Meletakkan Video Youtube Di Blogspot

Assalamualaikum dan hai semua.

Kali ni saya nak ajar bagaimana caranya nak letakkan video Youtube pilihan korang kat blog menggunakan widget. Video tu boleh jadi video dari Channel Youtube korang sendiri atau pun video lagu dan sebagainya. 100% menggunakan smartphone korang. 

Jadi apakah itu widget? Ini adalah tutorial pertama saya nak ajar cara menggunakan widget. Jadi saya akan cuba terangkan satu-persatu. Kalau tak faham takpe, boleh tanya kat ruangan komen yang disediakan di bawah ye 😊.

Widget untuk blog ni merupakan serangkap ayat dalam bahasa coding yang mempunyai fungsi-fungsi tertentu. Boleh diubahsuai ketinggian dan lebar atau warna ikut kreativiti. Ia kemudiannya diletakkan di dalam blog bagi mempamerkan fungsinya sebagaimana yang kita nak.

Saya tak pandai buat widget sebab tak pandai bahasa coding pun. Tapi setakat nak ubah tinggi, lebar dan warna tu saya fahamlah macam mana nak cari. Tapi untuk tutorial ni, korang tak perlu pandai dan faham bahasa coding tu pun. Cari di internet, dan kemudian copy paste je. Mudah!

Baiklah. Mari kita tengok bagaimana caranya nak letakkan video Youtube di blog sendiri. Kebiasaannya orang akan letak di sidebar. Nak letak kat bawah blog pun boleh jugak. Terpulang ikut kesukaan masing-masing. Saya lebih suka letak di sidebar kanan blog.

Langkah 1: Log Masuk Blog Anda

Log masuk blog korang macam biasa di blogger.com atau platform yang lain. Macam blog saya ni, saya pakai blogspot je sebab ianya percuma dan mudah. Tak serabut nak fikirkan soal kos domain dan hosting. 

Walaupun buat blog guna blogspot ni mudah je nak buat, tapi mesti ada kat luar sana yang tak faham macam mana cara nak buat kan? Takpe, in sha Allah nanti saya akan buatkan tutorialnya dan sebagai tambahan, saya akan ajarkan macam mana cara nak buat blog macam saya ni. 

Langkah 2: Klik Pada Layout

Selepas login, akan nampak paparan Dashboard, iaitu tempat kita nak ubahsuai blog kita. Cari Layout di sebelah kiri dan klik situ.

Setelah itu, di ruangan Sidebar sebelah kanan, klik pada Add a Gadget. 

Nanti akan nampak pelbagai gadget dengan fungsi tersendiri. Klik terus pada HTML/Javascript.

Langkah 3: Copy dan Paste Kod 

Salin kod yang saya berikan di bawah ini dan kemudian paste kat ruangan Content (rujuk gambar).

<div class="videoWrapper">

    <!-- Copy & Pasted from YouTube -->

    <iframe width="560" height="349" src="https://www.youtube.com/embed/GfOX49B7CCo?si=oBJaNcdlfm_yVkJn" frameborder="0" allowfullscreen></iframe>

</div>

<style>

.videoWrapper {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.videoWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

Letakkan tajuk yang sesuai. Klik Save terlebih dahulu kerana kita perlu mencari kod embed video Youtube yang kita mahu untuk menggantikan kod yang berwarna merah di atas. 

Untuk mengalihkan widget ini mengikut kesukaan korang samada nak letak kat tepi atau kat bawah blog, korang kena guna komputer juga samada suka atau tidak. Saya dah cuba buat guna smartphone, tak boleh la. 

Kat komputer ni nanti, nampak tak titik 3 bertindih dalam gambar di bawah ni. Halakan Cursor tetikus kat situ, klik, dan tarik saja untuk letak kat mana-mana bahagian yang korang suka.

 

Langkah 4: Buka Laman Web

Buka laman web di smartphone korang untuk buka Youtube dan mencari kod embed. Saya selalu guna Chrome. Kod embed berbeza dengan kod link. Dan untuk widget yang saya bagi di atas tadi ni, ia memerlukan kod embed. 

Kalau korang letak juga kod link tu, hasil akan jadi error maksudnya video Youtube yang korang nak tu takkan keluar kat blog. Macam saya alami haritu. Sebab tu saya nak buat tutorial ni supaya kalau saya lupa lagi nanti saya boleh rujuk kat sini je. 

Di ruangan Carian laman web tu, taip youtube.com. Kalau korang auto terbuka aplikasi Youtube, pergi semula ke ruangan Carian tadi dan taip pula m.youtube.com dan tekan Go di keyboard smartphone masing-masing. Kalau kat komputer, tekan Enter.

Langkah 5: Cari Kod Embed

Bila dah buka Youtube tu, pilih je mana-mana satu video Youtube yang korang nak letak kat blog korang tu nanti. Untuk mencari kod embed, sila klik Share.

Kebiasaannya, takkan terus boleh jumpa kod embed pun. Hanya ada Copy Link je kat situ. Tapi ini bukan kod yang kita mahu. 

Cara mencari kod embed, klik 3 titik bertindih di penjuru kanan sebelah atas sekali. Cari Desktop Site dan tandakan ✅️ pada kotak di situ. Nanti paparan laman web akan auto menjadi paparan desktop. 

Pergi semula pada Share tadi dan klik situ. Nanti akan terlihat Embed. Klik situ dan korang akan lihat serangkap kod embed. 

Langkah 6: Salin Url Kod Embed

Setelah klik Embed tadi, akan terpapar serangkap kod embed seperti gambar di bawah. 

Untuk memaparkan video Youtube di blog, kena salin dan paste kod embed yang saya highlight kan ni. Kemudian tukarkan kod berwarna di atas tadi (rujuk langkah 3) dengan kod ini.

Dan jangan lupa klik Save. Siap! Senang kan. 

Untuk lihat hasilnya, pergi semula ke blog korang. Klik refresh. Kalau video Youtube yang korang nak tu dah ada, kira berjaya lah tu. Tahniah sebab berjaya ikut tutorial ni sampai menjadi.

Semoga bermanfaat ye dan sebar-sebarkan jika suka 😊

-------------------------------------------------------

P/S: Kalau kat Chrome tak boleh, korang cuba buat kat pelayar lain pulak ye macam Firefox atau lain-lain. Kadang-kadang dia buat hal. Tiba-tiba tak boleh. Macam saya tadi, nak buat kat Chrome tak boleh pulak 😑. Tiberr.

-------------------------------------------------------