BlogDesign

HTML5: <video>

posted on 01 Jul 2009 09:37 by oatato in BlogDesign
Firefox 3.5 สามารถรองรับภาษา HTML 5 ได้แล้ว ก็เลยขอลองทดสอบแท็ก <video> ดูซะหน่อย


Source Code: <video tabindex="0" id="video" src="http://www.dailymotion.com/cdn/OGG-320x240/video/x9euyb?key=a99e7056808342ad0868b4decfe811c814044ec" width="320" height="240" controls="controls"></video>

ส่วน แท็ก <audio> ก็น่าสนใจ ไว้ค่อยมาลองอีกที

คล้าย ๆ กับโค้ดการเปลี่ยนพื้นหลังของบล็อก แต่ย้ายมาเป็นพื้นหลังของเอ็นทรี่แทน

< script language="javascript">
var i = 0;
var folder = 'http://name.exteen.com/images/folder/';
var bg = new Array('image1.jpg','image2.jpg','image3.jpg');
function bgChange()
{
document.getElementById('content').style.background 
= 'url(' + folder+bg[i] + ') top no-repeat';
tmer2 = setTimeout('bgChange()',5000);
if (i == bg.length-1) { i = 0; }
else { i += 1; }
}
bgChange();
< /script>

หมายเหตุ:

  1. ปรับแต่งเฉพาะตรงที่เป็น สีส้ม ส่วนอื่นที่เหลือไม่ต้องทำอะไีีร แปะใช้ได้เลย
  2. ให้ลบช่องระหว่างคำว่า < script และ < /script ก่อนเอาโค้ดไปใช้จริงด้วยนะครับ

Exteen กับ Firefox 3

posted on 18 Jun 2008 14:41 by oatato in BlogDesign

เวลาเข้าเว็บเอ็กทีนโดยใช้ Firefox 3

เจอการแสดงผลที่ไม่เหมือนเดิมอยู่สองจุด ที่น่าจะมาจากสาเหตุเดียวกัน

คือ ขนาดความกว้างของรายการ Entries และ Pages มันหดลงไป

  Entries 

  Pages 

คาดว่าอีกเดี๋ยวคงจะถูกปรับแก้ไขขนาดให้ดีเหมือนเดิม

เว็บมาสเตอร์เอ็กทีนไวอยู่แล้วล่ะ

 

อัพเดต

คุณแชมป์แก้ไขแล้ว แสดงผลได้ดีเหมือนเดิมแล้วครับ

เห็นมะ บอกแล้วว่าไวจริง

 

ป.ล.

รูปภาพตรงหัวบล็อก อันที่จริงมันเป็นแค่พื้นหลัง (background) เท่านั้น
ส่วนพื้นที่ด้านหน้า (foreground) เปรียบเสมือนหัวใจที่ยังว่างและไม่มีใครมาจับจอง

เราจึงสามารถนำไปทำประโยชน์ได้อีกมากมาย อาทิเช่น การใส่ข้อความ
(หรืออย่างอื่นก็ได้ที่ภาษา HTML สามารถสื่อไปถึง) ลงในพื้นที่ว่างนั้น

อย่างง่าย ขอบอก

< script language="javascript">

document.getElementById('coverimage').innerHTML = '< b>Welcome to my world < /b>';

< /script>

ลักษณะการทำงาน:
ใส่โค้ดภาษา HTML ลงในหัวบล็อก

วิธีใช้:
สำหรับปรับแต่งบล็อก หรืออ่านเป็นความรู้ แต่ก็ยังห้ามรับประทานอยู่ดี

วันที่ผลิต:
16 มิ.ย. 51

หมายเหตุ:

  1. ปรับแต่งโค้ดภาษา HTML เฉพาะตรงที่เป็น สีเขียว ส่วนอื่นที่เหลือไม่ต้องทำอะไีีร แปะใช้ได้เลย
  2. สำคัญ - ถ้าข้อความมีตัวอักษร ' ให้แปลงร่างเป็น \' เพื่อจะได้ไม่ไปกวนสคริปต์จนเละตุ้มเป๊ะ
  3. ถ้าต้องการให้ข้อความบางส่วนขึ้นบรรทัดใหม่ ให้ใส่ HTML แท็ก < br> คั่นกลาง
  4. ส่วน HTML แท็ก < b> กับ < /b> ที่เห็นในตัวอย่าง แปลว่า เป็นตัวอักษรประเภทหนานุ่ม
  5. อย่าลืมลบช่องระหว่างคำว่า < script และ < /script ก่อนเอาโค้ดไปใช้จริงด้วยนะ
ลักษณะการทำงาน:
เปลี่ยนภาพไปตามเวลาที่กำหนด แบบเรียงตามลำดับจากภาพแรกไปภาพสุดท้าย

วิธีใช้:
สำหรับปรับแต่งบล็อก ห้ามรับประทาน

วันที่ผลิต:
11 มิ.ย. 51

< script language="javascript">

/* ตำแหน่งของไฟล์รูปต่าง ๆ */
var folder = 'http://yourblog.exteen.com/images/banner/';

/* เลือกไฟล์รูปที่จะนำมาแสดง กี่ภาพก็ได้ */
var banner = new Array('picture1.jpg','picture2.jpg','picture3.jpg','picture4.jpg');

/* เวลาเปลี่ยนภาพ แต่ละครั้ง หน่วยเป็นวินาที */
var interval = 10;

/* ลำดับที่ของภาพที่ต้องการให้เริ่มแสดงก่อน ตำแหน่งแรกสุดคือ 0 */
var i = 0;

function activateChange()
{
document.getElementById('coverimage').style.background = 'url(' + folder+banner[i] + ') top no-repeat';
tmer = setTimeout('activateChange()',interval*1000);
if (i == banner.length-1) { i = 0; }
else { i += 1; }
}
window.onload = activateChange();

< /script>

. . .

ลักษณะการทำงาน:
เปลี่ยนภาพไปตามเวลาที่กำหนด แบบสุ่มดักเป็ด

วิธีใช้:
สำหรับปรับแต่งบล็อก ห้ามรับประทานเช่นเดียวกัน

วันที่ผลิต:
11 มิ.ย. 51

< script>

/* ตำแหน่งของไฟล์รูปต่าง ๆ */

var folder = 'http://yourblog.exteen.com/images/banner/';

/* เลือกไฟล์รูปที่จะนำมาแสดง กี่ภาพก็ได้ */
var banner = new Array('picture1.jpg','picture2.jpg','picture3.jpg','picture4.jpg');

/* เวลาเปลี่ยนภาพ แต่ละครั้ง หน่วยเป็นวินาที */
var interval = 10;

function activateChange()
{
today = new Date();
rand = today.getSeconds()+today.getMinutes();
var i = rand%(banner.length);
document.getElementById('coverimage').style.background = 'url(' + folder+banner[i] + ') top no-repeat';
tmer = setTimeout('activateChange()',interval*1000);
}
window.onload = activateChange();

< /script>

หมายเหตุ:

  1. ปรับแต่งเฉพาะตรงที่เป็น สีส้ม หรือ สีฟ้า ส่วนอื่นที่เหลือไม่ต้องทำอะไีีร แปะใช้ได้เลย
  2. ให้ลบช่องระหว่างคำว่า < script และ < /script ก่อนเอาโค้ดไปใช้จริงด้วยนะครับ

Recommend