Blogger Trick

Blogger Templates

New Update

วิธีใส่เครื่องเล่น MP3 แบบ Playlist ลงใน blogger

สำหรับคนที่มี 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 ภาพปกอัลบลั้ม เช่น http://3.bp.blogspot.com/-RPQn67dFNNc/UcLbOqIYdQI/AAAAAAAAP84/kogicgOrI1c/s1600/Thumb1.jpg
background ใส่ URL ภาพพื้นหลัง เช่น http://4.bp.blogspot.com/-t2qhJcVS6WE/UcLa8l71ixI/AAAAAAAAP8w/6knCw4sFFWg/s1600/1.jpg
mfile ใส่ URL ไฟล์เสียงนามสกุล MP3 เช่น http://alex-shevchik.com.ua/player/files/music/1.mp3
ตรง width: 540 และ width: 540 สามารถแก้ไขนาดได้ตามชอบใจ

หมายเหตุ : หากต้องการเพิ่มเพลงก็ให้แทรกโค้ดด้านล่างลงไปอีกตามความต้องการแต่ไม่ควรเกิน 20 เพลงครับ


จัดมาแล้ว ThemeForest Blogger Templates ราคา $20

จัดการถอยออกมาแล้วครับกับ Cody Responsive Magazine Blogger Template จากค่าย ThemeForest หลังจากเลือกมานานในที่สุดก็ตกลงปลงใจกับเทมเพลตตัวนี้ เหตุผลเหตุที่ผมเลือกซื้อ Cody ก็เพราะโดยส่วนตัวผมชอบเทมเพลตโทนขาว-แดง อีกอย่างเทมเพลตจากค่ายธีมฟอเรสต์ส่วนใหญ่ก็สวยๆ ทั้งนั้น ตอนนี้ก็กะว่าจะเอามาทำบล็อกแนวท่องเที่ยวแล้วจดโดเมนสวมแทน .blogspot สำหรับค่าตัวของเจ้า Cody อยู่ที่ 600 กว่าบาทครับ ซึ่งเท่าที่ลองดูถือว่าคุ้มค่ามากครับการใช้งานไม่ยากแถมมีปัญหาสงสัยสามารถสอบถามเจ้าของผลงานได้

ขอดีของการซื้อ Template มาใช้ผมว่ามันทำให้รูปร่างหน้าตาของบล็อกเราไม่ค่อยซ้ำกับใครซึ่งผิดจากการใช้งานฟรี กับเรื่องของการซัพพอร์ต สำหรับใครที่ต้องการดูรายละเอียดเพิ่มก็ดูได้จากลิงค์ด้านล่างนี้เลยครับ

ตัวอย่างเทมเพลต  รายละเอียดเพิมเติม 
สำหรับวิธีการซื้อ Template ของ Blogger หรือ Theme ของ WordPress จาก ThemeForest ก็ไม่ยุ่งยากครับแค่ของเว็บ ThemeForest แล้วสมัครสมาชิก เสร็จแล้วก็เลือกดูเทมเพลต หรือธีมที่ถูกใจ เลือกจ่ายผ่าน PayPal ได้ครับ




Breaking

 

Idea For Life