สำหรับในบทความนี้ผมจะนำเสนออีก 1 วิธีในการติดตั้งเครื่องเล่น MP3 ลงใน Blogger ซึ่งตามมุมมองของผมคิดว่าวิธีนี้เป็นวิธีที่ง่ายที่สุดเมื่อเทียบกับหลาย ๆ วิธีที่ได้กล่าวมาแล้ว โดยในที่นี้ก็จะใช้บริการของ mediaplayer.yahoo.com
ถ้าหากคุณต้องการติดตั้งเพลงเพื่อเป็นสีสันให้กับ blog ของคุณก็ดำเนินการตามขั้นตอนต่อไปนี้ได้เลยครับ
ขั้นตอนการติดตั้ง yahoo mediaplayer บน Blogger
ขั้นเตรียมการ
1. เตรียมไฟล์ MP3 ที่คุณต้องการเล่นบน blog ของคุณ
2. Upload ไฟล์ MP3 ขึ้นไปบน Free Host ที่อนุญาตให้ทำ Hotlink แนะนำ Free File Host ต่อไปนี้
http://www.mailboxdrive.com/ (ไม่ต้องลงทะเบียน) (Bandwith: Unlimited)
http://www.fileden.com/(ต้องลงทะเบียน) (Bandwith: 5GB /เดือน)
http://kiwi6.com/ (ไม่ต้องลงทะเบียน) (Bandwith: 500MB /วัน)
http://www.upload-mp3.com (ต้องลงทะเบียน)
http://www.opendrive.com(ต้องลงทะเบียน)
โดยส่วนตัวแล้วแนะนำให้ฝากกับ mailboxdrive ครับ
3. เมื่อฝากไฟล์จนครบแล้ว ให้คัดลอก URL ของเพลงเตรียมเอาไว้สำหรับติดตั้ง โค้ดที่ได้จะคล้ายกับโค้ดด้านล่าง
http://yourhost.com/yoursong.mp3
4. ขั้นสร้าง Playlist และโค้ดสำหรับติดตั้ง บน Blogger
ให้นำ URL ของเพลงในขั้นที่ 3 มาสร้างโค้ด Playlist โดยใช้โค้ดต่อไปนี้
<a href="http://yourhost.com/yoursong1.mp3">ชื่อเพลง1</a>
<a href="http://yourhost.com/yoursong2.mp3">ชื่อเพลง2</a>
<a href="http://yourhost.com/yoursong3.mp3">ชื่อเพลง3</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
ถ้าต้องการให้มีหลาย ๆ เพลง ก็เพิ่มโค้ดด้านล่างนี้เข้าไปได้เรื่อย ๆ
<a href="http://yourhost.com/yoursong.mp3">ชื่อเพลง</a>เมื่อสร้างเส็จแล้วจะได้โค้ดดังตัวอย่างด้านล่าง ( สร้าง Playlist โดยใช้ 4 เพลง )
<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>ขั้นการติดตั้ง
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
5. การติดตั้ง บน Blogger ทำโดย Log in Blogger เข้าไปที่ >> ไปที่แผงควบคุม >> การออกแบบ >> องค์ประกอบของหน้า
จากนั้นเพิ่ม Gagdet ชนิด HTML/จาวาสคริปต์ ในตำแหน่งที่ต้องการจากนั้นวางโค้ดในขั้นที่ 4 ลงไปและบันทึก
เมื่อจบขั้นที่ 5 ถือว่าการติดตั้งเสร็จสิ้นแล้ว ให้คุณทดสอบดูว่าสามารถเล่นเพลงได้ตามปกติหรือไม่
6. ขั้นสุดท้ายเป็นการปรับแต่งการแสดงผล
6.1 จะเห็นว่าถ้าไม่มีการปรับแต่งเพิ่มเติม ชื่อของแต่ละ Plalist จะติดกันเกินไป ดูแล้วไม่สวยงาม
เราแก้ปัญหาในกรณีนี้โดย ใช้แท็ก <br/> เข้ามาช่วยโดยแทรกลงไปในโค้ดเดิมดังนี้
<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<br/>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<br/>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<br/>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
ผลที่ได้จะเป็นดังรูปด้านล่าง
หมายเหตุ แท็ก <br/> เป็น HTML แท็กที่ใช้สำหรับตัดข้อความให้ขึ้นบรรทัดใหม่
6.2 แต่ถ้าในกรณีที่ไม่ต้องการให้แสดง Link ของ Playlist และต้องการให้แสดงเพียงตัว Player เท่านั้นให้ใช้โค้ด
<div style='display:none;'>
<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
</div>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
ผลที่ได้ก็จะมีเพียงตัว Player เท่านั้นและสามารถเล่นเพลงต่าง ๆ โดยเล่นจากตัว Player โดยตรง
หมายเหตุ
หากใครมีปัญหาเรื่องการปรับระดับเสียงของ Player ให้กด Shift + ปุ่มขึ้น/ลง เพื่อปรับระดับเสียงแทนการใช้เมาส์
No comments:
Post a Comment