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

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

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

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

Anything Slider DEMO

วิธีติดตั้ง 


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

ขั้นที่ 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>