আসুন শিখি কিভাবে ব্লগে ড্রপডাউন মেনু যুক্ত করা যায়

আসুন শিখি কিভাবে ব্লগে ড্রপডাউন মেনু যুক্ত করা যায়

ব্লগের ভিজিটর যদি বাড়াতে চান তাহলে ব্লগে ভাল ভাল পোষ্টের সাথে সাথে দরকার ভাল এবং আর্কষনীয় একটি ডিজাইন। আসুন আজকে আমি শিখি কিভাবে ব্লগে ড্রপ ডাউন মেনু যুক্ত করতে হয়। প্রথমে আপনার ইমেইল অ্যাড্রেস ও পাসওয়ার্ড দিয়ে আপনার ব্লগে লগইন করুন। আর ব্লগ না থাকলে http://www.blogspot.com এই খানে একটি ফ্রি ব্লগ করুন। এর পরে পরবতী ধাপগুলো অনুসরন করুন।
১। প্রথমে আপনার ব্লগের বর্তমান টেম্পলটি ব্যাকাপ করুন।
২। এবার Dashboard থেকে Temple এ যান।
৩। Temple এ যাবার পরে সেখান থেকে Edit HTML এর উপরে ক্লিক করুন।

৪। এবার কোডগুলোর মধ্যথেকে খুজে বের করুন  ]]></b:skin>  আর এর পূর্বে নিচের কোডটি পেষ্ট করুন।

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

৫। এবার আবার খুজে বার করুন </head> এবং নিচের কোড এর পূর্বে পেষ্ট করুন।
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

৬। এবার ‍Save Template এ ক্লিক করে টেম্পলটি সেইব করুন।
৭। এবার Page element থেকে Add Gadget এ ক্লিক করুন এবং নামের Add Gadget যুক্ত করুন।
৮। এখন নিচের কোড় টা HTML/JavaScript Gadget এ পেষ্ট করুন।

 আপনার মেনু যোগ করার কাজ শেষ তবে আর একটি কাজ আছে আমার ব্লগটা একটু দেখুন তো কেমন হয়েছে।