ব্লগে একটি সুন্দর slidebar যোগ করুন এবং উপভোগ করুন এ্যনিমেটেড পোস্ট— Javascript সমূহ – ১১

ড্যাশবোর্ডে(Dashboard) লগইন (Login) করে Layout অংশের Edit HTML অংশে
যান।]]></b:skin> এই লিখাটি ctrl+f চেপে বের করুন

**এবার ]]></b:skin> অংশের ঠিক আগে / উপরে নিচের
কোডটি স্থাপন করুন।

/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent
url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png)
repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png)
no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png)
no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn
a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/

 

**এবার</body> লেখাটি খুঁজে বের করুন।
**তারপর </body> অংশের ঠিক আগে / উপরে নিচের কোডটি
স্থাপন করুন।

 

<!-- jQuery -->
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'
type='text/javascript'></script>
<script
src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js'
type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>

 

**তারপর আপনি গ্যাজেট যুক্ত করতে HTML/JavaScript এর ঘরে নিচের কোড গুলো
কপি করে পেস্ট করুন

 

<div id="slider">
<script style="text/javascript"
src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script
style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script
src="http://shuvo1020.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

 

**http://shuvo1020.blogspot.com/ এর বদলে আপনার ব্লগের ঠিকানা লিখুন

ডেমো
এই রকম কিছু জানার জন্য চলে আসুন এখানে  সময় পেলে reg করতে ভুলবেন না

 

Level New

আমি শুভ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 184 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমাকে ফেসবুকে পেতে http://www.facebook.com/shuvobd1020


টিউনস


আরও টিউনস


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


টিউমেন্টস

Level 0

দরুন হয়েছে, ধন্যবাদ।

Level 0

ভাল লেগেছে। ধন্যবাদ।

ভাই আমি একেবারে নতুন। আমি ব্লগার.কম এ লগইন করলে লেউট অংশ দেখতে পাই না। দয়া করে বলবেন কি লেউট অংশ কোনটি।