สำหรับคนที่มี 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/AVvXsEj-SOH255Eyrw_hv_RF11W7lGu68MNNyMb1kh5QUKRP9doqJEUirnwaXkQrnr642TNkYlObwwu1656ujbMIEvyDeNeDK1y2bkVUqpjDmZr24YfEWKnhPluFIasmMjTGDKimyoTUoASBLP8Z/s1600/Thumb1.jpg
background ใส่ URL ภาพพื้นหลัง เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZzGDY5pv9K-1Ehb3oSNppb1uelywa2T6xoPXNQYesIOrPUnyuh1RqztlDECrnpncac1aUxLLVvboUhByZz5TbxHIuFa1L2N0ZzNrR1vMgzAiUpGjkTz5z6xuw_BZWVb-JCQwh_gHWAEG/s1600/1.jpg
mfile ใส่ URL ไฟล์เสียงนามสกุล MP3 เช่น
http://alex-shevchik.com.ua/player/files/music/1.mp3
ตรง
width: 540 และ
width: 540 สามารถแก้ไขนาดได้ตามชอบใจ
หมายเหตุ : หากต้องการเพิ่มเพลงก็ให้แทรกโค้ดด้านล่างลงไปอีกตามความต้องการแต่ไม่ควรเกิน 20 เพลงครับ
{"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"},
ตัวอย่างเครื่องเล่น MP3 Playlist
4 ความคิดเห็น:
ผมหามานานแล้วครับ ตั้งแต่เจ้า yahoo เค้าปิดตัวลงไปก็หาไม่ได้อีกเลย ขอบคุณจิรงๆ แล้วมันจะเล่นต่อเนื่องอะป่าวครับ
ขอบคุณมากครับ หามานานแร้ว ของผมทำแล้ว แต่ แถบ สไลด์ ด้านข้างขวา ทำไมไม่ขึ้นคับ
help my how can i add more of 5 or 10 music mp3 i playlista thnx
วิธีใส่เครื่องเล่น Mp3 แบบ Playlist ลงใน Blogger >>>>> Download Now
>>>>> Download Full
วิธีใส่เครื่องเล่น Mp3 แบบ Playlist ลงใน Blogger >>>>> Download LINK
>>>>> Download Now
วิธีใส่เครื่องเล่น Mp3 แบบ Playlist ลงใน Blogger >>>>> Download Full
>>>>> Download LINK Pn
Post a Comment