javascript

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

< 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 ก่อนเอาโค้ดไปใช้จริงด้วยนะครับ

รูปภาพตรงหัวบล็อก อันที่จริงมันเป็นแค่พื้นหลัง (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 ก่อนเอาโค้ดไปใช้จริงด้วยนะครับ

การ rotate รูป banner ในบล็อก

posted on 03 Nov 2007 18:13 by oatato in BlogDesign

เราสามารถเปลี่ยนรูป banner ในบล็อกให้วนไปเรื่อย ๆ แบบ slideshow ด้วยสคริปต์ข้างล่างนี้


หมายเหตุ:

  • ถ้าต้องการแปะโค้ดในตัวเอ็นทรี ต้องเปลี่ยนโหมดเป็น Disable WYSIWYG ก่อน
  • ถ้าจะให้เปลี่ยนไปตลอด ต้องบันทึกโค้ดลงในไฟล์แยกแล้วค่อยดึงมาใช้งานด้วยการ Add Link เข้ามา
  • ด้วยทางเลือกใหม่ของเอ็กทีน ที่เปิดโอกาสให้เราเอาโค้ดไปแปะได้ใน Theme > Widget > Custom Code

ทดสอบแทรกสคริปต์ #2

posted on 25 Oct 2007 12:42 by oatato in BlogDesign
เลือกรูปประกอบบล็อก:
« slideshow »

Recommend