Cara Membuat Gambar Slider di Blog
Berikut adalah kodenya
<style type="text/css">
.slider-box { background:none repeat scroll 0 0 #FAFAFA; border-radius:5px 5px 5px 5px; box-shadow:0 0 3px #333333; margin:0 auto; width:675px; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:550px; position:relative; text-align:left; z-index:90; }
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://www.seocips.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZOAIbpflXmWoG7S2tcl-Rk90khn0q5Eak2jTCHEHVMkKpSCw0PSrwWXbg14glJJBzcZdbXAsRdFB7mSN037KG14B9fvGGjrLfR8hIQ9QL1OkaSgADZVIGP5O1HfO4Vbka4Q8mEy2brLX/s550/sample1.jpg" title="Sunset"/></a>A boat with beautiful sunset.</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYWVJR5yHGTtP_N3bMxfyj9EaJI4W9YMhPvg7YqaIgwVSGFH7IM7Fmh-h0Hfoy87Owkl5J-YA0UBahZNJcMTY-bQKdDzAyx01ICwLZK_FrxO8xtxc7gzhmzZE5vkYe0gB69buGL2TMiv8l/s550/sample2.jpg" title="Rainbow"/></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxtA0iO3M_gLbOZxDZDGiD_uYnC9XpiZNCqimB21UoYvbeJTlNRbkSYavSTRROsDkoCl51LmHQP62WB556cCYyz0e5IFMpJElAPhgzL0Wv818Pt5zc_RbSb5K-aIErVyIFylsyB-vXnhE/s550/sample3.jpg" title="True Nature"/></a>Tree in field with blue sky.</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIZQS0IsnItu1vMY8n-gFw9pI47PH3_h_BAeYUDR_AcrBFShWU16kM-3fPROG9Vleg-tz_Pb4_f2ZLffnmQlf1dJEZ6EhcjmqQHuEveooJT-svJIKiBwyEV6ILovzNrld4dnOG8S2ATR/s550/sample4.jpg" title="Sunrise""/></a>Amaizing sunrise moment</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVY5sO4OZvS9w_gNH0uCVZOWhvGe7mqmlF8WRVWU8FNkU2Nzs7dsKfL2qxtG-3ZFcKSnrlstpmYevY0TExReNFp5mqM-yqNbYOX4DiLiwk2oTQXeFH6cDQZdOFasjIcUDtReINuerk7Ny5/s550/sample5.jpg" title="CAR in HDR Nature"/></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDIgb3sjjHTcAWvQClBGJTXPKPORuzJeniTY6cb49tY1vxtAS-7y5DUwNpfNhD_CrpQ6PmrrfXBy78Pq0T_77BDhK109XdRHwUkkFsfmbUYvKnU1JN3zKF4k83Gf2S8dULHBzLqwK7AGg/s550/sample6.jpg" title="Sunshine"/></a></li></ul></div><div class="jslider_thumbs"><div><a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdWznFNESWntOeVza69XHcGsQVnJ3IbATHPJ2gN7TQYhzIK8ptOjbiN4CC5eJAa7lQ3n8sWSAInf2Bkrb0rrH-0IEFID52zUsDx0vAOqw-0MCAx3452RwY2kmcnYvrixz9c_7CkmgihBc/s85/sample1.jpg"/></a><a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU2X5iHiJmz8wa-qVybvjzsBtO45iUWQAq4y4XnjBBB3cvljA08KnCJomRw2NL17yI5hmhRlZRBrOH0GXNr4P1Qva9HnVDmCxUVuGmuvH-Fk9a0pJras89liR1PJojLqSM_OHULOqicOy/s85/sample2.jpg"/></a><a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrPdYUaOQ3L8cJF6KwX4HgC5lUzWr-lA6a_quHtPtzah6pUtLx3lrzh3jwJ8kyjpx0ZPUavBCtJkdZULykoehHU9QQpzLyY0JCzrBgujD7rrPNPTPZLTWGRMlrfOrEipW6Qmiib5x-xKc/s85/sample3.jpg"/></a><a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GwufPI_-z9lgSfnC9TeM2RVIW8pODwXW3z5PUdhUSSjHVm4x1Cxdbt9Gh-3SHD0QjL1VmJbP6PIZ_5Ht3t2WYnJRAiDAVt93imhW7K4iCbXf02kkQ-aQU6Fq91ZbmahgZYhs5HP_Anjm/s85/sample4.jpg"/></a><a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgn3JBczjZtvkt9yYPbF-sPAb18rcl6RwRwzDTw7ujRsHGpUCfx62CHXWRMVBmTY03DhxjiH2LiydhzskW3S3lp_4_E8WGVQ9cipUVRL85e6WOifY-75o2pxZqDAwQz1BbPk6NBCRfZyG/s85/sample5.jpg"/></a><a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCerpjqy-Mn7-fmW-53-0zyjh_07M5CvF16WYm7UNO-Fsw2U0rUR2Fr7fVJTiDm3ZHRKj9Y7KLHQPTeQ2hcG_eJrRapqEaBcDam7Wtem6bPwc0zCOEoaH1mwrn7yZ3du22tzIM8zgPuMWa/s85/sample6.jpg"/></a></div></div></div></div></div>
.slider-box { background:none repeat scroll 0 0 #FAFAFA; border-radius:5px 5px 5px 5px; box-shadow:0 0 3px #333333; margin:0 auto; width:675px; overflow:hidden; }
#slider-wrapper { margin:0 auto; padding:10px; }
#jslider-container { border:2px solid #FFFFFF; max-width:550px; position:relative; text-align:left; z-index:90; }
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box"><div id="slider-wrapper"><div id="jslider-container"><div class="jslider_images"><ul><li><a href="http://www.seocips.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZOAIbpflXmWoG7S2tcl-Rk90khn0q5Eak2jTCHEHVMkKpSCw0PSrwWXbg14glJJBzcZdbXAsRdFB7mSN037KG14B9fvGGjrLfR8hIQ9QL1OkaSgADZVIGP5O1HfO4Vbka4Q8mEy2brLX/s550/sample1.jpg" title="Sunset"/></a>A boat with beautiful sunset.</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYWVJR5yHGTtP_N3bMxfyj9EaJI4W9YMhPvg7YqaIgwVSGFH7IM7Fmh-h0Hfoy87Owkl5J-YA0UBahZNJcMTY-bQKdDzAyx01ICwLZK_FrxO8xtxc7gzhmzZE5vkYe0gB69buGL2TMiv8l/s550/sample2.jpg" title="Rainbow"/></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxtA0iO3M_gLbOZxDZDGiD_uYnC9XpiZNCqimB21UoYvbeJTlNRbkSYavSTRROsDkoCl51LmHQP62WB556cCYyz0e5IFMpJElAPhgzL0Wv818Pt5zc_RbSb5K-aIErVyIFylsyB-vXnhE/s550/sample3.jpg" title="True Nature"/></a>Tree in field with blue sky.</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEIZQS0IsnItu1vMY8n-gFw9pI47PH3_h_BAeYUDR_AcrBFShWU16kM-3fPROG9Vleg-tz_Pb4_f2ZLffnmQlf1dJEZ6EhcjmqQHuEveooJT-svJIKiBwyEV6ILovzNrld4dnOG8S2ATR/s550/sample4.jpg" title="Sunrise""/></a>Amaizing sunrise moment</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVY5sO4OZvS9w_gNH0uCVZOWhvGe7mqmlF8WRVWU8FNkU2Nzs7dsKfL2qxtG-3ZFcKSnrlstpmYevY0TExReNFp5mqM-yqNbYOX4DiLiwk2oTQXeFH6cDQZdOFasjIcUDtReINuerk7Ny5/s550/sample5.jpg" title="CAR in HDR Nature"/></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDIgb3sjjHTcAWvQClBGJTXPKPORuzJeniTY6cb49tY1vxtAS-7y5DUwNpfNhD_CrpQ6PmrrfXBy78Pq0T_77BDhK109XdRHwUkkFsfmbUYvKnU1JN3zKF4k83Gf2S8dULHBzLqwK7AGg/s550/sample6.jpg" title="Sunshine"/></a></li></ul></div><div class="jslider_thumbs"><div><a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdWznFNESWntOeVza69XHcGsQVnJ3IbATHPJ2gN7TQYhzIK8ptOjbiN4CC5eJAa7lQ3n8sWSAInf2Bkrb0rrH-0IEFID52zUsDx0vAOqw-0MCAx3452RwY2kmcnYvrixz9c_7CkmgihBc/s85/sample1.jpg"/></a><a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU2X5iHiJmz8wa-qVybvjzsBtO45iUWQAq4y4XnjBBB3cvljA08KnCJomRw2NL17yI5hmhRlZRBrOH0GXNr4P1Qva9HnVDmCxUVuGmuvH-Fk9a0pJras89liR1PJojLqSM_OHULOqicOy/s85/sample2.jpg"/></a><a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrPdYUaOQ3L8cJF6KwX4HgC5lUzWr-lA6a_quHtPtzah6pUtLx3lrzh3jwJ8kyjpx0ZPUavBCtJkdZULykoehHU9QQpzLyY0JCzrBgujD7rrPNPTPZLTWGRMlrfOrEipW6Qmiib5x-xKc/s85/sample3.jpg"/></a><a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GwufPI_-z9lgSfnC9TeM2RVIW8pODwXW3z5PUdhUSSjHVm4x1Cxdbt9Gh-3SHD0QjL1VmJbP6PIZ_5Ht3t2WYnJRAiDAVt93imhW7K4iCbXf02kkQ-aQU6Fq91ZbmahgZYhs5HP_Anjm/s85/sample4.jpg"/></a><a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgn3JBczjZtvkt9yYPbF-sPAb18rcl6RwRwzDTw7ujRsHGpUCfx62CHXWRMVBmTY03DhxjiH2LiydhzskW3S3lp_4_E8WGVQ9cipUVRL85e6WOifY-75o2pxZqDAwQz1BbPk6NBCRfZyG/s85/sample5.jpg"/></a><a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCerpjqy-Mn7-fmW-53-0zyjh_07M5CvF16WYm7UNO-Fsw2U0rUR2Fr7fVJTiDm3ZHRKj9Y7KLHQPTeQ2hcG_eJrRapqEaBcDam7Wtem6bPwc0zCOEoaH1mwrn7yZ3du22tzIM8zgPuMWa/s85/sample6.jpg"/></a></div></div></div></div></div>
0 komentar:
Posting Komentar