বন্ধুরা আজকে আমি আপনাদের জন্য নিয়ে এলাম দারুন একটি Drop down মেনু বার , এটা দেখতে খুবি সুন্দর এবং এটাকে আপনার ব্লগে যুক্ত করলে আপনার ব্লগে দ্যাখাবে আর সুন্দর । তাই নীচে থেকে এর ডেমো দেখে আসুন । আমি আশাকরি আপনাদের পছন্দ হবে । যুক্ত করার পধতিও খুব সোজা । আর দেরি করে লাভ কি ।
কিভাবে যুক্ত করবেন দেখে নিন নীচে !
1. আপনার ব্লগার ব্লগ ড্যাশবোর্ড এ যান তারপর Layout এ ক্লিক করুন ।
২. এবার Add a Gadget এ ক্লিক করে HTML/JavaScript করুন ।
3. এবার Content ঘরে নীচের কোডটি কপি করে পেস্ট করুন ।
<style>
/* The CSS Code for the menu starts here asobondhu.blogspot.com */
#asobondhuSimpleMenu {
width:900px;
background:#005C91;
border-bottom: 5px solid #1A1A1A;
border-top: 1px solid #1A1A1A;
clear: both;
overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}
#asobondhuSimpleMenu ul {
float: left;
width: 100%;
}
#asobondhuSimpleMenu li {
float: left;
list-style-type: none;
}
#asobondhuSimpleMenu li a {
background:#005C91;
color: 201C1C;
display: block;
font-size: 17px;
padding: 7px 19px 7px 17px;
position: relative;
text-decoration: none;
}
#asobondhuSimpleMenu li a:hover {
background:#201C1C;
color: #fff;
}
#asobondhuSimpleMenu li li a {
background: none;
background-color: #201C1C;
border: 1px solid #201C1C;
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 130px;
}
#asobondhuSimpleMenu li li a:hover {
background: none;
background-color: #005C91;
}
#asobondhuSimpleMenu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}
#asobondhuSimpleMenu li:hover ul {
left: auto;
}
</style>
<div id="asobondhuSimpleMenu">
<li><a href="#">Home</a></li>
<li><a href="#"> এসো বন্ধু 1</a>
<ul>
<li><a href="#"> এসো বন্ধু 1</a></li>
<li><a href="#"> এসো বন্ধু 2</a></li>
<li><a href="#"> এসো বন্ধু 3</a></li>
<li><a href="#"> এসো বন্ধু 4</a></li>
<li><a href="#"> এসো বন্ধু 5</a></li>
</ul>
</li>
<li><a href="#"> এসো বন্ধু 2</a>
<ul>
<li><a href="#"> এসো বন্ধু 1</a></li>
<li><a href="#"> এসো বন্ধু 2</a></li>
<li><a href="#"> এসো বন্ধু 3</a></li>
<li><a href="#"> এসো বন্ধু 4</a></li>
<li><a href="#"> এসো বন্ধু 5</a></li>
</ul>
</li>
<li><a href="#"> এসো বন্ধু 1</a></li>
<li><a href="#"> এসো বন্ধু 2</a></li>
<li><a href="#"> এসো বন্ধু 3</a></li>
<li><a href="#"> এসো বন্ধু 4</a></li>
<li><a href="http://www.asobondhu.blogspot.com/">এসো বন্ধু</a></li>
</div>
এবার একটু এডিট করে নিতে হবে নীচে দেখুন !
1. আপনি চাইলে কালার পরিবর্তন করে নিতে পারেন কোডে রঙ দিয়ে ঘিরা আছে ।
2. # এ গুল মুছে আপনার ব্লগ এর বিভিন্ন Url বসান ।
3. এসো বন্ধু মুছে সেখানে যে টাইটেল দিতে চান সেই নাম লিখুন ।
* ব্যাস এবার Save এ ক্লিক করে সেভ করে নিন । তারপর ব্লগে গিয়ে দেখুন ।
কোন সমস্যা হলে জানাবেন আর পোস্ট গুল খুব কষ্ট করে লিখছি সুধুমাত্র আপনাদের জন্য । তাই ভাল লাগলে একটি কমেন্ট করে জানাবেন । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।
Tags
ব্লগার