பகுதி:2 பிளாக்கரில் புதிய Menu Bar ஐ எப்படி உருவாக்குதல்?

முந்திய பதிவில் சில வாசகர்களுக்கு விளங்க வில்லை  அதனால் இது சரியாக விளங்கும் என்று நினைக்கின்றன்

1.முறை
Login to Blogger Dashboard > Design > Edit HTML and find following in your template

</head>

இந்த கீழ் Code ஐ Paste பண்ணுங்க.......

<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

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

#jsddm li a
{ display: block;
background: #00217b; /*Purple*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{
padding: 4px 9px;
background: #24313C
}

#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: #bd9cc5; /*Light Purple*/
color: #242628}

#jsddm li ul li a:hover
{ background: #e7bff1}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

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

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

$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;
</script>

பின் Save Template செய்து கொள்ளக.


2.முறை
Go to Page Elements > Add a Gadget > HTML/Java Script and add following code into it and save.

<ul id="jsddm">
<li><a href="http://film-cast.blogspot.com">Hollywood</a>
<ul>
<li><a href="http://film-cast.blogspot.com/search/label/Movie">Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Hollywood%20Featured%20Stories?&amp;max-results=6">Featured Stories</a></li>

</ul>
</li>

<li><a href="http://film-cast.blogspot.com">Bollywood</a>
<ul>
<li><a href="http://film-cast.blogspot.com/search/label/Hindi%20Movies?&amp;max-results=6">Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Upcoming%20Hindi%20Movies?&amp;max-results=6">Upcoming Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Music?&amp;max-results=6">Music</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Featured%20Stories?&amp;max-results=6">Featured Stories</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Hindi%20Video%20Songs?&amp;max-results=6">Video Songs</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Stars?&amp;max-results=6">Stars &amp; Superstars</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Poster%20%2F%20Wallpapers?&amp;max-results=6">Wallpapers/Posters</a></li>
</ul>
</li>

<li><a href="http://www.getlyricz.com/">Hindi Lyrics</a></li>

<li><a href="http://blogger-help.com/">Blogger Help</a></li>

</ul>

 Save செய்க......

 பின் Orage நிறத்தில் காணப்படும் Link ஐ மாற்றுக.......
நன்றி..................