วิธีติดตั้ง jQuery s3Slider บน Blogger

บทความนี้ผมขอนำเสนอ 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

สร้างบล็อกฟรี ทำ blog

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

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

#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 มีการเคลื่อนไหว

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

<!--s3Slider http://www.hackublog.com Start-->    
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>     
<script src='http://siiam.bravehost.com/s3Slider.js' type='text/javascript'/>     
<script type='text/javascript'>     
    $(document).ready(function() {     
        $(&#39;#slider&#39;).s3Slider({     
            timeOut: 3000      
        });     
        $(&#39;#slider1&#39;).s3Slider({     
            timeOut: 4000     
        });     
        $(&#39;#slider2&#39;).s3Slider({     
            timeOut: 5000     
        });     
    });     
</script>     
<!--/s3Slider-->

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

ส่วนชุดโค้ด
        $(&#39;#ใส่ชื่อไอดีตัวใหม่&#39;).s3Slider({     
            timeOut: 5000     
        });
เป็นการระบุว่าจะให้สคริปต์นี้ส่งผลต่อ ID ใด


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

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


S3slider ขนาดเล็ก
<div id="slider">     
<ul id="sliderContent">     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />  
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>  
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<!--แทรกโค้ดชุดใหม่ตรงนี้-->     
<div class="clear sliderImage"></div>     
</ul>     
</div>     
<!-- // slider -->

S3slider ขนาดใหญ่แบบที่ 1
<div id="slider1">     
<ul id="slider1Content">     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<!--แทรกโค้ดชุดใหม่ตรงนี้-->     
<div class="clear slider1Image"></div>     
</ul>     
</div>     
<!-- // slider1 -->

S3slider ขนาดใหญ่แบบที่ 2
<div id="slider2">     
<ul id="slider1Content">     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<!--แทรกโค้ดชุดใหม่ตรงนี้-->     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<div class="clear slider1Image"></div>     
</ul>     
</div>     
<!-- // slider1 -->

แนวทางปรับแต่ง HTML โค้ด
3.1 การเพิ่มหรือลดจำนวนรูปภาพให้เพิ่มหรือชุดโค้ดต่อไปนี้เข้าไปตามความต้องการ
<li class="slider1Image">    
<img src="ใส่ URL ของรูปภาพ" />     
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>

3.2 การกำหนดทิศทางการปรากฎของข้อความให้เปลี่ยนค่าได้ที่
<span class="left"> 
ซึ่งคุณสามารถเปลี่ยนเป็น
<span class="right"> 
หรือ
<span class="top"> 
หรือ
<span class="bottom"> 


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

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

SEO blogger backlink traffic facebook

4.2 ติดตั้งลงไปในส่วนหัวของแม่แบบ
สำหรับแม่แบบรุ่นเก่าให้ค้นหาโค้ด
<div id='content-wrapper'>
ซึ่งบางแม่แบบอาจพบโค้ดเป็น
<div id='content'>
และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว

และสำหรับแม่แบบรุ่นใหม่ให้ค้นหาโค้ด
<div class='fauxborder-left tabs-fauxborder-left'>
และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว

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

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

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


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

หมายเหตุ :
คุณควรจะดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/s3Slider.js สำรองเก็บไว้ และหากเป็นไปได้ควรจะ upload เพื่อใช้งานเอง ขอบคุณครับ

ตอนนี้มีความคิดเห็น : 47 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณครับ...ขยันหาสิ่งดีๆมาให้เสมอเลย...

  1. @ บงกช เบญจกูล : ขอบคุณครับ พยายามจะ update บล็อก เรื่อย ๆ ครับ กลัวว่าสมาชิกจะหายกันไปหมดน่ะครับ ^ ^

  1. ขอบคุณสำหรับข้อมูลดีดีครับ

  1. ยินดีครับ ถ้าอยากให้เขียนบทความเรื่องใดก็แจ้งไว้ได้นะครับ ถ้าพอมีความรู้ก็จะเขียนเล่าให้ฟังครับ

  1. ผมจะเอา ads แป่ะ ข้างๆ รูปสไลคับ แต่ทำไมผมเอา ads ไปวางต่อจากโคดสไล แล้วทำไม ads ไปอยู่ข้างล่าง รูปสไล คับ ช่วยทีคับ

  1. @น้องอภิสิทธิ์ (แหมชื่อเหมือนนายก ^ ^ ) ทำแบบนี้ครับ

    <div style="float:left;">
    ใส่โค้ด HTML ของสไลด์
    </div>
    <div style="float:left;margin-left:5px;">
    ใส่โค้ดของโฆษณา
    </div>

    แต่ผลรวมของความกว้างระหว่างสไลด์กับโฆษณานะครับ ไม่อย่างนั้นมันก็จะตกขอบอยู่ดี

  1. ตอบไม่ครบ >> ผลรวมของความกว้างระหว่างสไลด์กับโฆษณาต้องไม่เกินพื้นที่ในตำแหน่งที่ติดตั้ง

  1. ได้แล้วคับแต่ ADS ความสูงของมันขึ้นสูงกว่า สไล คับ เลยดูไม่ส่วย พอมีวิธีแก้มั้ยคับ ปรับให้ ลดลงมาเท่ากันคับ
    http://proadt.blogspot.com/

  1. เออ เร่อ ใช่ป่าวคับ ดูให้ทีคับ
    http://img1.showpic.in.th/pic/7df/7df01281aea2fbd84797b122ff89a22c.jpg

  1. ปกติดีครับ ต้องการปรับความสูงก็ปรับที่ความสูงใน CSS และความสูงของภาพครับ อย่าไปปรับความสูงของ Ads

  1. สวัสดีครับพี่ ผมติดตาม Blog พี่มาอย่างเงียบๆ ขอบคุณสำหรับวิชานะครับ

    แต่ตอนนี้ ผมมีเรื่องติดตรงนี้ครับ
    http://www.uppicweb.com/x/i/ii/8fffff.jpg

    มันไม่รันหรือผมทำผิดครับ

    ขอบคุณครับ

  1. @Izanagi : ในบล็อกมีการติดตั้ง สคริปต์ตัวไหนไปบ้างแล้วครับ เช่นถ้ามี jquery 1.3.2 ก็ให้ลบออกแล้วเอา jquery 1.4.2 ไปแทนที่ครับ ไม่อย่างนั้นก็อาจจะไม่ทำงานครับ

    ถ้าไม่บอกบล็อกพี่ก็ไม่ทราบปัญหา มีแค่รูปก็ตอบยากครับ

  1. ขอบคุณพี่ที่แนะนำครับ
    น่าจะเป็นที่ ธีมเดิม
    เลยเข้า Design แล้วทำ ธีมใหม่
    ลองมาทำดูได้แล้วครับ
    แต่มันติดตรงที่รูปภาพมันตกขอบ ^^

    เดียวจะลองปรับต่อไปครับ ขอบคุณครับ

  1. เกิดปัญหาอีกแล้วคับ
    พอผมนำ Toolbar ของ wibiya ติดบล็อก
    jQuery S3Slider กับไม่ทำงานคับ
    เป็นเพราะเหตุใดหรอคับ
    ช่วยหน่อย นะคับ

  1. @ dekBc52 :
    1. ตอนที่ view code ดูเห็นว่ามีการติดตั้ง anything slide เข้าไปด้วยครับ ลองลบออกก่อน
    2. ลองลบ wibiya ออกก่อนครับแล้วดูว่า S3Slider ทำงานหรือไม่
    3. จากข้อ2 ถ้ายังทำงานอยู่แปลว่าคงไม่ได้เกี่ยวกัน
    4. จากข้อ 2 ถ้าถอด wibiya ออกแล้วทำงานให้เปลี่ยน Script ของ S3slider ในขั้นที่ 2 จากเดิม

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#slider&#39;).s3Slider({
    timeOut: 3000
    });
    $(&#39;#slider1&#39;).s3Slider({
    timeOut: 4000
    });
    $(&#39;#slider2&#39;).s3Slider({
    timeOut: 5000
    });
    });
    </script>







    แก้เป็น

    <script type='text/javascript'>
    jQuery(document).ready(function() {
    jQuery(&#39;#slider&#39;).s3Slider({
    timeOut: 3000
    });
    jQuery(&#39;#slider1&#39;).s3Slider({
    timeOut: 4000
    });
    jQuery(&#39;#slider2&#39;).s3Slider({
    timeOut: 5000
    });
    });
    </script>

    ถ้าไม่หายอีกก็ตัวใครตัวมัน 55+ (ล้อเล่นครับ)

  1. ขอบคุณมากคับ
    แล้วผมจะลองทำดูนะคับ
    ถ้ายังไง เดียวคงมาปรึกษาใหม่นะคับ

  1. ผมลองทำดูแล้วคับ,,
    ถ้านำ wibiya ออก แล้ว anything slide ทำงาน
    ถ้านำ wibiya เข้า แล้ว anything slide แสดงเฉพาะรูปแรกแต่ละมีกล่องแบบมีแถบให้เราเลื่อนดูเอา

    จากนั้นผมลอง ลบ anything slide ออก
    แล้วเปลี่ยน สคลิป ของ S3slider พร้อมกับใส่ wibiya
    ปรากฎว่า S3slider ไม่ทำงานเหมือนเดิม ว่างเปล่าไปเลยคับ
    ผมจึงเปลี่ยนกับมาใช้ สคลิป ของ S3slider แบบเดิม ก็ไม่แสดงอยู่ดีคับ


    แต่ผมใช้ wibiya กับ Draggable and Lightbox Image Garelly ก็แสดงผลทั้งคู่ นะคับ


    พอจะมีทางแก้ไขใดๆ หรือเปล่าคับ
    ขอบคุณมาก เลยนะคับ

  1. @ dekBc52 : ลองลง S3Slider อย่างเดียวดูก่อนนะครับ แล้วดูว่าทำงานหรือไม่ อาจจะเป็นเพราะโค้ดเดิมที่ติดตั้งหรือไม่ก็ใช้โค้ดยังไม่ถูกครับ ลองดูอีกครั้งครับ ติดอันเดียวดูก่อนว่าทำงานหรือไม่

  1. http://mariopai.blogspot.com/
    รูปมันไม่เท่ากันครับเราทำจะยังไงให้รูปมันเท่าของเดิมครับหมายความว่าจะเอารูปใหม่ติดลงไปครับบางรูปก็ใหญ่บางรูปก็เล็กครับ

  1. @ TA : ใช้วิธีระบุความกว้าง ยาว ลงไปในโค้ดรูปเลยครับ เช่น

    <img src="้http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

    ก็กำหนดเป็น

    <img src="้http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" width="400" height="300" />

    หรือปรับตัวเลขให้ตรงกับที่ต้องการครับ แต่ตัวเลขต้องตรงกับตัวเลขที่ระบุใน CSS ขั้นที่ 1 ด้วยครับ

  1. ขอบคุณมากๆเลยนะคะ
    http://sweetcandygift.blogspot.com/ อันนี้คือผลงานทีีทำค่ะ ^^

  1. @ sweet candy : สวยมากครับ

  1. มีปัญหาค่ะ ทำไมอยู่ดีๆ Slide ถึงไม่ขึ้นค่ะ รบกวนช่วยหน่อย ขอบคุณค่ะ

  1. @ sweet candy : ให้เข้าไปแทนที่โค้ดในขั้นที่ 2 ตรง

    http://hackublog.googlecode.com/files/s3Slider.js

    ด้วยโค้ด

    http://sites.google.com/site/hackublog/home/server/s3Slider.txt

  1. ผมเปลี่ยน Scipt ตามที่ พี่ Hack บอก dekBc52 แล้ว ก็ไม่แสดงเหมือนเดิมคับ แต่พอเอา wibiya ออก กลับแสดงคับ
    พอมีทางแก้ไขได้มั้ยคับ อยากใช้ Slide และก็ใช้ wibiya ด้วยอะคับ

  1. ยังไงก็รบกวนพี่ Hack ช่วยเข้ามาดูให้ผมหน่อยนะคับ

    http://konlunla.blogspot.com/

  1. ตอนนี้ผม ถอด jquery 1.4.2 กับ ขั้นตอนที่ 3 ออกไว้ก่อนนะคับ
    เพราะผมต้องใช้ wibiya น่ะคับ บอกไว้ก่อนเพื่อ พี่ Hack เข้าไปดู

  1. <div id='main-wrapper'> ใน blogspot หาไม่เจอ

  1. @ R_FU : หาโค้ดในขั้นตอน 4.2 แทนนะครับ

  1. ช่วยด้วยครับ ของผมใส่สไลด์ใต้ navi แต่ภาพไม่โชว์ครับ
    http://chiangraibanbangkaew.blogspot.com

  1. @ CRbanbangkaew :

    ให้แก้จาวาสคริปต์จาก
    <script type='text/javascript'>
    $(document).ready(function() {
    $('#slider').s3Slider({
    timeOut: 3000
    });
    $('#slider1').s3Slider({
    timeOut: 4000
    });
    $('#slider2').s3Slider({
    timeOut: 5000
    });
    });
    </script>

    เป็น

    <script type='text/javascript'>
    $(document).ready(function() {
    $('#slider1').s3Slider({
    timeOut: 4000
    });
    });
    </script>

  1. แก้แล้วครับ มี ดิสเพลย์ แต่รูปไม่ออก เป็นสีดำ
    อีกอย่างถ้าต้องการ ให้ สไลด์นี้ ออกเฉพาะ หน้าแรก ไม่ออกหน้าเมนูอื่น ต้องแก้ไงบ้างครับ
    พอดีมือใหม่ หัดเล่น เลยงง ครับ
    ขอบคุณครับ

  1. อ้อ อาจารย์ครับ
    อยากให้สไลด์ วิ่งเต็ม แนวขวางด้วยครับ
    มือใหม่ ปัญหาเยอะครับ

  1. @ CRbanbangkaew :
    1. ถ้ารูปไม่แสดงแปลว่าผิดพลาดในการใส่โค้ดรูปครับ แนะนำให้ลาก Gadget มาไว้บนกล่องบทความบล็อกดีกว่าครับ

    2. วิธีซ่อน Gadget บางหน้าดูที่บทความนี้ครับ
    http://hackublog.blogspot.com/2009/11/gadget-sidebar.html

    3. ลไสด์แนวขวางต้องใช้สคริปต์อื่นครับ ถ้าเป็น s3slide ก็แสดงผลแบบเดียวครับ

  1. สวัสดีคะคุณ Hack
    อยากทราบว่าส่วนหัวของเวป http://www.moac.go.th/main.php?filename=index
    ใช้โปรแกรมอะไรทำ ภาพมันเลื่อน ขึ้น/ลงได้ และ fade in/out ได้
    ขอบคุณคะ

  1. สวยดีครับ

  1. ขอบพระคุณครับ

  1. รบกวนถามนิดนึงครับ ถ้าอยากเพิ่ม ปุ่ม(หรือ text ก็ได้ครับ) « prev กับ next »
    เพื่อคลิ๊กดูรูปถัดไป หรือ ดูรูปก่อนหน้า กับ สไลด์โชว์ S3slider นี้ ทำได้หรือเปล่าครับ
    แล้ว ทำอย่างไรครับ

    รบกวนด้วยครับ...ขอบคุณครับ

  1. แอบติดตาม เพจของพี่ค่ะ ขอบคุณนะค่ะที่นำความรู้มาให้ !!

  1. มันมีแต่ที่ว่างอะครับ ไม่มี slide ขึ้นเลย =___=

  1. ขอบคุณมากครับ เป็นประโยชน์อย่างมาก

  1. ลองทำไป เกือบทุกสไลด์แล้ว ไม่ขึ้นเลยสักอันครับ งง กับ โค้ดมากเลยพี่

  1. พี่ผมทำขั้นต้อนที่

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

    แม่แบบผมเป็นรุ่นใหม่ "" ""

    ถ้าผมไม่ใส่ HTML ในจุดนี้

    แต่เปลี่ยนไปลงในจุดของ Gadget เช่น บทความ ไรแบบนี้ แต่เลือกเป็นแบบ HTML ได้หรือป่าวครับ

    เบื้องต้นทำแล้ว มัน มีรูปและข้อความนะครับ แต่ไม่แสดงเป็นรูปแบบสไลด์เลยอะครับ

    งงต่อไปรอคำตอบอยู่ครับ

  1. อาจารคับ ผมจะเปลี่ยนภาพตัวอย่างยังไงอะครับ ผมกอบลิ้งของบล๊อคผมแล้วไปโพสในเฟสบุค แล้วภาพตัวอย่างมันเปนภาพวิวอะคับ มต้องทำไงบ้างอะคับ

  1. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

  1. เฮ้ออ งง จัง ผมความเรื่อมต้นยังไง ครับ จริงๆพี่อธิบายไม่น่าจะเข้าใจยากนะครับ แต่ผมโคตรงง มีครอสพื้นฐานไหมครับ ผมควรเริ่มมจากตรงไหนครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel