কিভাবে ব্লগে Image Slider যুক্ত করবো

আজ আমি আপনাদের দেখাব কিভাবে খুব সহজে ব্লগে স্লাইডার যুক্ত করবেন

আজ আমি নিয়ে আসলাম একটি ইমেজ স্লাইডার। ইমেজ স্লাইডার কি? এই রকম কোন প্রশ্ন আছে নাকি আপনার কাছে। যদি থাকে তাহলে নিচে এর ডেমো দেখে নিশ্চিত 
হয়ে নিন।

LIVE DEMO

এই স্লাইডারটি কি আপনার ব্লগে যুক্ত করতে চান? তাহলে নিচের নির্দেশনা অনুসারে এগিয়ে চলুন।

• প্রথমেআপানর ব্লগে প্রবেশ করুন
• তারপর আপনি নাক বরাবর নিচের দিক Layout  এ চলে যান।
• তারপর Add a Gadget        এ ক্লিক করে HTML/JavaScript                 সিলেক্ট করে নিন।
• তারপর নিচের কোডটি সিলেক্ট করে সেখানে paste করুন
• তারপর শেষ কাজ, এবার সেভ করুন। 

&

lt;div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">

 /* JavaScript Image Slider By http://www.projuktirkhela.blogspot.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 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;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img alt="Image Slider By helperblogger.com" src="http://2.bp.blogspot.com/-2AYG4zsRllk/UObWkRWcttI/AAAAAAAABMs/2Y6XEFKJt9E/s1600/helperblogger.com-1.jpg" /></a>

<a href="#"><img alt="" src="http://3.bp.blogspot.com/-0_jXOtrGtCo/UObWlDBOcVI/AAAAAAAABMw/XiL07lv052A/s1600/helperblogger.com-3.jpg" /></a>

<a href="#"><img alt="The slide is a linking image" src="http://3.bp.blogspot.com/-FgmddpI_W7A/UObWl9sGyuI/AAAAAAAABM4/86O1EQz6YpI/s1600/helperblogger.com-2.jpg" /></a>

<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="http://2.bp.blogspot.com/-XTed7dLFeTc/UObWm_Aew-I/AAAAAAAABNA/n3aSbCnkf0M/s1600/helperblogger.com-5.jpg" /></a>

<a href="#"><img alt="#htmlcaption" src="http://1.bp.blogspot.com/-qEJa3jBQ67c/UObWnGc28kI/AAAAAAAABNI/hZZHcsZyzuM/s1600/helperblogger.com-4.jpg" /></a>
                </div>

আমার ব্লগ infolink09.com