আপনার ব্লগে যুক্ত করুন চমৎকার একটি Post Slideshow বার।

3
425

 

আপনারা কেমন আছেন? ভাল নিশ্চয় । আশা ভাল থাকুন । আপনাদের আনেকের ই ব্লগ আছে । তা ব্লগস্পটে বা ওয়াডপ্রেসে যেখানেই হোকনা কেন তা আপনারা আপনাদের মনের মত করে সাজাতে চান। আর পরিষ্কার পরিচ্ছন্ন ব্লগে ভিজিটর ও আশে বেশি। আর আপনার ব্লগে যদি একটি Post Slideshow থাকে তবে তা দেখতে আর সুন্দর দেখায় । তাই আপনাদের জন্য নিয়ে এলাম এই পোষ্টটি। প্রথমে এখানে ডেমো দেখুন

  • আপনার ব্লগ লগইন করুন।
  • তারপর dashboard >>> Template >>> Edit HTML এই ধাপ অনুসারে জান।
  • আপনার  Template এর বেকাপ রাখতে ভুলবেন না ।
  • প্রথমে </head> code টি খুজুন।
  • তারপর নিচের কোডটি  </head> এর ঠিক আগে বসান।
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
//<![CDATA[

/* ————————————————————————
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
————————————————————————– */

(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $(“#” + element[0].id + “Content .” + element[0].id + “Image”);
var itemsSpan = $(“#” + element[0].id + “Content .” + element[0].id + “Image span”);

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log(“Poof..”);
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo – 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css(‘bottom’) == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css(‘bottom’) == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘#s3slider’).s3Slider({
timeOut: 4000
});
});
</script>
<style type=’text/css’>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

সেভ করুন।

এখল dashboard >>> Layout >>> Add a Gadget >>> and select ‘HTML/Javascript’ এই ধাপে আগান।

এবং নিচের কোডটি select ‘HTML/Javascript বক্সে বসিয়ে সেভ করুন।

<div id=”s3slider”>
<ul id=”s3sliderContent”>
<li class=”s3sliderImage”><a href=”YOUR LINK HERE”><img style=”width:550px;height:200px;” src=”http://3.bp.blogspot.com/-PtsBaOsX7Mc/UMRwKKiL5KI/AAAAAAAAAus/K1otMaExrf0/s1600/a3.jpg” /><span>Emoticon :Facebook chat Big Emoticon </span></a></li>
<li class=”s3sliderImage”><a href=”YOUR LINK HERE”><img style=”width:550px;height:200px;” src=”http://2.bp.blogspot.com/-Y2zTj62ie7M/UMTE0WQ4w1I/AAAAAAAAAwE/8a1HvoKjiY4/s1600/33.jpg” /><span>iPad mini :iPad mini picture </span></a></li>
<li class=”s3sliderImage”><a href=”YOUR LINK HERE”><img style=”width:550px;height:200px;” src=”http://2.bp.blogspot.com/-kVOAYLC0i0Y/ULcPqIUeGoI/AAAAAAAAAdA/-yIhnQgX494/s400/aq.PNG” /><span>Carousel slider based : Carousel slider based on your Blogger blog !!!</span></a></li>
<li class=”s3sliderImage”><a href=”YOUR LINK HERE”><img style=”width:550px;height:200px;” src=”http://3.bp.blogspot.com/-g_H_8FhxlB4/ULIHdcw2hsI/AAAAAAAAAWQ/1bU5IBG8xsc/s200/a111.jpg” /><span>Angry Birds : Best free Android game</span></a></li>
</ul>
</div>
<div class=’clear’>
</div>

বেস হয়েগেল কাজ। ধন্যবাদ সবাইকে।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

3 মন্তব্য

  1. সেভ করতে গেলে এই মেসেজ আসে। Error parsing XML, line 400, column 13: Open quote is expected for attribute “{1}” associated with an element type “src”. সেভ হয় না।

  2. ভাই সেভ তো দিসি কিন্তু ত্রুটি dakhassa সেভ hossa না কি করতে পারি

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

18 − ten =