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

ব্লগের ভিজিটর যদি বাড়াতে চান তাহলে ব্লগে ভাল ভাল পোষ্টের সাথে সাথে দরকার ভাল এবং আর্কষনীয় একটি ডিজাইন। আসুন আজকে আমি শিখি কিভাবে ব্লগে ড্রপ ডাউন মেনু যুক্ত করতে হয়। প্রথমে আপনার ইমেইল অ্যাড্রেস ও পাসওয়ার্ড দিয়ে আপনার ব্লগে লগইন করুন। আর ব্লগ না থাকলে 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> এবং নিচের কোড এর পূর্বে পেষ্ট করুন।
 পড়ুন: কিভাবে My Computer থেকে ড্রাইভ ‍লুকিয়ে রাখবেন।
<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 এ পেষ্ট করুন।

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

Level 0

আমি অসীম কষ্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 39 টি টিউন ও 35 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি একজন ছাত্র পড়াশুনার ফাঁকে ফাঁকে কম্পিউটার নিয়ে ঘাটাঘাটি করি। এতে আমি যা জানতে পারি বা বুঝতে পারি তা বন্ধুদের সাথে শেয়ার করি। ঘুরে বেড়াতে ভাল লাগে একা একা থাকতে আর সারাদিন নাওয়া খাওয়া ছেড়ে কম্পিউটারের সাথে লেগে থাকতে ভাল লাগে। খুব বেশি বন্ধু তবে আমরা যখন একত্র হই তখন...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস