วิธีแสดงรายการสินค้าบน Blogger ด้วย jQuery Slick Content Slider

สอนทำบล็อก วิธีแต่ง blogger และวิธีสร้าง blogspot Slick Content Slider เป็น Slidehow อีกชนิดหนึ่งที่มีจุดเด่นคือมีการ Control แบบ Slider แบบ Manual และสามารถแสดงผลของ Image  ,Text และ Link ได้ Slideshow ชนิดนี้เหมาะสำหรับคนที่ต้องการแสดงรายการสินค้าต่าง ๆ เป็นแบบ Feature และเชื่อมโยงไปยังเนื้อหารายละเอียดของสินค้า ทำให้เห็นภาพรวมของสินค้า  และค้นหาสินค้าได้ง่ายขึ้น

การทำงานของ Slick Content Slider ยังต้องอาศัยการทำงานของจาวาสคริปต์และ jQuery ด้วยเพื่อให้ภาพต่าง ๆ มีการเคลื่อนที่ได้ และผลลัพธ์ของการติดตั้งบน Blogger คุณสามารถดูได้จาก Link ด้านล่าง

Slick Content Slider DEMO
http://gsp-project.blogspot.com/
สอนทำบล็อก


วิธีติดตั้ง Slick Content Slider บน Blogger
การติดตั้งผมจะแบ่งเป็น 3 ขั้นตอน คือการกำหนด Style ด้วย CSS  การติดตั้งจาวาสคริปต์ และการแสดงผลของ Slick Content Slider ด้วย HTML โค้ด และในการติดตั้งครั้งนี้ต้องการพื้นที่ที่มีความกว้างประมาณ 800 px

ขั้นที่ 1 ติดตั้ง CSS code
เข้าไปที่แผงควบคุม blogger >> การออกแบบ(รูปแบบ) >> แก้ไข HTML

วิธีทำบล็อก
จากนั้นค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

#slick-slider{
width:800px;
margin:20px auto;
margin-bottom:20px;
padding:0;
}
.slick-slider-container,.titles{
color:white;
width:100%;
height:170px;         
overflow:hidden;
background:url(http://upic.me/i/z4/bg_dark.png) ;
padding:20px 10px 10px 10px;   
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
.titles{width:140px;padding:10px 15px;height:55px;}
.product{
width:370px;
height:150px;
background:url(http://upic.me/i/gv/product_bg.png) repeat-x;
padding:10px 0 0 0;
float:left;
margin-bottom:40px;
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
.product .pic{float:left;width:128px;height:128px;    padding:0 10px 5px;margin-top:-15px;}
.product .link,.product .price{font-size:10px;    text-transform:uppercase;padding:4px 0;}
.product .price{color:#CCCCCC;}
.product .title{font-size:16px;font-weight:bold;}
a, a:visited {color:#00BBFF;text-decoration:none;    outline:none;}
a:hover{text-decoration:underline;}
หมายเหตุ ความกว้าง 800 px อาจจะปรับแต่งเพิ่มลดได้บ้างเล้กน้อย เช่นอาจจะเพิ่มเป็น 820 หรือ ปรับลดเป็น 780 เป็นต้น


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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js' type='text/javascript'/>
<script src='http://siiam.bravehost.com/mopSlider-2.4.js' type='text/javascript'/>
<script src='http://siiam.bravehost.com/Slick_content_script.js' type='text/javascript'/>
<script src='http://siiam.bravehost.com/jquery.pngFix.js' type='text/javascript'/>


ขั้นที่ 3 ขั้นสุดท้ายติดตั้ง HTML
ในขั้นที่การติดตั้งค่อนข้างยืดหยุ่นคือ ไม่มีกฎเกณฑ์ในการติดตั้งว่าจะต้องติดตั้งในตำแหน่งใดของ Template ซึ่งบางคนอาจจะติดตั้งไว้ด้านบนของหน้า แต่บางคนก็อาจจะอยากติดตั้งไว้ด้านล่างของหน้าก็ได้

ในตัวอย่างนี้ผมจะยกตัวอย่างในการติดตั้ง Slick Content Slider เอาไว้ด้านล่างของ Header เหมือนที่คุณเห็นใน DEMO ซึ่งทำโดย
ค้นหาโค้ด
<div id='content-wrapper'>
หรือบางแม่แบบอาจจะพบโค้ด
<div id='content'>
จากนั้นวางโค้ดต่อไปนี้เอาไว้ก่อนหน้าหรือถัดจากโค้ดดังกล่าวก็ได้

<div class='clear'/>
<div id='slick-slider'>
<div class='slick-slider-container'>
<div id='slider'>

<div class="product">
<div class="pic">
<img src="http://upic.me/i/sa/zbgh1.png" width="128" height="128" alt="?Dell Vostro A860" />
</div>
<div class="title">?Dell Vostro A860</div>
<div class="price">$500</div>       
<div class="description">A great laptop for the business person.</div>
<div class="link">
<a href="http://dell.com/" target="blank">Find out more</a>
</div>
<div class="clear"></div>
</div>


<div class="product">
<div class="pic">
<img src="http://upic.me/i/xm/dlo62.png" width="128" height="128" alt="Sony Vaio VGN-FW31J" />
</div>
<div class="title">Sony Vaio VGN-FW31J</div>   
<div class="price">$640</div>       
<div class="description">A real on the road cinema.</div>
<div class="link">
<a href="http://sony.com/" target="blank">Find out more</a>
</div>
<div class="clear"></div>
</div>


<div class="product">
<div class="pic">
<img src="http://upic.me/i/i9/tt573.png" width="128" height="128" alt="Lenovo 3000 N200" />
</div>
<div class="title">Lenovo 3000 N200</div>   
<div class="price">$421</div>       
<div class="description">Budget means quality.</div>
<div class="link">
<a href="http://lenovo.com/" target="blank">Find out more</a>
</div>
<div class="clear"></div>
</div>


<div class="product">
<div class="pic">
<img src="http://upic.me/i/y6/g5cu4.png" width="128" height="128" alt="Acer Aspire 5738G" />
</div>
<div class="title">Acer Aspire 5738G</div>   
<div class="price">$553</div>       
<div class="description">A notebook for the true gamers.</div>
<div class="link">
<a href="http://acer.com/" target="blank">Find out more</a>
</div>
<div class="clear"></div>
</div>


<div class="product">
<div class="pic">
<img src="http://upic.me/i/kr/k2pc5.png" width="128" height="128" alt="MacBook Air" />
</div>
<div class="title">MacBook Air</div>   
<div class="price">$710</div>       
<div class="description">A special college edition notebook.</div>
<div class="link">
<a href="http://apple.com/" target="blank">Find out more</a>
</div>
<div class="clear"></div>
</div>


<!--เพิ่มชุดโค้ดของสินค้าอื่น ๆ ตรงนี้-->   

</div>
</div>
</div>


ถ้าต้องการเพิ่มโค้ดให้เพิ่มชุดโค้ดเหล่านี้ลงไปในตำแหน่งที่ระบุไว้ในโค้ดข้างบนครับ

<div class="product">
<div class="pic">
<img src="ใส่ URL ของรูป" width="128" height="128" alt="ใส่ Keyword ของรูป" />
</div>
<div class="title">ใส่ข้อความ Title </div>   
<div class="price">ใส่ราคา เช่น 15000 บาท</div>       
<div class="description">คำอธิบายสินค้า</div>
<div class="link">
<a href="ใส่ Link ของสินค้า" target="blank">ใส่ข้อความที่บอกให้หาข้อมูลเพิ่ม...เช่น ...ดูรายการสินค้าอื่น ๆ </a>
</div>
<div class="clear"></div>
</div>

เมื่อปรับแต่งตามที่ต้องการแล้วให้บันทึกแม่แบบ เท่านี้ก็จบขั้นตอนในการติดตั้ง Slick Content Slider ครับ

Credit Script: http://tutorialzine.com
Hack to Blogger: Mr.Hackublog

หมายเหตุ เพื่อป้องกันปัญหาในการใช้งานโปรดดาวน์โหลดสคริปตด้านล่าง

<script src='http://siiam.bravehost.com/mopSlider-2.4.js' type='text/javascript'/>
<script src='http://siiam.bravehost.com/Slick_content_script.js' type='text/javascript'/>
<script src='http://siiam.bravehost.com/jquery.pngFix.js' type='text/javascript'/>

และ upload หรือฝากไฟล์ด้วยตนเอง เนื่องจากไฟล์จาวาสคริปต์จาก Hackublog อาจจะไม่สามารถใช้ได้อย่างถาวร

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

  1. ขอบคุณสำหรับเวปดีดีมีประโยชน์แบบนี้และขอบคุณสำหรับคำตอบครั้งก่อน คราวนี้มีเรื่องมารบกวนอีกแล้วคะ อย่างถ้าเราตั้งให้แสดงหน้าละ 1 บทความเท่านั้น แต่เวลาเราคลิกดูที่หมวดหมู่มันจะขึ้นมาหน้าละหลายบทความ ไม่ขึ้น หน้าละ 1 อย่างที่ตั้งไว้ ถ้าอยากให้ขึ้นหน้าละ 1 บทความเวลาคลิกเลือกดูที่หมวดหมู่ต้องทำยังไงคะ ขอบคุณล่วงหน้าสำหรับคำตอบคะ ว่าแล้วก็ขอบคุณด้วยการไปคลิกโฆษณากลูเกิลให้ก่อนนะคะ ^ ^

  1. ตอบคุณ kokoio :

    เข้าไปที่หน้าแก้ไข HTML และต้องคลิกขยายแม่แบบเครื่องมือก่อนนะครับ

    ค้นหาโค้ด
    'data:label.url'

    เมื่อพบแล้วให้แทนที่ด้วยโค้ดต่อไปนี้
    'data:label.url + "?&max-results=1" '

    ปล.จะไม่คลิกโฆษณาก็ได้นะครับ ยินดีช่วยคนที่เดือดร้อนครับ

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

  1. ตอบคุณ kokoio :
    1. การทำเลขหน้าลองเลือกแบบใดแบบหนึ่งในหมวด Page Navigation ครับ
    http://www.hackublog.com/search/label/Page%20Navigation

    2. ถ้าต้องการลบ blog-pager ก็ให้นำโค้ดเหล่านี้ไปวางก่อนหน้าโค้ด ]]></b:skin>

    #blog-pager-newer-link,#blog-pager-older-link ,#blog-pager,.blog-pager {display: none;}


    3. ถ้าหาบทความใดไม่เจอลองเลือกบทความที่ตรงกับความต้องการจากสารบัญดูนะครับ
    http://www.hackublog.com/2009/01/blog-post.html

    ปล.ถ้าคำถามไม่เกี่ยวกับบทความผมอยากให้ไปถามที่ Forum ได้ไหมครับ >> คลิกที่เมนูข้างบนหรือไปตามลิงค์นี้ครับ
    http://www.hackublog.com/p/hackublog-forums.html

  1. ขออีกข้อได้มั้ยคะ เพราะมันเกี่ยวกับคำถามเเรกคะ โค้ดอันแรกมันใช้ไม่ไ้ด้คะ data:label.url + "?&max-results=1" ตรงหน้า maxต้องเป็นอะไรคะ ขอบคุณสำหรับลิงค์สารบัญ และแนะให้ไปฟอรั่มคะ มีสารบัญแล้ว หาบทความดีดีได้ง่ายขึ้น ^ ^

  1. ตอบคุณ kokoio : โค้ดที่โพสในกล่องคอมเมนต์มันถูกจำกัดครับ
    ให้ดาวน์โหลดโค้ดที่ถูกต้อง
    จาก >> http://hackublog-forums.781989.n3.nabble.com/file/n841483/max-label.txt

  1. ไม่ได้แวะเข้ามาตั้ง อาทิตย์กว่าๆ มัวแต่ไปเที่ยวเชียงใหม่มาครับ อิอิ

    ได้เวลากลับมาความรู้ จากเว็บนี้อีกรอบ ผมไม่แน่ใจว่าผมเอาลิ้งของคุณ hackublog ไปโพสไม่ทราบว่าได้ backlink มั่งหรือเปล่าครับ

  1. @ Hasekawa Masato : ผมต้องขอบคุณ ๆ Hasekawa มาก ๆ เลยครับเรื่อง Link แต่ก็ไม่มีอะไรจะตอบแทนครับ เอาเป็นว่าขาดเหลืออะไรคิดว่าผมพอช่วยได้ก็บอกมานะครับ (ถ้าช่วยได้ครับ)
    ปล.เชียงใหม่คงไม่เศร้าเหมือนกรุงเทพฯ ใช่ไหมครับ T_Y

  1. แค่ได้เอาไอเดียจากเว็บนี้เอาเป็นใช้ ก็ถือว่าคุ้มแล้วครับ ^^ ผมมีอะไรไปไม่ถูก ก็จะแวะมาถามนะครับ

  1. @ Hasekawa Masato : ยินดีครับผม

  1. Mr.Hackublog ผมลองทำตามตัวอย่างแต่ปรับขนาด

    #slick-slider{
    width:800px; เป็น 610px

    พอเลื่อนรูปมาจนสุดแล้วข้อความมันมาไม่หมดครับ ต้องปรับแก้ตัวเลขตรงใหนเพิ่มหรือป่าวครับ
    ตามตัวอย่างรูปดังนี้ครับ
    http://upic.me/i/ma/endegg.jpg

    ขอบคุณครับ

  1. ตอบคุณ Narin :
    เราสามารถปรับขนาดได้เพียงเล็กน้อยเท่านั้น เช่นเปลี่ยนจาก 800 เป็น 760 หรือ 820 เป็นต้น
    แต่ถ้าคุณ Narin ต้องการปรับจริง ๆ ก็แก้ค่า (ในขั้นที่ 1)
    .product{
    width:370px;

    เป็น(ประมาณ)
    .product{
    width:250px;

    ถ้ายังไม่พอดีก็ปรับเพิ่ม/ลดค่าตรงนี้อีกทีครับ

  1. ใส่โค็ดเหมือนเลยทุกอย่างเลย ...แต่สไลด์มีปัญหาคือภาพไม่เคลื่อนไหวอะคะ.....

  1. คือ...พี่ใส่เยอะเป็นพิเศษ จนงงกับ Interface ^_^
    คือ...แต่ขอบอกว่าพี่เก่งมากที่เอา feature facebook มาใช้ประโยชน์ได้มากมายขนาดนี้

    ขอบคุณค่ะจะพยายามศึกษาจากเนื้อหา...

  1. ใส่โค๊ดแล้วภาพไม่สไลด์ค่ะ

  1. @ Nuttawan ,Huafoo1 ,Blox Bluster : ผมแก้ไขจาวาสคริปต์ในขั้นที่ 2 ให้แล้วครับ ทำเสร็จแล้วอย่าลืม backup จาวาสคริปต์เอาไว้ด้วยครับ

  1. อยากจะขอรบกวนเรียนถามว่าพอจะมี Code HTML ที่เป็นเหมือน Slick Content Slider DEMO --->> http://gsp-project.blogspot.com/ นี้มั้ยครับ พอดีอยากที่จะแสดงสินค้าใน Blog ให้ออกมาคล้ายๆ แบบ DEMO ข้างต้นนี้ครับ(คือเป็นแบบ Auto + แสดงทีละสินค้าแบบใน DEMO ครับ) ขอบคุณมากครับ ส่วนตัวผมได้รับประโยชน์จาก คุณ Mr.Hackublog มากครับ หากมีโอกาสคงได้ตอบแทนครับ

  1. ขอรบกวนถามเพิ่มเติมครับว่า รายการโชว์สินค้ามันไม่เลื่อนให้แบบอัตโนมัติ ถ้าอยากให้มันเลื่อนอัตโนมัติจะทำอย่างไรครับ พอดีทำบนเว็บ http://www.dreamsprotector.com/ นี้ครับเกรงว่าลูกค้าจะให้ทันสังเกตุเห็น คำว่า Slice To View More ครับ ขอบคุณล่วงหน้าครับ

  1. ขอโทษนะครับ url ภาพเอามาจากใหนครับคือภาพอยู่ในคอมนะครับทำไงครับ ขอบคุณล่วงหน้าครับ

  1. ขอรบกวนช่วยด้วยครับ ผมโหลดTemplate ชื่อMcKinley Blogger Template มา (http://www.premiumbloggertemplates.com/mckinley-blogger-template/)แต่Slideโชว์แค่หน้าแรก อยากให้โชว์ทุกหน้า แก้ไขตรงไหน ทำอย่างไรครับ

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

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

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