మీ బ్లాగుకు ఆటోస్క్రోల్ సైడ్ మెనూ కావాలా? ఐతే ఇది చదవండి.

ఈ బ్లాగులో ఎడమవైపున ఉన్న సైడ్ మెనూను గమనించండి. ఇలాంటి మెనూ మీ బ్లాగులో కూడా పెట్టాలను కుంటే ఈ ట్యుటోరియల్ ను ఫాలో అవండి. చాలా సులభంగా మీరు కూడా మీ బ్లాగులో ఇలాంటి సైడ్ మెనూ పెట్టుకొని మీకిష్టం వచ్చినట్లుగా లింకులు ఇచ్చుకోవచ్చు.

1.మొదట ఈ క్రింది లింకు నుండి 2 జావాస్క్రిప్ట్ ఫైల్స్ ను డౌన్లోడ్ చేస్కోండి.
download


2. ఇపుడు ssmItems.js ఫైల్ మీద రైట్ క్లిక్ చేసి ఓపెన్ విత్ క్లిక్ చేసి Notepad తో ఓపెన్ చేయండి. కోడ్ ఈ క్రింది విధంగా కనిపిస్తుంది. ఈ కోడ్ లో గ్రీన్ కలర్ అక్షరాల ప్లేస్ లో మెనూటైటిల్స్ మీకు కావలసిన విధంగా రీప్లేస్ చేయండి. తర్వాత రెడ్ కలర్ అక్షరాల ప్లేస్ లో url లింక్స్ ఇచ్చి సేవ్ చేయండి. ఇలా మీరు ఎన్ని మెనూ టైటిల్స్ అయినా యాడ్ చేస్కోవచ్చు.



<!--


/*

Configure menu styles below

NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors

*/

YOffset=150; // no quotes!!

XOffset=0;

staticYOffset=30; // no quotes!!

slideSpeed=20 // no quotes!!

waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.

menuBGColor="black";

menuIsStatic="yes"; //this sets whether menu should stay static on the screen

menuWidth=150; // Must be a multiple of 10! no quotes!!

menuCols=2;

hdrFontFamily="verdana";

hdrFontSize="2";

hdrFontColor="white";

hdrBGColor="#170088";

hdrAlign="left";

hdrVAlign="center";

hdrHeight="15";

linkFontFamily="Verdana";

linkFontSize="2";

linkBGColor="white";

linkOverBGColor="#FFFF99";

linkTarget="_top";

linkAlign="Left";

barBGColor="#444444";

barFontFamily="Verdana";

barFontSize="2";

barFontColor="white";

barVAlign="center";

barWidth=20; // no quotes!!

barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.


///////////////////////////


// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

ssmItems[0]=["MENU"] //create header

ssmItems[1]=["Home", "http://superblogtutorials.blogspot.com/", ""]

ssmItems[2]=["SysWorld", "http://mahigrafix.blogspot.com/",""]

ssmItems[3]=["TeluguHelp", "http://telugukeyboards.blogspot.com/", ""]

ssmItems[4]=["Mahi-Forum", "http://mahi.in-goo.net/forum.htm", "_new"]

ssmItems[5]=["Email", "mahigrafix@gmail.com", ""]

ssmItems[6]=["External Links", "", ""] //create header

ssmItems[7]=["WebHosting", "http://x51host.com/", ""]

ssmItems[8]=["ComputerEra", "http://computerera.co.in/forum/index.php", ""]


buildMenu();


//-->






3. ఇపుడు ssm.js, ssmItems.js ఈ రెండు ఫైళ్లను మీ సొంత సర్వర్ లోకి అప్ లోడ్ చేయండి. ఒకవేళ మీకు సొంత సర్వర్ లేకపోతే యాహూజియోసిటీస్ లోకి లోడ్ చేసి ఈ రెండ్ ఫైళ్ల పాత్ ను కాపీ చేసి పెట్టుకోండి.

4. ఈ క్రింది కోడ్ ను కాపీ చేస్కొని ఈ కోడ్ లో రెడ్ లెటర్స్ ప్లేస్ లో మీరు 3 వ స్టెప్ లో కాపీ చేసి పెట్టుకున్న ఫైల్ పాత్ లను రీప్లేస్ చేయండి.



<style type="text/css">

<!--

A.ssmItems:link {color:black;text-decoration:none;}

A.ssmItems:hover {color:black;text-decoration:none;}

A.ssmItems:active {color:black;text-decoration:none;}

A.ssmItems:visited {color:black;text-decoration:none;}

//-->

</style>


<SCRIPT SRC="http://www.mahigrafix.com/javascript/ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)

//Updated July 8th, 03' for doctype bug

//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="http://www.mahigrafix.com/javascript/ssmItems.js" language="JavaScript1.2"></SCRIPT>




5. ఇపుడు బ్లాగర్.కామ్ లో మీ అకౌంట్ లోకి లాగిన్ అయి Layout - Edit HTML ను క్లిక్ చేయండి. మీ టెంప్లేట్ HTML Code లో </head> ట్యాగ్ ఎక్కడ ఉందో కనుక్కోండి. 4 వ స్టెప్ లో కాపీ చేస్కున్న కోడ్ ను కరెక్ట్ గా </head> ట్యాగ్ పై లైన్ లో వచ్చేటట్లు పేస్ట్ చేసి ప్రివ్యూ బటన్ ను క్లిక్ చేయండి. ఓకే అయితే సేవ్ చేయండి.