आपके ब्लॉग के लिए ड्रॉप डाउन मेनू बार......

.

आपके ब्लॉग के लिए साइड़ मेनू बार

यु तो  वर्डप्रेस में साइड़ मेनू बार  का ओपसन हें. पर ब्लॉगर के उपयोगकर्ता के लिए इसका ओपसन नहीं हें पर आप भी अपने ब्लॉगर ब्लॉग में  साइड़ मेनू बार का ओपसन जोड़ सकते हें. इसके लिए आपको अपने ब्लॉगर टेम्पलेट में कुछ बदलाव  करना पड़ेगा.

१:- सबसे पहले  edit HTML पर जाये

२:- डाउनलोड फुल टेम्पलेट

३:- Expand Widget Templates पर क्लिक करे

४:- अब </head> को सर्च करे

५:-</head> से बिलकुल पहले निचे दिया गया कोड कॉपी करे

<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #5970B2;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #49A3FF}

#sddm div

{ position: absolute;

visibility: hidden;

margin: 0;

padding: 0;

/*background color of drop down menu */

background: #FFFFFF;

/*border of the drop down menu*/

border: 1px solid #5970B2}

#sddm div a

{ position: relative;

display: block;

margin: 0;

padding: 5px 10px;

width: auto;

white-space: nowrap;

text-align: left;

text-decoration: none;

/*background color of each menu element*/

background: #FFFFFF;

/*text color of each menu element*/

color: #2875DE;

/*font of each menu element*/

font: 11px arial}

#sddm div a:hover

{

/*background of each element on hover*/

background: #49A3FF;

/*font color of each menu item on hover*/

color: #FFFFFF}

</style>

<script type='text/javascript'>

var timeout = 500;

var closetimer = 500;

var ddmenuitem = 0;

// open hidden layer

function mopen(id)

{

// cancel close timer

mcancelclosetime();

// close old layer

if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it

ddmenuitem = document.getElementById(id);

ddmenuitem.style.visibility = &#39;visible&#39;;

}

// close showed layer

function mclose()

{

if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

}

// go close timer

function mclosetime()

{

closetimer = window.setTimeout(mclose, timeout);

}

// cancel close timer

function mcancelclosetime()

{

if(closetimer)

{

window.clearTimeout(closetimer);

closetimer = null;

}

}

// close layer when click-out
document.onclick = mclose;
</script>

६:-अब drop down menu को अपनी आवश्यकता अनुसार एडिट करे

MENU मुख्यतः तिन भागो से बना हे

टेब की चोडाइ 123 px. हें. आप अपनी सुविधा अनुसार बदल सकते हें.

1. Main Menu

2. Drop Down Menu

3. Element of Drop Down Menu

यहाँ पर

७:- मेनू को जोड़ने के लिए  Design>Page Elements पर क्लिक करे फिर Add Gadget पर क्लिक करे.

और  HTML/JAVASCRIPT को चुनकर निचे दिया गया कोड कोपी पेस्ट करे.

<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

# की जगह पर अपनी लिंक लगाये और नीले कलर वाली जगह पर नाम भरे.

और drop down मेनू तैयार हें demo site  देखने के लिए यहाँ चटका लगाये

ड्रॉप डाउन