বন্ধুরা কেমন আছেন? আশা রাখি যে আপনারা অনেক বেশী ভাল আছেন। গতকাল আমি দেখিয়ে ছিলাম যে কিভাবে আমরা আমাদের ব্লগে CSS BUTTON ব্যবহার করতে পারি। আর আমি নিয়ে আসলাম একটি ইমেজ স্লাইডার। ইমেজ স্লাইডার কি? এই রকম কোন প্রশ্ন আছে নাকি আপনার কাছে। যদি থাকে তাহলে নিচে এর ডেমো দেখে নিশ্চিত হয়ে নিন।এই স্লাইডারটি কি আপনার ব্লগে যুক্ত করতে চান? তাহলে নিচের নির্দেশনা অনুসারে এগিয়ে চলুন।LIVE DEMO
- প্রথমেআপানর ব্লগে প্রবেশ করুন
- তারপর আপনি নাক বরাবর নিচের দিক Layout এ চলে যান।
- তারপর Add a Gadget এ ক্লিক করে HTML/JavaScript সিলেক্ট করে নিন।
- তারপর নিচের কোডটি সিলেক্ট করে সেখানে paste করুন
- তারপর শেষ কাজ, এবার সেভ করুন।
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1OhToNVrwJWgePqY9IwtgMJDVHmk82PM0OY1BR53-IqQbcaMtD_hkI7O6dWV3MCkc7SNiGGkD-8XLqIKAHpXfrRGyaNPqBHrLcvU4IibF8QvMIb8Nr26UZiqr3vt4wj57PX52TAJhurs/s1600/helperblogger.com-ribbon.png) no-repeat;
z-index: 7;
}
#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCLgabRi4ycgSkzgxp3nMUF4JgecRYrOFB4fK7sHOYPAttRMmyfq6uvm7llKr4DJ5eg3GKNs_zBF4C7qEcMcDjZrJye3S85jqqJTfxGfnP4I3xYhYem6TwmfmDbuMmOgENBaoBmhmn8w/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieezWDCD5cCk8fdgTMDD3KlLxYjnEhuYCxoFtTtJqq0NKHwGbjRJcaZzVYdm5LusisRJpZykMCrM-Zw243TPnMSOjIxH1F1QsWVsPc8d_2Qs7AadoSsCdFW8N7ySj1peqyh8TB4wSU7Rw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6HCMVk-otU7EYObWxJY4MedConL2bJYXVARjeawnHmEhdK8OjiCu1n8nli22HT9d_3IzobOECIBJsOcpFY-2sPTByUwWgVKrNkOHzIdBcjbiUrrJCLqyZsTitekfIT7BGfzzYF_YTxVz/s1600/helperblogger.com-1.jpg" /></a>
<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mvLOxUr60MeBFjqA63rxtJT2EOLIM_36RhhF7vpCfmLXcQTQ2GopoV6gesY1flJjT9UVZqCA88RYtnDilUS1OTj0t2ObRvzCM3IpAywrv28gNty0hM8Uprjcg7NxDG1Wfunm6NueK4u_/s1600/helperblogger.com-3.jpg" /></a>
<a href="#"><img alt="The slide is a linking image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-dC_8-DUecpB_zJ38bqh8PieDqwPwzmunVCfv70R256C-_DWLelS3NLZM6uNe2wOm4EdyGL0BFxcQat9CeB4O244JEkBSDTFB19xhdpLap3S41sE14v6LgMBIWjdH188b3qZQW2rCG9Qp/s1600/helperblogger.com-2.jpg" /></a>
<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZsnrsaLwKDEztxggnAVnP77_HpU1jTzCJzJz-TgpXgxMLHWjNhsMcHnT3hYdXs_0EK5odlFwTrdQH5rHVivE1o8GB1Sz3bDBkAHW5T37WfQjw9Z3QeQ4V3srIUWQtMCEcKO5tWYV3Wt7/s1600/helperblogger.com-5.jpg" /></a>
<a href="#"><img alt="#htmlcaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQP8nSjRpxD567DlULvqQehW6bC6PVk1gBLerXzNcWv8RuFYZqXmUS2HDGsRxh-TS0Svf8dYq2lxp_LHuiJcfK8wMHdhi6Ns0ehN2ixJeO2AVJXDmlk4tGkJtsefNR03DvIhdEzuYGg8P/s1600/helperblogger.com-4.jpg" /></a>
</div>
</div>
</div>
স্লাইডের উচ্চতা ও প্রস্থ পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন
#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
border:5px solid #000;
#slider {
width: 500px;
height: 218px;
স্লাইডারের ছবি পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন।
<a href="#"><img alt="Image Slider By helperblogger.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6HCMVk-otU7EYObWxJY4MedConL2bJYXVARjeawnHmEhdK8OjiCu1n8nli22HT9d_3IzobOECIBJsOcpFY-2sPTByUwWgVKrNkOHzIdBcjbiUrrJCLqyZsTitekfIT7BGfzzYF_YTxVz/s1600/helperblogger.com-1.jpg" /></a>
<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mvLOxUr60MeBFjqA63rxtJT2EOLIM_36RhhF7vpCfmLXcQTQ2GopoV6gesY1flJjT9UVZqCA88RYtnDilUS1OTj0t2ObRvzCM3IpAywrv28gNty0hM8Uprjcg7NxDG1Wfunm6NueK4u_/s1600/helperblogger.com-3.jpg" /></a>
<a href="#"><img alt="The slide is a linking image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-dC_8-DUecpB_zJ38bqh8PieDqwPwzmunVCfv70R256C-_DWLelS3NLZM6uNe2wOm4EdyGL0BFxcQat9CeB4O244JEkBSDTFB19xhdpLap3S41sE14v6LgMBIWjdH188b3qZQW2rCG9Qp/s1600/helperblogger.com-2.jpg" /></a>
<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZsnrsaLwKDEztxggnAVnP77_HpU1jTzCJzJz-TgpXgxMLHWjNhsMcHnT3hYdXs_0EK5odlFwTrdQH5rHVivE1o8GB1Sz3bDBkAHW5T37WfQjw9Z3QeQ4V3srIUWQtMCEcKO5tWYV3Wt7/s1600/helperblogger.com-5.jpg" /></a>
<a href="#"><img alt="#htmlcaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQP8nSjRpxD567DlULvqQehW6bC6PVk1gBLerXzNcWv8RuFYZqXmUS2HDGsRxh-TS0Svf8dYq2lxp_LHuiJcfK8wMHdhi6Ns0ehN2ixJeO2AVJXDmlk4tGkJtsefNR03DvIhdEzuYGg8P/s1600/helperblogger.com-4.jpg" /></a>
</div>
ছবিতে লিংক দেওয়ার জন্য এই চিহ্নটি পরিবর্তন→ # করে নিন।
