ব্লগে যুক্ত করুন একটি jquery স্লাইডশো সহজেই

আশা করি সবাই ভাল আছেন। আজকে আমি আপনাদের 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 স্লাইডশো।

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

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

Level 0

আমি Readul Haque। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 41 টি টিউন ও 268 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 2

nice……….

Level 0

thanks for share….!

Level 0

Vaijan kaj hossena keno.. bujhlam-na. Heading/ description.. add korlam.. tobuo hossena! r imag URL ami facebook theke niyecilam.. > ki korle hote pare aktu bolben..? slide show ta amar khub-e dorkar..! plzzz…

    @halimrox: ভাই আপনাকে তো আমি বললাম এই ফেইসবুক এ কিভাবে করবেন ??? তার পরেও সমস্যা থাকলে বলবেন ???

Level 0

ডেমো লিংক কই?, শুধু হোম পেজে থাকবে তো !