আপনার ব্লগের জন্য দৃষ্টিনন্দন একটি ফিচার ইমেজ স্লাইডার ! নিয়ে নিন আপনার ব্লগের জন্যও ।

আপনারা যারা ব্লগিং করেন তাঁরা প্রায়ই ভালো একটি ফিচার ইমেজ স্লাইডার খুঁজে থাকেন। কিন্তু সহজে মন মতো স্লাইডার খুঁজে পান না। একেকটি স্লাইডারের একেক সমস্যা আমাদের কাছে ধরা পড়ে। আজ একটি চমৎকার ইমেজ স্লাইডার সন্ধান দিচ্ছি ব্লগস্পট ব্লগের জন্য। গ্যারান্টি দিচ্ছিনা তবে বলছি, দেখুন আশা করি খারাপ লাগবেনা। এর মাধ্যমে আপনি সহজেই ব্লগে পছন্দের কিছু ইমেজ অথবা নির্বাচিত টিউনগুলো ফিচার আকারে দেখাতে পারবেন। আর প্রতিটা ইমেজ স্লাইডারের একটি বড় সমস্যা হল এইসব ইমেজ স্লাইডার গুলো চলতে কম্পিউটারে ফ্ল্যাশ সফটওয়্যার থাকতে হয়। কিন্তু অনেক সময় প্রায় ভিজিটরসের পিসিতে ফ্ল্যাশ সফটওয়্যার ইন্সটল দেয়া থাকে। এর ফলে ভিজিটরস সেইসব ফ্ল্যাশ ইমেজ স্লাইডার ফাঁকা দেখতে পায়। এই সমস্যা সমাধান করবে আজকের এই ইমেজ স্লাইডার। কারণ এই ইমেজ স্লাইডার চলতে ফ্ল্যাশ প্রয়োজন হয়না। কিন্তু এটি দেখতে ফ্লাশের মতই। এই স্লাইডশোটি জাভাস্ক্রিপ্ট এবং সিএসএস দিয়ে তৈরি। তাই ফ্লাশের ঝামেলা নেই। আপনি নিশ্চিন্তে এই আকর্ষণীয় ফিচার ইমেজ স্লাইডারটি আপনার ব্লগস্পট ব্লগে ব্যবহার করতে পারেন। প্রথমে লাইভ ডেমো দেখে নিন এখান থেকে। তারপর পছন্দ হলে তবেই আপনিও আপনার ব্লগে স্লাইডশো টি যুক্ত করুন।

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

1

<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/AVvXsEhWQbFmSMYuFzyJGi91C5n9uTxRdmg3sMwNKQWHEoOcAWDh0iFFSmP1Mp8fjFYIiUtfCVWfTMcfp24vKaZqli4tOxraikGCbhL0pjn3QkRroBferQoDOZWO8ZtckpWHbH7JhLD5YP28XHP2/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/AVvXsEiWTDesIISkIf2upqV5KLzDsHz5r5da21WfUpTarQWvV3Ne1n2bNkPrH8iW-3JavtrAM-dzb3SusmAsVaBjo_A96EP9BtdlUWUw5tXOuO-ZKIwm7vu4vfOsqoZocAL19YLy2ueHDap8NnJr/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;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjrhHHyatNbqk7Wuw2Yf4oj4SyKSqc0w_bo8U3_fKAQi1fMcrPik-DqTZfhFsMM_AH9fvPPmKVSsoeMbNX9cAgAygMMVAS0yzBxEDv2vgkeGdph-2knjleIUs0vWjWT2ZdfRxK3FNlMz8I/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;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFN1s0ndNmj-9X79tgwRfmpwodRFrlwzLRBFPoZ3bIqQbi8bZE2ahC9NIbG4EifvS6gds7PhL37udkVVFQdxgPiI9kB47e1xge_oWRnnvprPN7UVTI34KtlT8BEwiDPM6eOXofri35c7_K/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;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsMfpz9wOfsOdtbtX9RusFmYEAlOUw6CO4DygmcCNhdTpnBBjpwTar10KrbwHOxJgvzE6gXLZYI1GlbvizxO3U4ySbrV9J2V2xuq2nOP76lfGSrz_NdFSCXmIpe2oyWSX2rPng-9agxDQY/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;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6nLAsRtPGbru3vTBZEFBqc0JG8o6anl5ZJQ5dOA6Dl-18uno32fEmht_sd30RXYtyPvyAt14bwFLK2N2DrLD2JMOCLQP4bjyTyROP8jrPhXH_Tdah84tBMc2qO-DsB-vckK9TwQE3g3U/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;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoocnBAjPB_g2kuACkxl58Jojot-yB8t_3eGrVctLS2orN32igkGGMmh4MuxZHRLQYIprKtoW7chejPmcIBEgyGaNbAItIp-zWr3QbNYbmRuJ4P1DHhuf6eZKnTBo6iQRL_6MO175_SFzq/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> যুক্ত করে দিন। যদি ইমেজ, লিংক এবং টাইটেল পরিবর্তন করতে সমস্যা হয় তাহলে এখানে থেকে দেখে নিন সংক্ষিপ্ত টিউটোরিয়াল।