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

วิธีทำ blogger

ชื่อเรียก Anything Slider นั้นมาจากสาเหตุที่ Slide ชนิดนี้สามารถแสดงผลได้ทั้งรูปภาพ ข้อความ หรือทั้งข้อความและรูปภาพผสมกัน

จุดเด่นของ Slide ชนิดนี้ นอกจากจะแสดงผลได้หลากหลายแล้ว ยังมี Control bar สำหรับเลือกแสดงภาพได้เอง และยังสามารถสั่งให้การทำงานหยุดลงและเริ่มต้นขึ้นได้ด้วย

ตัวอย่างการทำงานของ Anything Slider สามารถคลิกชมได้จาก Link ด้านล่าง


วิธีติดตั้ง


Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ

สอน blogger



ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด  ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว


*{ margin: 0; padding: 0;}
.anythingSlider{ width: 760px; height: 360px; position: relative; margin: 0 auto 15px;}
.anythingSlider .wrapper1{ width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; }
.anythingSlider .wrapper1 ul{ width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
.anythingSlider ul li{ display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow{ display: block; height: 200px; width: 67px; background: url(http://upic.me/i/pv/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: -20px; }
.anythingSlider .back { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover{ background-position: 0 -200px; }
.anythingSlider .back:hover { background-position: -67px -200px; }
/* For Specific Slides */
#textSlide { padding: 10px 30px; }
#textSlide h3 { font: 20px Georgia, Serif; }
#textSlide h4 { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
#textSlide ul { list-style: disc; margin: 0 0 0 25px; }
#textSlide ul li { display: list-item; }
#quoteSlide{ padding: 30px; }
#quoteSlide blockquote { font: 16px Georgia, Serif; /*text-align: center;*/ color: #444; margin: 0 0 10px 0; }
/*#quoteSlide p{ text-align: center; }*/
#thumbNav { position: relative; top: 323px; text-align: center; }
#thumbNav a{ color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(http://upic.me/i/0b/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover { background-image: none; }
#thumbNav a.cur { background: #e0a213; }
#start-stop{ background: green; background-image: url(http://upic.me/i/0b/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing { background-color: red; }
#start-stop:hover { background-image: none; }
/* Prevents*/
.anythingSlider .wrapper1 ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper1 ul ul li { float: none; height: auto; width: auto; background: none; }




ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง Java Script ซึ่งทำโดยค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://hackublox.googlecode.com/files/jquery.easing.1.2.js"></script>
<script src="http://hackublox.googlecode.com/files/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}

$(function () {

$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});

$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});

</script>





ขั้นที่ 3 ในขั้นนี้เป็นการวางตำแหน่งของ Garelly ด้วย HTML ซึ่งวางได้หลายตำแหน่งแล้วแต่ความต้องการ เช่น


ถ้าต้องการให้ Anything Slider อยู่ถัดจากส่วนหัวของหน้าและอยู่ด้านล่าง Menu bar (Navigation bar) ก็ให้ค้นหาโค้ด

<div id='content'>

แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว



<Div class="anythingSlider">
<div class='wrapper1'>
<ul>

<li><img src="http://upic.me/i/2z/slidecivil1.jpg" alt="" height='317' width='680'/></li>

<li><div id="textSlide">
                   <img src="http://upic.me/i/m8/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" width='250' height='250'/>
                   <h3>หัวข้อของข้อความทางซ้าย</h3>
                   <h4>หัวข้อรองทางซ้าย</h4>
                    <ul>
                        <li>รายการที่ 1</li>
                        <li>รายการที่ 2</li>
                        <li>รายการที่ 3</li>
                        <li>รายการที่ 4</li>
                        <li>รายการที่ 5</li>
                    </ul>
</div></li>

<li><img src="http://upic.me/i/ns/slideenv1.jpg" alt="" height='317' width='680'/></li>

<li><img src="http://upic.me/i/0t/slidecivil2.jpg" alt=""  height='317' width='680'/></li>

<li><div id="quoteSlide">
                    <blockquote>ใส่ข้อความอย่างเดียว</blockquote>
                    <p> - <a id='perma' href='http://hackublog.blogspot.com '>Hackublog</a></p>
</div></li>

<li><img src="http://upic.me/i/bi/slideenv2.jpg" alt="" height='317' width='680'/></li>

</ul>
</div>        
</Div>



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



หมายเหตุ หากต้องการเพิ่มจำนวนภาพ(หรือข้อความ) ให้มากกว่า 6 ภาพ ก็แก้ค่าตัวเลข (6) ในขั้นที่ 2 แล้วเพิ่มโค้ดต่อไปนี้ลงไปอีกให้เท่ากับจำนวนที่เพิ่มขึ้น

ตัวอย่างโค้ดภาพ
<li><img alt=''  src='ใส่URLของรูป' height='317' width='680'/></li>


ตัวอย่างโค้ดข้อความ
<li><div id="quoteSlide">
                    <blockquote>ใส่ข้อความอย่างเดียว</blockquote>
</div></li>




ตัวอย่างโค้ดข้อความและภาพ
<li><div id="textSlide">
                   <img src="ใส่URLของรูป" alt="" style="float: right; margin: 0 0 2px 10px;" width='250' height='250'/>
                   <h3>หัวข้อของข้อความทางซ้าย</h3>
                   <h4>หัวข้อรองทางซ้าย</h4>
                    <ul>
                        <li>รายการที่ 1</li>
                        <li>รายการที่ 2</li>
                        <li>รายการที่ 3</li>
                        <li>รายการที่ 4</li>
                        <li>รายการที่ 5</li>
                    </ul>
</div></li>




ตัวอย่างโค้ดที่ผมใช้ใน DEMO

<Div class='anythingSlider'>
<div class='wrapper1'>
<ul>
<li><img alt='' height='317' src='http://upic.me/i/st/buenos_aires.jpg' width='680'/></li>
<li><img alt='' height='317' src='http://upic.me/i/8g/3402757021_45a780d660.jpg' width='680'/></li>
<li><div id='textSlide'>
                   <img alt='tomato sandwich' height='250' src='http://upic.me/i/m8/251356.jpg' style='float: right; margin: 0 0 2px 10px;' width='250'/>

                    <h3>หัวข้อของข้อความทางซ้าย</h3>
                   <h4>หัวข้อรองทางซ้าย</h4>
                    <ul>
                        <li>รายการที่ 1</li>
                        <li>รายการที่ 2</li>
                        <li>รายการที่ 3</li>
                        <li>รายการที่ 4</li>
                        <li>รายการที่ 5</li>
                    </ul>
</div></li>
          
<li><img alt='' height='317' src='http://upic.me/i/hs/3403568620_cf6cf793b7.jpg' width='680'/></li>             
<li><img alt='' height='317' src='http://upic.me/i/93/beatifulmollusc.jpg' width='680'/></li>
<li><div id='quoteSlide'>
                    <h4>ไอน์สไตน์</h4>
                    <blockquote>ไอน์สไตน์ เกิดเมื่อวันที่ 14 มีนาคม ปี คศ. 1879 ที่เมืองอูล์ม ทางตอนใต้ของประเทศเยอรมันนี บิดาของไอน์สไตน์เป็นชาวยิว มีชีวิตในวัยเด็กเหมือนเด็กทั่วไป มีการกล่าวกันว่าจุดที่ทำให้ไอ น์สไตน์มาสนใจวิทยาศาสตร์อย่างมากคือเข็มทิศ ในขณะนั้นเขามีอายุได้ 5 ปี และกำลังนอนป่วยอยู่บนเตียง บิดาได้นำเข็มทิศมาให้เล่น เขาใส่ใจและสนใจอยากรู้ว่าทำไมเข็มทิศจึงชี้ไปทาง ทิศเหนือ และตั้งแต่นั้นมาเขาเริ่มสนใจทาง คณิตศาสตร์และฟิสิกส์</blockquote>
                    <a href='http://www.pccpl.ac.th/~tech/Obec/digital_library/snet2/mathematicians/einstein.htm' id='perma'>อ่านต่อ</a>
</div></li>              
<li><img alt='' height='317' src='http://upic.me/i/qc/ben_beatiful.jpg' width='680'/></li>
<li><img alt='' height='317' src='http://upic.me/i/mx/columbia.jpg' width='680'/></li>
<li><img alt='' height='317' src='http://upic.me/i/ok/mostbeatiful.jpg' width='680'/></li>
<li><img alt='' height='317' src='http://upic.me/i/j7/premier.jpg' width='680'/></li>
</ul>
</div>        
</Div>



หากมีปัญหาในการติดตั้งโปรดสอบถามที่กล่อง comment ด้านล่างบทความนี้ครับ

เครดิต : css-tricks.com
Hack to blogger : Hackublog

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

  1. ช่วยด้วยค่ะ ดิฉันติดตั้ง Anything Slider และใช้ Animate Hoverเพื่อโชว์สินค้า
    ปัญหาก็คือ เมื่อใช่ร่วมกัน Anything Slider ไม่ยอมสไลด์
    http://fishhatcheryfarm.blogspot.com/
    รบกวนด้วยนะค่ะ

  1. สวัสดีครับ ไม่ทราบว่าคุณชื่ออะไร จะให้ผมเรียกว่าอะไรดีครับ
    เนื่องจากในแม่แบบคุณได้ติดตั้ง
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
    ดังนั้นในการติดตั้ง Animate Hover ไม่จำเป็นต้องใช้โค้ด
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

    นั่นแปลว่าถ้าติดตั้งลงไปแล้วก็ให้ลบโค้ดบรรทัด
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
    ทิ้งไปได้เลยครับ

  1. ช่วยด้วยคับ
    คือว่าผมทำ Anything Slider
    แล้วเวลา ภาพที่สไลด์ ถัดไปเรื่อยๆ กับต่ำลงเรื่อยๆ
    พอกับมาภาพแรก ก็สูงเท่าเดิม
    ควรทำยังไงหรอคับ

  1. หรือเกี่ยวกับการที่ผมนำ สไลด์ ไปติดที่บทความ คับ

  1. ติดในตำแหน่ง gadget ดีกว่าครับ ถ้าต้องการติดในบทความแนะนำให้ใช้ slide.com ครับผม
    1. ทำตามบทความนี้ครับ http://www.hackublog.com/2010/07/how-to-make-new-gadget-area-on-blogger.html
    2. แล้วก็ใส่โค้ด HTML ของ slide ตามไปทีหลังครับ

  1. หรือเกี่ยวกับ script พวกนี้ที่ผมมี คับ

    script 1.3.2/jquery.min.js

    script files/popup.js

    script 1.2.6/jquery.min.js

    script 1.3.2/jquery.js

    script files/jquery.easing.1.2.js

    script charset='utf-8'

  1. สคริต์ซ้ำหลายอันนะครับ ใช้ข้างล่างนี้
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

    แทน 1.3.2 และ 1.2.6
    เอาพวกนี้ออก script 1.3.2/jquery.min.js , script 1.2.6/jquery.min.js, script 1.3.2/jquery.js แล้วใช้ 1.4.2 ตัวเดียว เพราะเป็นการเรียกใช้ jQuery ซ้ำ

    ส่วนเรื่องภาพ มันเป็นผลจาก style ในบทความครับ


    ทำตามที่บอกครับใน rep แรกครับ

  1. อ่อ,,,,ขอบคุณมากครับ

  1. ทำไมของเรา มันไม่เลือนเองล่ะคร่ะ

    ติดตั้งแล้ว ไม่เห็นเมื่อให้แบบ ตัวอย่างเลยล่ะคร่ะ

    มือใหม่นะคร่ะ ช่วยสอนหน่อยนะคร่ะ

  1. @Kanala: แก้โค้ดขั้นที่ 2 ใหม่นะครับ โค้ดเดิมจาวาสคริปต์หมดอายุไขไปเลยมีปัยหา แต่ผมแก้ไขให้แล้ว ลองดูอีกครั้งครับ

  1. ถามนิดนึงครับ.....ผมเป็น Bloger มือใหม่ (มากๆ) จนไม่สามารถเข้าใจวิธีการได้อะครับ คือพอลองทำตามคำแนะนำแล้วก็ไม่มีอะไรเกิดขึ้น อธิบายง่ายๆแบบนี้ครับ คือผมไว้เข้าใจตั้งแต่ คำว่าวาง ก่อนหน้า วางต่อท้าย วิธีที่ผมทำคือ Copy แล้วนำไปวางเลยถูกมั้ยครับ หรือยังไงเพราะพอทำแบบนั้นแล้วก็ไม่มีไรเกิดขึ้น ยังไงอธิบายการเพิ่ม สคริป ลงใน blog ใหเด้วยจะเป็นพระคุณมากครับ

  1. สวัสดีค่ะ

    ชื่อตัวเล็กค่ะ จะรบกวนสอบถามว่า ถ้าอยากได้สไลด์โชว์รูปภาพไปใส่ในร้านค้าออนไลน์ต้องนำไปใส่ในไหน ยังไงอ่ะคะ รบกวนด้วยนะคะ เว็บไซต์นี้ค่ะ http://hellobeauty.ibuy.co.th/shop

    ตัวเล็กเข้ามาอ่านบทความคุณบ่อยๆ ได้ความรู้ดีมากๆ

    ขอบคุณค่ะ

  1. ปรับขนาดยังไงหรอครับ...

  1. ผมหา div id='content' ไม่เจอ

  1. ผมหา div id='content' ไม่เจอ
    มีคำอื่นไหม อะ ครับ

  1. ซ่วยหน่อยนะ ครับ เจ๋ว มาก ครับ

  1. ไม่ได้ค่ะ มันฟ้อง xml ผิดพลาดอะไรเนี่ยแหล่ะ

  1. สวัสดีค่ะ มีปัญหาอยากให้สไลด์อยู่ใต้ เมนูบาร์อะค่ะ ต้องทำยังไรคะ ขอบคุณค่ะ

  1. ผมอยากติดตั่ง ภาพสไล ในกล่อง จาวาสคริปด้านข้างทำยังไงหรอครับ

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

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

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