আশা করি সবাই ভাল আছেন। আজকে আমি আপনাদের jquery স্লাইডশো কিভাবে খুব সহজেই ব্লগে যুক্ত করবেন তা দেখাবো। অনেক টেমপ্লেট এর সাথে এটা আগে থেকেই থাকে। আর যাদের টেমপ্লেট এ থাকে না তারা এখন খুব সহজেই কোন HTML এডিট ছাড়াই এটি ব্যবহার করতে পারবেন। তাহলে ‍আসুন শুরু করি :

যেভাবে যুক্ত করবেন

1. প্রথমে ব্লগারে লগইন করুন। এইবার লেআউট
2.  তারপর একটি গেজেট যুক্ত করুন
3. এইবার HTML/JavaScript সিলেক্ট করুন এবং পেইজ আসলে নিচের কোডটুকু পেষ্ট করুন

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#NH24-slider').s3Slider({
timeOut: 3000
});
});
</script>

<style>

#NH24-slider {
width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}

#NH24-sliderContent {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}

.NH24-sliderImage {
float: left;
position: relative;
display: none;  top: 0;
border:1px solid #ddd;

}

.NH24-sliderImage span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}

.NH24-sliderImage span a {

text-decoration:underline;
color:#FE6602;
}

.clear {
clear: both;
}

.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 80px !important;
height: 319px;
}

</style>

<div id="NH24-slider">
<ul id="NH24-sliderContent">

<li>
<img src="URL OF IMAGE" />
<span><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li>
<img src="URL OF IMAGE" />
<span><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li>
<img src="URL OF IMAGE" />
<span><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>
<li>
<img src="URL OF IMAGE" />
<span><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li>
<img src="URL OF IMAGE" />
<span><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>
<div></div>
</ul>
</div>

<br/>

• এইবার URL OF IMAGE এ আপনার ছবির লিংক দিন।
• bottom এ উপরে নিচে করতে পারবেন
• HEADING GOES HERE এইখানে টাইটেল/হেডলাইন
• DESCRIPTION GOES HERE বিবরণ লেখুন

তারপর আপনি সেটা সেইভ করুন এবং দেখুন। তৈরি হয়েগেল খুব সহজেই একটি jquery স্লাইডশো।

আশা করি সবার ভাল লাগবে। এবং ব্লগে যুক্ত করবেন, কোন সমস্যা হলে কমেন্ট এ জানাবেন।

আমার ব্লগ            আমার ফেইসবুক