আসুন ব্লগের সাইডবারে এমন একটি লিংক লিস্ট তৈরি করি, যে লিস্টের লিংকগুলোতে মাউস পয়েন্টার নিয়ে গেলে লিংকটি একটু সরে যায়। মনে হয় যেন ঠেলে সরিয়ে দেওয়া হচ্ছে। এই গেজেটটি আসলে এমন কোন আহামরি কোন কিছু নয়। শুধুমাত্র
নিজের ব্লগের নির্দিষ্ট একটি লিংকবারকে একটি বিশেষ ইফেক্ট দেওয়া মাত্র। কিন্তু এর মাধ্যমে আপনি বিশেষ শ্রেণীর কিছু লিংককে বিশেষভাবে বৈশিষ্ট্যমণ্ডিত করতে পারবেন। যা ওই বিশেষ ধরণের লিংকগুলোকে পাঠকের কাছে বিশেষভাবে গুরুত্ববহ করে তুলবে।
সুবিধাবলীঃ
? এই গেজেটটির মাধ্যমে অর্থাৎ বিশেষ ডিজাইনে লিংককে দেখানোর মাধ্যমে আপনি আপনার ব্লগ পাঠকের কাছে একটু ভিন্নভাবে উপস্থিত হচ্ছেন।
? পাঠকেরা আপনাকে অন্যচোখে দেখবে।
? আপনার ব্লগেও একটি আধুনিক বৈশিষ্ট্য যোগ হবে।
আসুন তাহলে এই ইফেক্টটি নিজেদের ব্লগে স্থাপন করে নেয়ার নিয়মটা জেনে ফেলি।
? ব্লগারে লগইন করে ড্যাশবোর্ডে প্রবেশ করুন।
? Layout > Edit HTML ট্যাবে গিয়ে </head> লেখাটির ঠিক উপরে নিচের কোডটি স্থাপন করুন।<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
//]]>
</script>? সেভ করুন।
? এবার Layout > Page Elements ট্যাবে গিয়ে একটি নতুন HTML/Javascript গেজেট নিয়ে সেখানে নিচের লিংকলিস্টটি স্থাপন করুন।<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Link
1</a></li>
<li class="sliding-element"><a href="#">Link
2</a></li>
<li class="sliding-element"><a href="#">Link
3</a></li>
<li class="sliding-element"><a href="#">Link
4</a></li>
<li class="sliding-element"><a href="#">Link
5</a></li>
</ul>? এখানে # চিহ্নটি বাদ দিয়ে কোন ওয়েব ঠিকানা লিখে দিন।
? Link 1, 2, 3 ইত্যাদি বাদ দিয়ে লিংকটির নাম লিখে দিন।
? গেজেটটি সেভ করুন।
আপনার ব্লগের সাইডবারে একটি নতুন ডিজাইনের লিংক লিস্ট স্থাপিত হয়ে গেছে।কোডগুলি ডাউনলোড করার জন্য ক্লিক করুন এখানে।
লেখক সম্পর্কে
0 টি মন্তব্য:
একটি মন্তব্য পোস্ট করুন