Monday, October 3, 2011

সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ : আপনার ব্লগস্পট ব্লগের জন্য তৈরি করুন আলতো করে সরে যাওয়া মেন্যু

12:59 AM  Akashnill  No comments

আজ আমি আপনাদের দেখাবো কিভাবে আপনার ব্লগে আলতো করে সরে যাওয়া মেন্যু তৈরি করবেন।

এটি আপনি খুব সহজেই করতে পারবেন । নিচের ধাপ গুলি একে একে অনুসরন করুন।
  • প্রথমে আপনার ব্লগে সাইন লগ ইন করুন।
  • তারপর Deshboard>Design>Edit Html  এ ক্লিক করুন।
  • এখন  Ctrl+F দিয়ে   ]]></b:skin> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #fff;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.bh span{
color: #FF0000;
background: url(http://4.bp.blogspot.com/_8X8A6_fKD8A/S9CJ2V4UjuI/AAAAAAAAC-o/COPWQ-reKBE/s320/hmenu.png) repeat-x left top;
}
ul#topnav.bh a{
color: #555;
background: url(http://4.bp.blogspot.com/_8X8A6_fKD8A/S9CJ2V4UjuI/AAAAAAAAC-o/COPWQ-reKBE/s320/hmenu.png) repeat-x left bottom;
}
ভাবছেন কাজ শেষ ? না আরও কাজ বাকি আছে , আখনি সেইভ করতে যাবেন না ।
  • এখন আবার  Ctrl+F দিয়ে    </head> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
 
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span/>");
 
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
 
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
 
});
</script>
  • এখন আবার  Ctrl+F দিয়ে     <div id='content-wrapper'> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।
1
2
3
4
5
6
7
8
<ul class='bh' id='topnav'>
<li><a href=='http://comtunesbd.blogspot.com/'>Home</a></li>
<li><a href='#http://comtunesbd.blogspot.com</a></li>
<li><a href='http://comtunesbd.blogspot.com'>Blog Design</a></li>
<li><a href='http://comtunesbd.blogspot.com'>Blog</a></li>
<li><a href='http://comtunesbd.blogspot.com/'>Blogspt Blog Design</a></li>
<li><a href='http://comtunesbd.blogspot.com/'>Blog Design Tutorial</a></li>
</ul>
  • এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে। আর আমি এখানে টেকটিউনসের লিংক এবং পাশে যে   Home,  Blogspot,  Blog Design,  Blog,  Blogspot Blog Design,  Blog Dsign Tutorial এই নাম গুলির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
  • এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।

Posted in: ,,

0 comments:

Post a Comment