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> ก็น่าสนใจ ไว้ค่อยมาลองอีกที
posted on 22 Jun 2008 12:43 by oatato in BlogDesign
คล้าย ๆ กับโค้ดการเปลี่ยนพื้นหลังของบล็อก แต่ย้ายมาเป็นพื้นหลังของเอ็นทรี่แทน
< 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>
หมายเหตุ:
- ปรับแต่งเฉพาะตรงที่เป็น สีส้ม ส่วนอื่นที่เหลือไม่ต้องทำอะไีีร แปะใช้ได้เลย
- ให้ลบช่องระหว่างคำว่า < script และ < /script ก่อนเอาโค้ดไปใช้จริงด้วยนะครับ
posted on 18 Jun 2008 14:41 by oatato in BlogDesign
เวลาเข้าเว็บเอ็กทีนโดยใช้ Firefox 3
เจอการแสดงผลที่ไม่เหมือนเดิมอยู่สองจุด ที่น่าจะมาจากสาเหตุเดียวกัน
คือ ขนาดความกว้างของรายการ Entries และ Pages มันหดลงไป
Entries
Pages
คาดว่าอีกเดี๋ยวคงจะถูกปรับแก้ไขขนาดให้ดีเหมือนเดิม
เว็บมาสเตอร์เอ็กทีนไวอยู่แล้วล่ะ 
อัพเดต
คุณแชมป์แก้ไขแล้ว แสดงผลได้ดีเหมือนเดิมแล้วครับ
เห็นมะ บอกแล้วว่าไวจริง
ป.ล.
posted on 16 Jun 2008 22:29 by oatato in BlogDesign
รูปภาพตรงหัวบล็อก อันที่จริงมันเป็นแค่พื้นหลัง (background) เท่านั้น
ส่วนพื้นที่ด้านหน้า (foreground) เปรียบเสมือนหัวใจที่ยังว่างและไม่มีใครมาจับจอง
เราจึงสามารถนำไปทำประโยชน์ได้อีกมากมาย อาทิเช่น การใส่ข้อความ
(หรืออย่างอื่นก็ได้ที่ภาษา HTML สามารถสื่อไปถึง) ลงในพื้นที่ว่างนั้น
อย่างง่าย ขอบอก
< script language="javascript">
document.getElementById('coverimage').innerHTML = '< b>Welcome to my world < /b>';
< /script>
ลักษณะการทำงาน:
ใส่โค้ดภาษา HTML ลงในหัวบล็อก
วิธีใช้:
สำหรับปรับแต่งบล็อก หรืออ่านเป็นความรู้ แต่ก็ยังห้ามรับประทานอยู่ดี
วันที่ผลิต:
16 มิ.ย. 51
หมายเหตุ:
- ปรับแต่งโค้ดภาษา HTML เฉพาะตรงที่เป็น สีเขียว ส่วนอื่นที่เหลือไม่ต้องทำอะไีีร แปะใช้ได้เลย
- สำคัญ - ถ้าข้อความมีตัวอักษร ' ให้แปลงร่างเป็น \' เพื่อจะได้ไม่ไปกวนสคริปต์จนเละตุ้มเป๊ะ
- ถ้าต้องการให้ข้อความบางส่วนขึ้นบรรทัดใหม่ ให้ใส่ HTML แท็ก < br>
คั่นกลาง
- ส่วน HTML แท็ก < b> กับ < /b> ที่เห็นในตัวอย่าง แปลว่า เป็นตัวอักษรประเภทหนานุ่ม
- อย่าลืมลบช่องระหว่างคำว่า < script และ < /script ก่อนเอาโค้ดไปใช้จริงด้วยนะ
posted on 11 Jun 2008 19:27 by oatato in BlogDesign
ลักษณะการทำงาน:
เปลี่ยนภาพไปตามเวลาที่กำหนด แบบ
เรียงตามลำดับจากภาพแรกไปภาพสุดท้าย
วิธีใช้:
สำหรับปรับแต่งบล็อก ห้ามรับประทาน
วันที่ผลิต:
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>
หมายเหตุ:
- ปรับแต่งเฉพาะตรงที่เป็น สีส้ม หรือ สีฟ้า ส่วนอื่นที่เหลือไม่ต้องทำอะไีีร แปะใช้ได้เลย
- ให้ลบช่องระหว่างคำว่า < script และ < /script ก่อนเอาโค้ดไปใช้จริงด้วยนะครับ
