การสร้าง jQuery slider blogger เอาใจคนที่ใช้ blogger เพื่อโปรโมทร้านขายขนมเค้ก เบเกอรี่ หรือผลิตภัณฑ์ของตัวเองให้ดูมีความน่าเชื่อถือมากขึ้น


ตัวอย่าง >> jQuery Slider ร้านขนมเค้ก

เรามาสร้าง jQuery slider blogger เตรียมบล็อกของตัวเองไว้เลย ก่อนอื่นเพื่อนๆ ต้องเลือกตำแหน่งในหน้าบล็อกของตัวเองก่อนว่าจะให้อยู่ตรงส่วนใด ก็แล้วแต่สไตล์และความคิดสร้างสรรค์ของแต่ละคน

1. ไปที่ blogger >> การออกแบบ >> แก้ไข HTML
2. ติ้กถูกที่ "ขยายเทมเพลตวิดเจ็ต" Ctrl + F แล้วให้ค้นหาโค้ด<![CDATA[
3. ให้เพื่อนๆ Copy โค้ดด้านล่างนี้ไปใส่ก่อนโค้ด <![CDATA[ แล้วกด "บันทึกแม่แบบ" ไว้ก่อน

.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(https://sites.google.com/site/freeforblogs/home/code/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li .prev {left: -20px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(https://sites.google.com/site/freeforblogs/home/code/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

3. ต่อไปเราจะทำการใส่โค้ด Java ลงไป กด Ctrl + F แล้วค้นหาโค้ด </head>
4. Copy โค้ดที่ผมเตรียมมาให้ใส่ลงก่อนโค้ด </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/freeforblogs/home/code/jquery.flexslider-min.js"></script>
<script type='text/javascript'>
//<![CDATA[
        $(window).load(function() {
            $('.flexslider').flexslider();
        });
//]]>
</script>
แล้วกด "บันทึกแม่แบบ" ต่อไปให้เรากำหนดการแสดงผลของ jQuery บนบล็อกของเรา



นำโค้ดด้านล่างนี้ไปใส่ที่เก็ต HTML/จาวาสคริปต์

<div class="flexslider">
<ul class="slides">
<li>
<img src="" />
<p class="flex-caption">รายละเอียด</p>
</li>
<li>
<a href=""><img src="" /></a>
<p class="flex-caption">รายละเอียด</p>
</li>
<li>
<img src="" />
</li>
<li>
<img src="" />
</li>
</ul>
</div>

ให้เพื่อนๆดูที่โค้ดตรง <img src="" /> สามารถใส่ url ของรูปลงไป และสามารถใส่ Link และรายละเอียดของภาพลงไปได้

ถ้าต้องการให้ jQuery เพิ่มการแสดงแลของภาพมากขึ้นก็ใส่เพิ่มโค้ด
<li>
<img src="" />
</li>
เมื่อปรับแต่งโค้ดเรียบร้อยแล้วให้กด "บันทึก" แค่นี้เราก็ได้ jQuery Slider น่ารักๆ บนบล็อกของเราแล้ว ผิดพลาดตรงส่วนใดสามารถ comment แสดงความคิดเห็นได้ครับ