• প্রথমে ব্লগস্পট ব্লগের ড্যাশবোর্ডে লগিন করুন।
• এখন আপনি আপনার ব্লগের যে স্থানে এই স্লাইডারটি লাগাতে চান সেখানে নিচের কোডগুলো বসান। আপনি লেয়াউট থেকেই সাধারনত এই কাজটি করতে পারবেন। কিন্ত আপনি যদি লেয়াউটে কাঙ্ক্ষিত জায়গা যেমন ব্লগ টিউনের প্রথমে তাহলে আপনাকে কষ্ট করে টেমপ্লেটের এইচটিএমএল কোডে যেয়ে স্লাইডারটি লাগাতে পারেন। তবে এর জন্য আপনাকে কিছুটা এইচটিএমএল কোড জানতে হবে। কারণ টেমপ্লেট থেকে সঠিক জায়গাটি খুঁজে বের করতে হবে আপনার এইচটিএমএল জ্ঞান দিয়ে।

<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(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/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(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/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="<span style="color: #ff0000;">#</span>"><img src="<span style="color: #ff0000;">http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg</span>" alt="<span style="color: #ff0000;">#htmlcaption1</span>" /></a> <a href="<span style="color: #ff0000;">#</span>"><img src="<span style="color: #ff0000;">http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg</span>" alt="<span style="color: #ff0000;">Go UP!</span>" /></a> <a href="<span style="color: #ff0000;">#</span>"><img src="<span style="color: #ff0000;">http://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg</span>" alt="<span style="color: #ff0000;">Pure Javascript. No jQuery. No flash.</span>" /></a> <a href="<span style="color: #ff0000;">#</span>"><img src="<span style="color: #ff0000;">http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg</span>" alt="<span style="color: #ff0000;">#htmlcaption2</span>" /></a> <a href="<span style="color: #ff0000;">#</span>"><img src="<span style="color: #ff0000;">http://1.bp.blogspot.com/-qkKwbfW234Y/UR-VLZRV6hI/AAAAAAAABnk/pO5-b99UmGo/s1600/image-slider-5.jpg</span>" alt="<span style="color: #ff0000;">Stay Connected"</span>/></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>

• এখন স্লাইডার কোডগুলোতে আপনার ইমেজ, লিংক এবং শিরোনামগুলো পরিবর্তন করার পর Save করে দেখুন চমৎকার এই স্লাইডারটি। আপনার জন্য রয়েছে আরও একটি বোনাস টিপস। যদি স্লাইডারটি শুধুমাত্র হোমপেজে দেখাতে চান তাহলে উপরের কোডগুলোর সবার প্রথমে <b:if cond='data:blog.url == data:blog.homepageUrl'> এবং সবার শেষে </b:if> যুক্ত করে দিন। যদি ইমেজ, লিংক এবং টাইটেল পরিবর্তন করতে সমস্যা হয় তাহলে এখানে থেকে দেখে নিন সংক্ষিপ্ত টিউটোরিয়াল।

সময়ের অভাবে স্লাইডার কাস্টমাইজেশনের জন্য বিস্তারিত লিখতে পারলাম না। তবে সমস্যা হলে আমাকে জানাবেন। আমার ব্লগ -এ আমন্ত্রণ রইল সবসময়। ধন্যবাদ