সবাই কেমন আছেন ?

আশা করি সবাই আল্লাহ্‌র রহমতে ভালো আছেন। আমিও আপনাদের দোয়া এবং আল্লাহ্‌র রহমতে ভালো আছি।

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

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

এটি আপনি খুব সহজেই করতে পারবেন । নিচের ধাপ গুলি একে একে অনুসরন করুন।

• প্রথমে আপনার ব্লগে সাইন লগ ইন করুন।
• তারপর Deshboard>Design>Edit Html  এ ক্লিক করুন।

• এখন  Ctrl+F দিয়ে   ]]></b:skin> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।

.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> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।

    <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'> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।

<ul class='bh' id='topnav'>
<li><a href=https://www.techtunes.io''>Home</a></li>
<li><a href='#https://www.techtunes.io>Blogspot</a></li>
<li><a href='https://www.techtunes.io'>Blog Design</a></li>
<li><a href='https://www.techtunes.io'>Blog</a></li>
<li><a href='https://www.techtunes.io'>Blogspt Blog Design</a></li>
<li><a href='https://www.techtunes.io'>Blog Design Tutorial</a></li>
</ul>

• এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে। আর আমি এখানে টেকটিউনসের লিংক এবং পাশে যে   Home,  Blogspot,  Blog Design,  Blog,  Blogspot Blog Design,  Blog Dsign Tutorial এই নাম গুলির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
• এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।

আশা করি সবাই সবাই পারবেন। তারপরও যদি কোন সমস্যা হয় আমিতো আছি। আর কোন ভুল হলে ক্ষমা সুন্দর দিষ্টিতে দেখবেন।

সবাই ভালো থাকুন, সুস্থ থাকুন, ভালবাসাসহ আপনাদেরই টেক লাভার সাব্বির  (আগের সেই আসিফ পাগলা সাব্বির)