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



.
आपके ब्लॉग के लिए साइड़ मेनू बार
यु तो  वर्डप्रेस में साइड़ मेनू बार  का ओपसन हें. पर ब्लॉगर के उपयोगकर्ता के लिए इसका ओपसन नहीं हें पर आप भी अपने ब्लॉगर ब्लॉग में  साइड़ मेनू बार का ओपसन जोड़ सकते हें. इसके लिए आपको अपने ब्लॉगर टेम्पलेट में कुछ बदलाव  करना पड़ेगा.
१:- सबसे पहले  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>


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

ड्रॉप डाउन

2 comments:

Dr (Miss) Sharad Singh ने कहा…

बहुत उपयोगी जानकारी....
हार्दिक शुभकामनायें।

http://samkalinkathayatra.blogspot.com/
पर भी आपका स्वागत है !

मनोज कुमार ने कहा…

क्रम संख्या ५ के बाद क्या करना है समझ में नहीं आया।
इसका उपयोग भी कृपया कर बताएं।

एक टिप्पणी भेजें

Related Posts Plugin for WordPress, Blogger...
| More

हिंदी में लिखें

विजेट आपके ब्लॉग पर