สำหรับคนที่มี Url ของไฟล์เสียง .mp3 แล้วอยากจะทำ Playlist เล่นเพลงในบล็อกของ blogger หรือ blogspot วันนี้ผมมีโค้ดง่ายๆ ให้ลองเอาไปใส่ในบล็อกเพื่อสร้างเครื่องเล่นเพลงเอาไว้ฟังกันดูครับ โดยปกติการใส่เครื่องเล่น MP3 ลงใน Blogger เราจะใช้โค้ดซึ่งเป็นตัวเล่นที่สามารถเล่นได้ทีละเพลงกันโดยส่วนใหญ่ แต่ถ้าอยากจะใส่เป็น Playlist เล่นได้ครั้งละหลายๆ เพลงก็สามารถทำได้เช่นกันครับ ซึ่งเมื่อก่อนจะมีของ Mixpod ซึ่งเป็นเว็บให้บริการสร้าง Playlist ให้เราเอาไฟล์นามสกุล Mp3 ไป Ad แล้ว Embed โค้ดมาใส่ในบล็อก แต่ปัจจุบัน Mixpod ยกเลิกการให้บริการไปแล้ว
สำหรับวิธีที่ผมจะนำมาบอกนี้ก็ไม่ยุ่งยากอะไรครับ เพราะจะมีโค้ดบังคับอยู่แค่ 2 ส่วน คือโค้ดในส่วนของการบังคับให้แสดงตัวเครื่องเล่น กับอีกส่วนคือโค้ดซึ่งเป็นตัวเครื่องเล่น Playlist หากใครสนใจก็ลองทำตามกันดูครับ
อันดับแรกให้เข้าไปที่หน้าแม่แบบแล้วคลิกที่แก้ไข HTML หาโค้ดคำว่า
</head>
สำหรับคนที่หาโค้ดไม่เจอก็ให้ลองทำตามวิธีนี้ดูกันครับ ให้เอาเม๊าท์ชี้ไปในช่องโค้ดแม่แบบแล้วคลิกซ้าย 1 ครั้ง เสร็จแล้วกด Ctrl กับ F จากแป้นพิมพ์ จากนั้นให้พิมพ์คำว่า </head> ลงไปในช่องแล้วกด Enter ก็จะเจอโค้ดครับ
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/> <link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>
หลังจากเจอโค้ดคำว่า
</head> แล้วก็ให้ก็อปปี้โค้ดด้านบนนี้ไปวางไว้เหนือคำว่า
</head> เสร็จแล้วให้กดบันทึกแม่แบบ
จากนั้นให้เข้าไปที่หน้าการออกแบบ แล้วเลือก Gadget แบบ HTML / จาวาสคิปต์ เสร็จแล้วก็อปปี้โค้ดตัวเล่น MP3 Playlist ด้านล่างนี้วางลงไป หรือใครอยากจะเอาไปใส่ในตัวบทความก็ได้ครับ โดยไปที่หน้าบทความแล้วกดที่ HTMlL ที่อยู่ตรงซ้ายมือแล้ววางโค้ดด้านบนลงไปในช่องเขียนบทความ
<div class="mbl"> <div class="mbl_player" id="mnplp"> <div class="mbl_art_bg"> </div> <!--artist on background--> <img alt="" class="mbl_cover" src="" /><!--album cover--> <span class="mnpl_title"></span><!--song title--> <span class="mnpl_author"></span><!--artist--> <!--sound--> <br /> <div class="mnpl_volume_min"> </div> <div class="mnpl_volume"> </div> <div class="mbl_volume_max"> </div> <div class="mnpl_toolbar"> <div class="mnpl_tlb_prev"> </div> <div class="mnpl_tlb_stop"> </div> <div class="mnpl_tlb_next"> </div> <div class="mnpl_current"> </div> <div class="mnpl_long"> </div> <div class="mnpl_all"> </div> </div> <div class="mbl_playlist"> </div> </div> </div> <script type="text/javascript"> $(function(){ $('#mnplp').mnplp({ 'volume': 80, 'playlist':[ {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"} ] }); }); </script> <style> .mbl_player { width: 500px;} .mbl { float: left; width: 520px; border-top: 1px solid #d2d2d2; margin-bottom: 0px; padding: 0px; } .mbl_player .mnpl_current { padding: 2px!important; padding-left: 10px!important; } .mbl_player .mnpl_all, t { padding: 2px; }</style></div><div>
สำหรับตัวโค้ดเครื่องเล่น MP3 ต้องมีการปรับเปลี่ยนเล็กน้อยดังนี้
title ใส่ชื่อของเพลง
author ใส่ชื่อศิลปิน
cover ใส่ URL ภาพปกอัลบลั้ม เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqc1245lpn95tDesZhAO2B38zB5DrZaKz-77jenEjbuc8x2GXeyOqYRE2Uxfb7taC8Z6bvWo6fWiWZgaL0qSmf275xsD500Lh0aMeOQ-_CeL9f9GPgtJBrHrfNNZyE8R9CJ-IX7VpMryE/s1600/Thumb1.jpg
background ใส่ URL ภาพพื้นหลัง เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVb3s3vT85pYebh_FYQH0Rbap4FfTokB3VPbeVct401LsWjloippjZYNhsN4TXvo3GNBmkG8eEj-kAlmgzd8RV5Hw7d5lWscLFp8Nd2G8SsX-AeApsP8FMSQQc7KSR3jEH8Cl_ZGYfAUU/s1600/1.jpg
mfile ใส่ URL ไฟล์เสียงนามสกุล MP3 เช่น http://alex-shevchik.com.ua/player/files/music/1.mp3
ตรง width: 540 และ width: 540 สามารถแก้ไขนาดได้ตามชอบใจ
หมายเหตุ : หากต้องการเพิ่มเพลงก็ให้แทรกโค้ดด้านล่างลงไปอีกตามความต้องการแต่ไม่ควรเกิน 20 เพลงครับ
