Home » » ব্লগারে ড্রপ ডাউন মেনু তৈরি করবেন কিভাবে?

ব্লগারে ড্রপ ডাউন মেনু তৈরি করবেন কিভাবে?

Written By Ruhul on Wednesday

drop down menu


ব্লগারে সাধানত সাব মেনু থাকেনা। থিমকে কাস্টমাইজ করে এইচটিএমএল ও সিএসএস কোড দিয়ে সাব মেনু তৈরি করতে হয়। এখানে সাব মেনু তৈরির সম্পূর্ণ কোডগুলো দেয়া হলো শুধুমাত্র ব্লগার টেমপ্লেটে এ কোড গুলো বসিয়ে দিতে হবে। নিচের পদ্ধতিগুলো অনুসরণ করুন; 

ব্লগারে ড্রপ ডাউন মেনু তৈরি করবেন কিভাবে:


১। প্রথমে ব্লগারে লগইন করে Layout অপশনে যান। তারপর Add a Gadget ক্লিক করুন। 

২। এখন বিভিন্ন গ্যাজেটের একটি লিষ্ট আসবে এখান থেকে HTML/JavaScript গ্যাজেটটি ক্লিক করুন। 

৩। আরেকটি ডায়ালগ বক্স আসবে এখানে Content অপশনের ফাঁকা স্থানে নিচের কোডগুলো কপি করে পেস্ট করুন তারপর Save ক্লিক করুন:  
বি:দ্র: কোডগুলোর মধ্যে এই # চিহ্নটি মুছে দিয়ে সাব মেনু তৈরির প্রয়োজনীয় URL গুলো বসাতে হবে। 

 <ul id="menu_bar">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">Menu 0</a></li>  
  <li>  
   Menu 1  
   <ul>  
    <li><a href="#">Sub-menu 1</a></li>  
    <li><a href="#">Sub-menu 2</a></li>  
    <li><a href="#">Sub-menu 3</a></li>  
   </ul>  
  </li>  
 <li>  
   Menu 2  
   <ul>  
    <li><a href="#">Sub-menu 1</a></li>  
    <li><a href="#">Sub-menu 2</a></li>  
    <li><a href="#">Sub-menu 3</a></li>  
   </ul>  
  </li>  
  <li><a href="#">Menu 3</a></li>  
  <li><a href="#">Menu 4</a></li>  
 </ul>  



৪। এবার ব্লগার থিমের Template ক্লিক করুন তারপর Customize ক্লিক করুন। 

৫। এখন Advance ক্লিক করে Add CSS ক্লিক করলে ফাঁকা জায়গা দেখাবে সেখানে নিচের কোডগুলো কপি করে পেস্ট করুন এবং শেষে Apply to Blog ক্লিক করুন: 

 .tabs-inner .widget ul#menu_bar {  
  text-align: left;  
  display: inline;  
  margin: 0;  
  padding: 15px 4px 17px 0;  
  list-style: none;  
  border:none;  
 }  
 .tabs-inner .widget ul#menu_bar li {  
  font-size: 12px/18px;  
  font-family: sans-serif; /* Font for the menu */  
  display: inline-block;  
  margin-right: -4px;  
  position: relative;  
  padding: 15px 20px;  
  background: #fff; /* background colour of the main menu */  
  float:none;  
  cursor: pointer;  
  -webkit-transition: all 0.2s;  
  -moz-transition: all 0.2s;  
  -ms-transition: all 0.2s;  
  -o-transition: all 0.2s;  
  transition: all 0.2s;  
 }  
 .tabs-inner .widget ul#menu_bar li a {  
 padding:0;  
 font-family: sans-serif; /* Font for the menu links */  
 border:0;  
 }  
 .tabs-inner .widget ul#menu_bar li:hover {  
  background: #555; /* background colour when you roll over a menu title */  
  color: #fff; /* font colour when you roll over a menu title */  
 }  
 .tabs-inner .widget ul#menu_bar li:hover a {  
  background: transparent;  
  color: #fff; /* font colour when you roll over a menu title link */  
 }  
 .tabs-inner .widget ul#menu_bar li ul {  
  z-index:1000;  
  border:none;  
  padding: 0;  
  position: absolute;  
  top: 45px;  
  left: 30px;  
  float:none;  
  width: 150px;  
  -webkit-box-shadow: none;  
  -moz-box-shadow: none;  
  box-shadow: none;  
  display: none;  
  opacity: 0;  
  visibility: hidden;  
  -webkit-transiton: opacity 0.2s;  
  -moz-transition: opacity 0.2s;  
  -ms-transition: opacity 0.2s;  
  -o-transition: opacity 0.2s;  
  -transition: opacity 0.2s;  
 }  
 .tabs-inner .widget ul#menu_bar li ul li {  
  background: #555; /* background colour of the sub menu items */  
  display: block;  
  color: #fff; /* font colour of the sub menu items */  
  text-shadow: 0 -1px 0 #000;  
 }  
 ul#menu_bar li ul li a{  
  color:#fff /* link colour of the sub menu items */  
 }  
 .tabs-inner .widget ul#menu_bar li ul li:hover {  
  background: #666; /* background colour when you roll over sub menu items */  
 }  
 .tabs-inner .widget ul#menu_bar li:hover ul {  
  display: block;  
  opacity: 1;  
  visibility: visible;  
 }  


৬। এবার ব্লগটি ওপেন করে দেখুন।

0 comments:

Post a Comment

Designed by: Ruhul | Facebook | Twitter | Instagram
Copyright © 2018. Alamin Computer - All Rights Reserved