আপনার ব্লগে mnsoftbd মত Cool Drop Down Menu তৈরী করুন।

আসসালামু‘আলায়কুম. সবাইকে শীতের উঞ্চ শুভেচ্ছা এবং অভিনন্দন। আমরা যারা ব্লগে ভিজিট করে তাদের কম বেশী সবারই একটি ব্লগ সাইট আছে। আপনার ব্লগ সাইটের মেনু বারটি করে ফেলুন কলার ড্রপ ডাউন মেনু ঠিক mnsoftbd এর মেনু বারের মত। আসুন কাজ শুরু করি।

 

 www.blogger.com এর লিংকে গিয়ে আপনার ব্লগ সাইটটি ওপেন করুন।

 ব্লগ সাইটটি ওপেন হলে সেখান থেকে Template আপশনে যান ।Template থেকে আগে আপনার ব্লগটি ব্যাক আপন নিয়ে নিন। তারপর Edit HTML এ ক্লিক করুন। HTML ফরমেট আসবে। এবার Search বক্স এ </header> লিখে এন্টর চাপুন।</header> লেখাটি খোঁজে পেলে তার ঠিক নিচে নিম্মের কোডটি কপি করে পেষ্ট করুন। 

<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {               
 display: inline;               
 list-style: none;               
 padding: 0;           
 }                   

 #menu li a {                                 
 padding: 15px 20px 15px 20px;               
 text-decoration: none;               
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
  
  
}
 #menu li a:hover {                                 

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>

এখানে (এ কোডগুলো কপি করতে হবেনা যা উপরে দেওয়া আছে)

<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li> 

এ # চিহ্নটি তুলে আপনার ব্লগ লিংকটি দিন। সাথে নামও পরিবর্তন করতে পারবেন । এবার আপনার টেম্পলেটটি সংরক্ষণ করুন। এবং ব্লগে গিয়ে দেখুন আপনার মেনু বারটি ড্রপ ডাউন মেনু বারে রুপান্তর হয়ে গেছে।

ধন্যবাদ সাবাইকে আপনার মতামত আমাদের খুবই গুরুত্বপূর্ণ

বিকল্প পদ্ধতি দেখার জন্য ভিডিও টি দেখুন----------