ব্লগার ব্লগ এর জন্য সুন্দর একটি Drop down মেনু । দেখতে দারুন !



বন্ধুরা আজকে আমি আপনাদের জন্য নিয়ে এলাম দারুন একটি  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 এ ক্লিক করে সেভ করে নিন । তারপর ব্লগে গিয়ে দেখুন । 



কোন সমস্যা হলে জানাবেন আর পোস্ট গুল খুব কষ্ট করে লিখছি সুধুমাত্র আপনাদের জন্য । তাই ভাল লাগলে একটি কমেন্ট করে জানাবেন । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।


একটি মন্তব্য পোস্ট করুন

0 মন্তব্যসমূহ