Tutorial Color-Box Untuk Video Youtube!

Apa khabar semua? Harap sihat k... Hari ini saya akan menerangkan serta menunjukkan cara bagaimana anda boleh menonton video dari youtube di blog anda sendiri tanpa copy paste kod dari youtube lagi. Kebiasaannya, anda akan salin "embedded youtube video code" dan paste dalam blog anda,bukan?

Kali ini anda semua tidak perlu lagi berbuat bergitu. Anda hanya perlukan link video berkenaan. Malah dengan tutorial ini anda akan dapat membuat blog video yang hebat di blogger.com. Tutorial ini memang sesuai bagi mereka yang suka meletakan video yang banyak dari youtube di blog mereka.

Tutorial ini di inspirasikan oleh 'Colorbox jQuery'. Jangan risau kengkawan tutorial ini amat mudah untuk diikuti...elok sediakan secawan kopi atau sirap ke..hehe. Tanpa membuang masa lagi mari kita mulakan dan hasilkan blog blogspot yang mantap dan hebat...

Hasil tutorial ini nanti,lihat disini - Live Demo Disini

Langkah 1 :
- Log masuk ke akaun blogger anda
- Klik dashbord
- Klik layout
- Klik edit html
- Klik download full templates ( kalau takut buat salah lagi ) hehe...
- Klik atau tik kotak expand widget templates
- Cari kod ini : </head>
- Salin atau copy kod dibawah
- Letakan atau paste kod dibawah di atas atau sebelum kod ini </head>

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example5/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

[code source-bloggergallery]

- Klik preview,kalau tiada masalah timbul teruskan
- Klik save templates

Langkah 2 :
- Pergi atau buka laman web youtube pilih video kegemaran anda atau video anda sendiri
- Salin atau copy link / url video berkenaan
* Ingat anda kena ubah link video anda
* Dibawah contoh link asal video youtube anda :

http://www.youtube.com/watch?v=7wLb0K_k7x4

*Dibawah ini pula contoh link video anda yang telah diubah sedikit kod nya :

http://www.youtube.com/v/7wLb0K_k7x4

*Nampak tak perubahan pada link video anda? Nampakan bagus-bagus..teruskan

**Nota Penting!!
- Perkataan ( watch? dalam link video anda mesti dibuangkan )
- Tanda atau kod ( = dalam link video anda mesti dibuang dan diganti dengan tanda ini ( / )
- Ingat jangan lupa ubah link asal video anda,seperti yang ditunjukkan

Langkah 3 :
* Saya andaikan kengkawan semua sudah selesai proses mengubah link video anda
- Klik dashbord - klik posting
- Buat posting baru dalam post blogger anda
- Gunakan kod seperti di bawah ini :

<a class='youtube' href="http://www.youtube.com/v/7wLb0K_k7x4" title="Aizat Pergi Nyanyi">Nak Tengok (Klik sini)</a>

*Gunakan kod seperti di atas ini setiap kali post video anda.
- Warna merah : Gantikan dengan link video anda yang telah di ubah
- Warna biru : Tajuk dan penerangan link video anda
- Publish post anda,dan cuba klik link video anda
- Selesai kawan...amacam cantik tak...hoho

** RINGKASAN TUTORIAL :
- Masukan kod yang diberi- ambil link video youtube - ubah link video - buat posting baru - publish post anda.

Selamat mencuba,kalau ada masalah dalam mengikuti tutorial ini. Sila tinggalkan komen dan pertanyaan anda,jangan malu-malu. Saya akan cuba membantu.

Sekian,wasalam