HACKUBLOG

Posted: 20 Jul 2010 10:11 PM PDT

บทความนี้ผมขอนำเสนอ Slideshow ใน Blogger อีกรูปแบบหนึ่งชื่อว่า S3slider ซึ่ง Slideshow ชนิดนี้พัฒนาโดย serie3.info ลักษณะเด่น ๆ ของ SlideShow ก็คือ
1. ติดตั้งง่าย
2. ใช้เวลาในการโหลดบนหน้า blogger รวดเร็ว
3. โค้ดในการติดตั้งมีน้อย ถ้าเทียบกับ SlideShow แบบอื่น ๆ
4. สามารถปรับขนาดได้อย่างง่ายดายยืดหยุ่นในตำแหน่งที่ติดตั้ง
5. สามารถติดตั้งหลาย ๆ จุดในแม่แบบได้พร้อม ๆ กัน
6. สามารถแทรกข้อความทีเป็น Feature ได้ (แสดงผลได้ทั้งภาพและข้อความ)

สอนทำบล็อก วิธีสร้างบล็อก แต่งบล็อก blogger blogspot

ตัวอย่างการทำงานของ SlideShow ชนิดนี้ดูได้จาก jQuery S3Slider

สำหรับการติดตั้ง SlideShow ผมจะสร้างทางเลือกในการติดตั้งเอาไว้ 3 ทางเลือกได้แก่
ทางเลือกที่ 1 ติดตั้ง S3slider ขนาดใหญ่อย่างเดียว
ทางเลือกที่ 2 ติดตั้ง S3slider ขนาดเล็กอย่างเดียว
ทางเลือกที่ 3 ติดตั้ง S3slider ขนาดใหญ่หรือเล็กมากกว่า 1 ตำแหน่งในหน้าเดียวกัน

ดังนั้นคุณควรจะระบุความต้องการของตัวเองให้ชัดเจนก่อนแล้วจึงเลือกติดตั้งตามขึ้นตอนใดขั้นตอนหนึ่ง

ขั้นตอนการติดตั้ง jQuery S3Slider

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ การออกแบบ >> แก้ไข HTML

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ให้คุณค้นหาโค้ด ]]> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]>

#slider {
width: 410px;/*ความกว้างของSlideขนาดเล็กนี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/
height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */
position: relative; /* important */
overflow: hidden; /* important */
}
#slider1, #slider2 {
width: 720px;/*ความกว้างของSlideขนาดใหญ่นี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/
height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent, #slider1Content, #slider2Content {
width: 720px;
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage, .slider1Image, .slider2Image {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.slider1Image span, .slider2Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear { clear: both;}
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px;}
.top { top: 0; left: 0;}
.bottom { bottom: 0; left: 0;}
.left { top: 0; left: 0; width: 110px !important; height: 280px;}
.right { right: 0; bottom: 0; width: 90px !important; height: 290px;}

หมายเหตุ
โค้ดด้านบนนี้เป็นที่ผมผสมผสาน CSS ของ S3slider ทั้ง 3 รูปแบบเข้าด้วยกัน โดยที่
ID slider เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 400 สูง 300)
ID slider1 เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 720 สูง 300 แบบที่ 1)
ID slider2 เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 720 สูง 300 แบบที่ 2 )

ดังนั้นคุณอาจจะติดตั้งโค้ดทั้งหมดลงไปเพื่อให้สามารถเพิ่มรูปแบบ S3slider ได้ในภายหลัง หรือถ้าคุณต้องการติดตั้งเพียง S3slider รูปแบบใดรูปแบบหนึ่งเท่านั้น คุณก็สามารถสามารถลบโค้ดที่ไม่เกี่ยวข้องทิ้งไปได้

เช่น ถ้าผมต้องการติดตั้งเฉพาะ S3slider ขนาดเล็กก็อาจจะใช้โค้ดเพียง

#slider {
width: 410px;/*ความกว้างของSlideขนาดเล็กนี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/
height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent{
width: 720px;
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage{
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear { clear: both;}
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px;}
.top { top: 0; left: 0;}
.bottom { bottom: 0; left: 0;}
.left { top: 0; left: 0; width: 110px !important; height: 280px;}
.right { right: 0; bottom: 0; width: 90px !important; height: 290px;}

ขั้นที่ 2 ติดตั้งจาวาสคริปต์เพื่อให้ S3slider มีการเคลื่อนไหว

ในขั้นนี้ให้คุณค้นหาโค้ด และเมื่อพบแล้วให้วางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

ตัวเลข 3000 , 4000 และ 5000 หมายถึงเวลาที่ใช้ในการเปลี่ยน Slide โดยที่ 1000 ก็คือ 1 วินาที ซึ่งคุณสามารถปรับเพิ่มหรือลดตามความต้องการได้ (ตอนปรับให้ดูชื่อของ ID ให้ตรงกับ ID ที่ติดตั้งด้วย)

ส่วนชุดโค้ด

$('#ใส่ชื่อไอดีตัวใหม่').s3Slider({
timeOut: 5000
});

เป็นการระบุว่าจะให้สคริปต์นี้ส่งผลต่อ ID ใด

ขั้นที่ 3 HTML สำหรับติดตั้ง S3slider

คุณสามารถติดตั้ง S3slider มากกว่า 1 แบบลงไปในหนึ่งหน้าได้ โค้ดทั้ง 3 ชุดต่อไปนี้เป็นโค้ดของ S3slider ทั้ง 3 รูปแบบมีดังนี้

S3slider ขนาดเล็ก

slider">

ใส่ URL ของรูปภาพขนาด400 x 300" />
top">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด400 x 300" />
top">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด400 x 300" />
top">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด400 x 300" />
top">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด400 x 300" />
top">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

S3slider ขนาดใหญ่แบบที่ 1

slider1">

ใส่ URL ของรูปภาพขนาด 720 x 300" />
left">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
right">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
right">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
left">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
right">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

S3slider ขนาดใหญ่แบบที่ 2

slider2">

ใส่ URL ของรูปภาพขนาด 720 x 300" />
top">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
left">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
bottom">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
right">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

ใส่ URL ของรูปภาพขนาด 720 x 300" />
bottom">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

แนวทางปรับแต่ง HTML โค้ด
3.1 การเพิ่มหรือลดจำนวนรูปภาพให้เพิ่มหรือชุดโค้ดต่อไปนี้เข้าไปตามความต้องการ

ใส่ URL ของรูปภาพ" />
bottom">ใส่หัวข้อ
ใส่ข้อความอธิบายภาพ

3.2 การกำหนดทิศทางการปรากฎของข้อความให้เปลี่ยนค่าได้ที่

left">

ซึ่งคุณสามารถเปลี่ยนเป็น

right">

หรือ

top">

หรือ

bottom">

ขั้นที่ 4 ตำแหน่งในการติดตั้ง HTML
การติดตั้ง HTML สามารถทำได้หลายวิธีดังนี้

4.1 ใช้วิธี Add Gadget ชนิด HTML/จาวาสคริปต์ (วิธีนี้เหมาะกับ S3slider ขนาดเล็ก แต่ก็ใช้กับขนาดใหญ่ได้)

4.2 ติดตั้งลงไปในส่วนหัวของแม่แบบ
สำหรับแม่แบบรุ่นเก่าให้ค้นหาโค้ด

ซึ่งบางแม่แบบอาจพบโค้ดเป็น

และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว

และสำหรับแม่แบบรุ่นใหม่ให้ค้นหาโค้ด

และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว

สอนแต่ง blogspot สร้างบล้อกฟรีกับ blogger

4.3 ติดตั้งลงไปใน page หรือบทความ
ถ้าต้องการติดตั้งลงไปใน page หรือบทความ คุณจะต้องคลิกที่แท็บ แก้ไข HTML เสียก่อนจากนั้นจึงวาง HTML ของ S3slider ลงไป

4.4 คุณสามารถติดตั้ง S3slider มากกว่า 1 ตำแหน่งในหนึ่งหน้าโดยมีเงื่อนไขว่าในแต่ละตำแหน่งจะต้องใช้ชื่อ ID ไม่ซ้ำกัน
เช่น ถ้าคุณติดตั้ง S3slider ที่มี ID เป็น id="slider" ไปแล้ว ตำแหน่งอื่นๆ ที่ติดตั้งก็จะต้องใช้ ID เป็น id="slider1" เป็นต้น

หวังว่าคงชอบ Slideshow ชนิดนี้กันนะครับ หากมีข้อสงสัยในการติดตั้งโปรดสอบถามที่บทความนี้ สวัสดีครับ