เทคนิคที่ 1 : "เอาเพลงลงในBlogให้เพลงเล่นเองอัตโนมัติเมื่อเปิดเว็บขึ้นมา"
ถ้าต้องการให้เพลงเล่นขึ้นมาเลย โดยที่ไม่ต้องกดปุ่นเพลย์
วิธีแรก
โค้ดเปิดวีดีโออัตโนมัติสำหรับ You Tube
วิธีง่ายๆครับ
โค้ดเล่นเพลงอัตโนมัติ1รอบ
fs=1&hl=en_US&autoplay=1"
โค้ดเล่นเพลงอัตโนมัติเล่นตลอด
fs=1&hl=en_US&autoplay=1&loop=1"
วิธีทำ
1.คัดลอกโค้ดเพลงจากYoutubeครับ
<iframe width="660" height="420"
src="http://www.youtube.com/embed/ZjgwwCc69zc?rel=0"
frameborder="0" allowfullscreen></iframe>
2.แทนโค้ดสีแดง ด้วยโค้ดน้ำเงินครับ
3.เสร็จแล้วเอาโค้ดเพลงไปลงตามเว็บได้เลยครับ
พอเปิดหน้าเว็บขึ้นมาเพลงก็จะเล่นให้ทันทีโดยไม่ต้องคลิกเปิด ครับ
เทคนิคที่ 2 : "การทำภาพสไลด์"
ขั้นตอนการทำภาพสไลด์
1.การทำภาพสไลด์ที่จะกล่าวถึงต่อไปนี้ต้องอาศัย โค้ดสองส่วนด้วยกันคือ java
scriptซึ่งเป็นส่วนควบการทำงานหลักของการสไลด์ภาพ และ CSS เป็นส่วนของการจัดรูปแบบในการนำเสนอภาพให้มีความสวยงามเหมาะสมตรงตามความต้องการที่ผู้จัดทำต้องการนำเสนอ
2.ก่อนที่จะลงมือทำภาพสไลด์นี้เราจะต้องมีการเตรียมความพร้อมก่อน
นั้นคือ จะต้องมีการเตรียมรูปภาพที่ต้องการนำไปทำสไลด์ รูปภาพที่เราจะนำไปทำสไลด์นั้นควรมีขนาดของรูปภาพเท่ากันทุกรูป
สิ่งนี้จำเป็นเพราะจะทำให้ภาพที่สไลด์ออกมานั้นมีความสวยงามสม่ำเสมอ
และอีกอย่างที่จะต้องเตรียมก่อนทำภาพสไลด์นี้ก็คือ ไฟล์ ที่ควบคุมการทำงาน(Java
Script) จำนวน 2 ไฟล์(jquery.js, easySlider1.7.js) และไฟล์ css
1ไฟล์(screen.css)
3.เมื่อเตรียมสิ่งที่กล่าวมาในข้างต้นเรียบร้อยแล้ว
เราก็ลงมือเขียนโค้ดได้เลย
และในส่วนของการเขียนโค้ดลงไปนั้นจะมีอยู่สองส่วนด้วยกันคือ
3.1เขียนโค้ดลงไปในส่วนของ Head
(<Head> ...โค้ด... </Head>) ซึ่งเป็นส่วนของการกำหนดค่าการทำงานต่างๆ
โดยโค้ดที่จะต้องนำไปเขียนไว้ในส่วนนี้ก็คือ
· การ import ไฟล์ CSS เข้ามา
<link href="../css/screen.css"
rel="stylesheet" type="text/css" media="screen"
/>
· การ import ไฟล์ java
script ที่เตรียมไว้เข้ามาใช้
<script type="text/javascript"
src="../js/jquery.js"></script>
<script
type="text/javascript"src="../js/easySlider1.7.js"></script>
· เขียนโค้ด java
script เพิ่มเติมเพื่อสั่งให้มีการทำงาน โดยพิมพ์ตามด้านล่างนี้
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true, //ภาพสไลด์เองอัตโนมัติ(True)
continuous: true,//การกำหนดให้มีการวนภาพซ้ำ(Repeat)
numeric: true//เมื่อกดตัวเลขภาพจะสไลด์ตามลำดับตัวเลขนั้น
});
});
</script>
3.2เขียนโค้ดลงไปในส่วนของ body(<body>...โค้ด...</body>)เพื่อให้แสดงผล(ให้เขียนโค้ดตรงตำแหน่งตามที่ต้องการให้แสดงผล)
โค้ดดังกล่าวดูไปจากด้านล่างนี้
<div id="container">
<div id="header">//กำหนดส่วนหัวของรูป
<h1>ข้อความที่เป็นห้วข้อของรูปที่สไลด์</h1>
</div>
<div id="content">
<div id="slider">//ส่วนของภาพที่นำไปทำสไลด์
<ul>
<li><a href="#ลิงค์"><img src="รูปที่ 1(image1.jpg)"
alt="คำอธิบายแทนภาพ" /></a></li>
<li><a href="#ลิงค์"><img src="รูปที่ 2(image2.jpg)"
alt="คำอธิบายแทนภาพ" /></a></li>
</ul>
</div>
</div>
</div>
</div>
เทคนิคที่ 3 : "โค้ดกล่องเพลงติดเว็บ"
นำโค้ดด้านล่างไปวางได้เลยค่ะ
<DIV id=waizon99></DIV>
<SCRIPT language=javascript>
var html='<jframe title="waizon" src="http://radio.waizon.com/musicbox/black-box250x100.html" width="250" height="100" frameborder="0" scrolling="no"></jframe>';
html = html.replace(/jf/gi,"if");document.getElementById('waizon99').innerHTML=html;</SCRIPT>
<SCRIPT language=javascript>
var html='<jframe title="waizon" src="http://radio.waizon.com/musicbox/black-box250x100.html" width="250" height="100" frameborder="0" scrolling="no"></jframe>';
html = html.replace(/jf/gi,"if");document.getElementById('waizon99').innerHTML=html;</SCRIPT>
