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



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


এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

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

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

নবীনতর পূর্বতন

نموذج الاتصال