আপনার ব্লগে ইমেজ নিয়ে খেলা করুন। ব্লগে ইমেজের উপর দিয়ে মাউস ঘোরানোর সময় তাতে জুম ইফেক্ট আনুন।
সাইডবারে লাগানো ইমেজের উপর দিয়ে মাউস নিয়ে যাওয়ার সময় তাতে নানা রকম ইফেক্ট দেয়া যায়। আপাতত চলুন শিখি কিভাবে জুম ইফেক্ট দেয়া যায়। এটা অনেকটা এরকম প্রতিটি আলাদা আলাদা ইমেজের উপর দিয়ে মাউস ঘোরানোর সময় প্রতিটি ইমেজ পিকচার আলাদা আলাদা ভাবে জুম হয়ে আসবে।
টিউটোরিয়ালটি দেখার আগে ডেমো দেখে নিতে ভুলবেন না।

এবং টিউটোরিয়ালটি ফলো করার আগে
১.আপনার ব্লগের টেম্পলেটটি (ড্যাশবোর্ড>লে আউট>এডিট এইচ টি এম এল> ডাউনলোড ফুল টেম্পলেট– চিত্র দ্রষ্টব্য) ডাউনলোড করে নিন।

২.এবার ব্লগের লে আউট থেকে এডিট এইচ টি এম এল এ যান। Expand Widget Templates এ মার্ক করুন (ডানপাশের উপরের দিকে)।

৩.CTRL+F চেপে

]]></b:skin>

লেখাটি খুজে বের করুন।

৪.

]]></b:skin>

এর ঠিক উপরে নিম্নোক্ত লেখাটি কপি করে পেস্ট করে দিন।

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url
(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1o
YHc/thumb_bg.png) no-repeat center center; /* Image used as background on
hover effect
border: none; /* Get rid of border on hover */
}

এখানে আমি আমার ব্লগের ব্যাকগ্রাউন্ডের কালারের সাথে সামাঞ্জস্য রেখে উপরোক্ত (বোল্ড দ্রষ্টব্য) ইমেজ পিকচারটি বেছে নিয়েছি। আপনারা আপনাদের ব্লগের ব্যাকগ্রাউন্ডের কালারের সাথে সামাঞ্জস্যপূর্ণ ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন। আর সে রকম ইমেজ খুজে না পেলে টেম্পলেট থেকেই ব্লগের সাইডবারের ব্যাকগ্রাউন্ড কালারের পরিবর্তন আনতে পারেন। (কালার ম্যাচিং এর ব্যাপারে কারো কোন সমস্যা হলে কমেন্ট বক্সে রেখে যাবেন, সাধ্যমত সাহায্য করার চেষ্টা করব।)

আমি নিচের ইমেজটি ব্যবহার করেছি।

৫. আবার CTRL+F চেপে

</head>

লেখাটি খুজে বের করুন।

এবার

</head>

এর ঠিক উপরে নিম্নোক্ত কোড কপি করে পেস্ট করুন।

<script src='আপনার কোডের সোর্স' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass(&quot;hover&quot;).stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>

খেয়াল করুন এখানে আমি কোডবুকের জাভা স্ক্রিপ্ট ব্যবহার করেছি । এবং সেটা samehood.js নামে আপলোড করেছি।
আপনাদের সুবিধার্থে আমি আমার কোড লিঙ্কটি দিয়ে দিচ্ছি।

http://www.mydatanest.com/files/kangalini/32285_8klpi/samehood.js

সুতরাং যারা স্ক্রিপ্টটি আপলোড করেননি তাদের জন্য উপরোক্ত কোডের বদলে নিচের টুকু ব্যবহার করতে হবে।

<script
src='http://www.mydatanest.com/files/kangalini/32285_8klpi/samehood.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass(&quot;hover&quot;).stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>

৬. সেভ বাটনে ক্লিক করুন।
৭.এবার যথাক্রমে লে আউট>এড এ গেজেট >সিলেক্ট Html/Java script এ ক্লিক করুন।
প্রয়োজনীয় পরিবর্তন সাধনের সাথে নিচের কোড টুকু পেস্ট করুন।

<ul class="thumb">
<li><a href="আপনার ইউ আর এল ১"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li>
<li><a href="আপনার ইউ আর এল ২"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li>
<li><a href="আপনার ইউ আর এল ৩"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li>
<li><a href="আপনার ইউ আর এল ৪"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li>
<li><a href="আপনার ইউ আর এল ৫"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li>
</ul>

]]></b:skin>

এর উপরে যে কোডটুকু লাগাতে হবে তার হাইট, ওয়াইডথ আপনি আপনার সাইডবারে মাপ অনুসারে কিংবা আপনার চাহিদা মোতাবেক বাড়িয়ে বা কমিয়ে নিতে পারবেন।
সাইডবার কালার পরিবর্তনের জন্য লে আউট এবং সেখান থেকে এডিট টেম্পলেটে যান ।
কন্ট্রোল+এফ চেপে নিচের কোডটি খুজে বের করুন।

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

লক্ষ্য করুন এখানে ব্যাকগ্রাউন্ড কেন কালার সম্বন্ধে কিছুই বলা নেই। সেক্ষেত্রে উপরের কোডটিতে সামান্য পরিবর্তন আনুন।

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
}

এখানে আমার ব্লগের টেম্পলেটের ব্যাকগ্রাউন্ড সাদা বলে আমি background: #FFFFFF; মানে সাদা ব্যবহার করেছি। আপনারা আপনাদের পছন্দ মতো কালার বেছে নিন।
HTML কালার কোড

উপরের সাইডবার কোডটি এভাবেও থাকতে পারে।

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

সুতরাং সেক্ষেত্রে আপনার করণীয় হবে

এর স্থলে ।

#sidebar-wrapper {
width: 220px;
background: কালার কোড;
padding:8px 0;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ব্যবহার করা।(প্রয়োজনীয় পরিবর্তন শেষ করে নিন)।
আর যদি কিছু সাইডবার নাই খুজে পান (একবারে নতুন ব্লগস্পট ব্যবহারকারী যারা) তাহলে খালি

.sidebar h2 {
background-color:red,অথবা white(যেটা ইচ্ছা);
}

লেখাটি

]]<>/b:skin<

এর উপরে জুড়ে দিন।

আপনার ব্লগে সাইডবারের সাইজ অনুসারে ইমেজের সাইজে কিভাবে পরিবর্তন আনবেনঃ
উপরের থাম্বনেইলের জুম হোভার সাইজ আমি ওয়াইডথ ১৭৪ পিক্সেল এবং হাইট ১৭৪ পিক্সেল অর্থাৎ অনেকটা বর্গাকার করে দিয়েছি।
আপনার ব্লগের সাইডবার বেশী চওড়া হলে আপনি লক্ষ্য রাখবেন ছবিটি যখন জুম হবে তখন তা যেন আপনার পুরো সাইডবারকে ঢেকে রাখে (সৌন্দর্য বৃদ্ধির জন্য)।
আর আপনার সাইডবার একদম সরু হলে, বিশেষত যারা দুই এর অধিক কলামের টেম্পলেট ব্যবহার করে থাকেন, তারা থাম্বনেইলের সাইজ (উপরে যেখানে হাইট এবং ওয়াইডথ ১০০ পিক্সেল দেয়া আছে) কমিয়ে নিবেন।

ব্লগস্পট নিয়ে ধারাবাহিক টিউটরিয়ালের আগের পর্ব পড়তে এখানে ক্লিক করুন।