আপনারা যারা ব্লগিং করেন তাঁরা প্রায়ই ভালো একটি ফিচার ইমেজ স্লাইডার খুঁজে থাকেন। কিন্তু সহজে মন মতো স্লাইডার খুঁজে পান না। একেকটি স্লাইডারের একেক সমস্যা আমাদের কাছে ধরা পড়ে। আজ একটি চমৎকার ইমেজ স্লাইডার সন্ধান দিচ্ছি ব্লগস্পট ব্লগের জন্য। গ্যারান্টি দিচ্ছিনা তবে বলছি, দেখুন আশা করি খারাপ লাগবেনা। এর মাধ্যমে আপনি সহজেই ব্লগে পছন্দের কিছু ইমেজ অথবা নির্বাচিত পোষ্টগুলো ফিচার আকারে দেখাতে পারবেন। আর প্রতিটা ইমেজ স্লাইডারের একটি বড় সমস্যা হল এইসব ইমেজ স্লাইডার গুলো চলতে কম্পিউটারে ফ্ল্যাশ সফটওয়্যার থাকতে হয়। কিন্তু অনেক সময় প্রায় ভিজিটরসের পিসিতে ফ্ল্যাশ সফটওয়্যার ইন্সটল দেয়া থাকে। এর ফলে ভিজিটরস সেইসব ফ্ল্যাশ ইমেজ স্লাইডার ফাঁকা দেখতে পায়। এই সমস্যা সমাধান করবে আজকের এই ইমেজ স্লাইডার। কারণ এই ইমেজ স্লাইডার চলতে ফ্ল্যাশ প্রয়োজন হয়না। কিন্তু এটি দেখতে ফ্লাশের মতই। এই স্লাইডশোটি জাভাস্ক্রিপ্ট এবং সিএসএস দিয়ে তৈরি। তাই ফ্লাশের ঝামেলা নেই। আপনি নিশ্চিন্তে এই আকর্ষণীয় ফিচার ইমেজ স্লাইডারটি আপনার ব্লগস্পট ব্লগে ব্যবহার করতে পারেন। প্রথমে লাইভ ডেমো দেখে নিন এখান থেকে। তারপর পছন্দ হলে তবেই আপনিও আপনার ব্লগে স্লাইডশো টি যুক্ত করুন।
- প্রথমে ব্লগস্পট ব্লগের ড্যাশবোর্ডে লগিন করুন।
- এখন আপনি আপনার ব্লগের যে স্থানে এই স্লাইডারটি লাগাতে চান সেখানে নিচের কোডগুলো বসান। আপনি লেয়াউট থেকেই সাধারনত এই কাজটি করতে পারবেন। কিন্ত আপনি যদি লেয়াউটে কাঙ্ক্ষিত জায়গা যেমন ব্লগ পোস্টের প্রথমে তাহলে আপনাকে কষ্ট করে টেমপ্লেটের এইচটিএমএল কোডে যেয়ে স্লাইডারটি লাগাতে পারেন। তবে এর জন্য আপনাকে কিছুটা এইচটিএমএল কোড জানতে হবে। কারণ টেমপ্লেট থেকে সঠিক জায়গাটি খুঁজে বের করতে হবে আপনার এইচটিএমএল জ্ঞান দিয়ে।
<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/AVvXsEjngEMTVN9vHMEekm39lW8zOosChNJ9lVzZmrf48hs6QAHSztCxv0BfrUEle9U8tiSdnviOxLc2fAo5fRxNOBNI6if6goc-yej4wlawEAdF6Hnfgcuv23-mBwrglv8g_nq-x0g0oZkDJg0C/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/AVvXsEjnJVQWNJ419gILiZxl6eI37wvQmOnUQlG23ZpBQFCbCtG0DR42aFRcbEVArwhk5zyXSHC1d3k4fQdwS5ziYBcdyD73wybP-Pa_-tb3Haz2W4CVvvTfESwoEpp6kBFxllITYqYLFLH_UdXT/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/AVvXsEh1BP_lQ28cT5bZJeXX-ZG2V7TCOtr6e-oW0vAS7YxXt2UZ4p2BhxFITg0Egh1XEdY12YFdb8_S3xyipDrV4ZF2qZkCFh_7TMn4PNScFU78KTfn9wlS3M_8ZtfvE1-fMWsN4nk1sg_Hj43e/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKwRBjLMAni7_7zCJ95W7loia32LGBSfuCiLoqumqJrEiNcZdEMfDodaaNMyLzrF4PuaykvYyyV4egzMDT_sGEpLqrsdDQFfkSPRjw_OkGDWeyFAXB_iK-f9TWmydybNRdhwNB206DA49p/s1600/image-slider-2.jpg" alt="Go UP!" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkF4AdMRG1ChYHTLs0ByZfNIzPdqVv29MhdiNqRzq2boWrxNR7HxNcgp-vu_me35OZt4wBsoM86jiCMc_uJy5j-FthdEuyyo3FyEj72x-3_QX-_I-COKMVQauty_9Oqse4fn1nnciochbT/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_P6YRMsQ_M7HZUwX-FvX-1NZ9EB7gbmoNVghs9TudbuI3AL_myQ73sFzpb3-S09vpqPuFHCd4AB4_gEb5bS5aIv6vQ7dehvoYwrA3gpjiRHU_NxFLjPOPc6XBeHYy4EeBbPgvFj9hinc/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqGwTm9mNqrUDbKeM1OFbhF5fuZJrn5XBqLmHcgGRP6ua0j98_DyyfKWyEDFXcEop85do5AKnOpNwvL9OiaUY3q87-9z40DsKuLa5MGLt03XnNQZIQb4XFnnJtt75bHkAbbnUPkBLJnDq/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>
- এখন স্লাইডার কোডগুলোতে রঙ্গিন করা লাইনগুলোতে আপনার ইমেজ, লিংক এবং শিরোনামগুলো বসিয়ে Save করে দেখুন চমৎকার এই স্লাইডারটি।আপনার জন্য রয়েছে আরও একটি বোনাস টিপস। যদি স্লাইডারটি শুধুমাত্র হোমপেজে দেখাতে চান তাহলে উপরের কোডগুলোর সবার প্রথমে <b:if cond='data:blog.url == data:blog.homepageUrl'> এবং সবার শেষে </b:if> যুক্ত করে দিন।
সময়ের অভাবে স্লাইডার কাস্টমাইজেশনের জন্য বিস্তারিত লিখতে পারলাম না। তবে সমস্যা হলে আমাকে জানাবেন। ধন্যবাদ
