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

সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ

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

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

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

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

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

  • প্রথমে আপনার ব্লগে সাইন লগ ইন করুন।
  • তারপর 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 এই নাম গুলির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
  • এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।

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

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

Level 0

আমি সাব্বির আলম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 108 টি টিউন ও 869 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 9 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি মোহাম্মদ সাব্বির আলম ( আসিফ পাগলা সাব্বির ) । Google Adsense এর একজন পাবলিশার্স হিসাবে কাজ করছি। বর্তমানে SEO নিয়েই পরে থাকতে এবং সবার মাঝে শেয়ার করতেই ভালো লাগে। আর বাংলা ব্লগিং করাটাই সব চেয়ে বড় নেশা। আমার সম্পর্কে আরো বিস্তারিত জানতে অথবা লাইভ সাপোর্ট পেতে আমাকে ফেইসবুকে অ্যাড...


টিউনস


আরও টিউনস


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


টিউমেন্টস

ভাই। খুব ঝামেলায় আসি। ৭ দিন হইল ব্লগস্পট এ জয়েন করলাম। অনেক কিছুই Google আমারে দিল। কিন্তু এই যে খুইজা পাইলাম না পুরা টেমপ্লেট এর কোথাও এর কোনই সলুশান কোথাও পাইলাম না। আমার টেমপ্লেট এ এই ৪ টাই পাউয়া জায় শুধু <div id=' এই জিনিস লিখে সার্চ মারলে। বলা বাহুল্য Expand widget template চেকড থাকে। কোন সলুশান জানা থাকলে জানাবেন প্লিজ।

হুম ভালো হচ্ছে। কোড গুলো কোড হাইলাইটের সাহায্যে লিখলে দেখতে আরও ভালো লাগবে। ধন্যবাদ শেয়ার করার জন্য।

Level 0

3 fine করে পেলাম না। এখন কি করব?

ভাই এই code টি পেলাম না!!!!
help me plz!!

Level 0


Ctrl+F paoya jayne help me

prothomey sorry Bolsi banglish Liker Jonno. Boss kaj hoyece kintu 1 ta problem a poreci…apni
Menu dakiyacen 6 ti.Kintu amar Blog a Menu 9 ta.Jodi o 9 tai prodosson korse.6 ta Upore r 3 ta nice(down).Spbgulo 1 line a dekte chayle ki korte hobe please janaben.j Key Solution dile khub upoker hobe please help me ! r problem ta bujte na parle amar blog a deke solution din please please please…..

http://www.helptuner.blogspot.com

Level 0

code ta ami kuje passi na ki korbo help pls.

ভাই আপনার ব্লগ এর লিংকটা দেন……….

vai at khoje passi na .please help me.

apnar dewa keyword diye search dile “phrase not found” dekhai

Level 0

এখন Ctrl+F দিয়ে ]]> এই লিখাটি সার্চ করুন । কোডটি সার্চ করে পেলে নিচের কোড গুলি ঠিক আর উপরে বসিয়ে দিন।
busini kothi pest kotte hobe