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

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 อาจจะไม่สามารถใช้ได้อย่างถาวร