 |
| ภาพตัวอย่าง |
พอดีผมไปเจอโค้ดสไลค์มา ก็เลยเอามาแบ่งปัน ให้ทุกท่านได้ลองใช้กัน ครับ
ส่วนขั้นตอนการใส่โค้ด ในบล็อกเกอร์ มีขั้นตอนง่ายๆ ครับ เพียง ก็อปปี๊ ตัวโค้ด ที่ผมให้ไว้ด้านล่าง แล้วก็นำไปวาง ที่ HTML ของบล็อก ก็ได้สไลค์สวยๆแล้ว
ตรงที่เคลือบสีไว้สามารถเปลี่ยนรูปภาพของตัวเองได้ เพียงทางมี URL ของรูปภาพนั้นๆ
___________________________________________CODE________________________________
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpFyCUp9wHZV2j4fi7A9F0GiLUvFPIcuGmV7fr4wmIBM9Ph2p2BoOJfgSjDcpBCUwSO3MoQLcINlY2SiM_QxoB1ae1LSJqQIx9f5BVSdbsD1ZnaOoVDnFNVBkfo4lhfvRlDw_qAPRMTGCr/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFP_zx8NvwITCiigbf4XfM4XpNvBG3DGhv7ey2fJF2siD3jrlTOID1arXwi8Ek18ChXBFSED4x2zXE_kck9SX-X_2zylpKunDIEtGYjfcYgqJR49Y1OTLzNUgjfHy2ZvpwvMESBgFU0m-Z/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhMdoOoFjSvq3MF_bGPI9THarAv1loKYLQOA3G7CyrxCRAcqgfQHDUFS47bdC_EMqd2ESve9oobd5RTMn2gpPju7T7ekOdUGiJXY4zxihyQESODLBFmRfPxZBkqKPMvoc0DKWIrP7-uFo/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSXzXXUcGidUAKB5ywac19uLV7Ko1sSmBVnwzLbM-er68vZACMVm70qD7dqkCauXlgav0Rrnxit0EPsYzA3hZNxDQseZzBVhXgrHO5vwRW0wDLXbFgdRC3YWhh-ffZU3mzdpf-4b1xndKd/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpr8gVG5bZqdqgSNlkiBr3x6KiW1yYZ6hRsS9gvFBSm-lUqUOo7TTdnSggcaCwW-j3A_8EFbAQrfuISoeWayX1pxxCt3QUQi6P2d_cVmSPAUvhT-YhMzVxuvuGn7UC4TMCX3RjzszF3Zu/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVZZtG-R7h7P6WImv-O83MjxRPKaH_wVrcvl4eHXpN04mtOUXGqw9O8-KcW1bLp6BOKFgZTDRFQ0zS8PaE74OFy1X2hKxLw58k1SW9GatBX-L5xhK59jNM5Q_7kNjcUzmrYXPLKlvZjiG/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAl7XArXS7KChAwZU61_5n0alHme-ckGH6mzRPKSN5-xmzeFGTLPD6CtO0bhxpORM3hcTSlN3KzS4JQgOpqDv5_vLM3f87m0HS2hHW5YEMCnQFy3d9_vONtv_CGv48pHBZiz4u4iVHNoD2/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>
________________________________________________________________________________
ขั้นตอน ใส่ โค้ด HTML
1.ไปที่รูปแบบ คลิกเลือก เพื่ม Gadget
2.เลือนหา HTML จาวาสคิปต์ คลิก
3.วางโค้ดลงไปในช่อง กดเซฟ จัดวางสไลค์ได้ตามใจชอบได้เลยครับ
เป็นยังไงกันบ้างครับ ง่ายๆ แค่นี้ก็มี สไลค์สวยๆติดบล็อกของเราแล้ว
โดย VinsLike.
หากเนื้อหาใดไม่เหมาะสม กรุณาแจ้งกับทางเรา
ขอบคุณข้อมูล.
เยี่ยมมากครับ.....ขอบคุณ....ในวิทยาทานของท่าน
ตอบลบ