૧. સૌપ્રથમ તમારૂ ડેશબોર્ડ ખોલી લેઆઉટમાં જાઓ.
૨. લે-આઉટમાં કોઈપણ જગ્યાએથી એક ગેજેટ ઉમેરો પર ક્લિક કરો.
૩. ખુલેલા લીસ્ટમાંથી HTML/JAVA સ્ક્રીપ્ટ વાળો ઓપ્શન પસંદ કરી તેના પર ક્લિક કરો.
૪. મથાળું કોરું રાખો પણ નીચેની જગ્યા પર નીચે આપેલો CODE કોપી કરી પેસ્ટ કરી લો.
૫.#ની જગ્યાએ તમારા પેજની લીંક પેસ્ટ કરો.
૬.યોગ્ય જગ્યાએ મેનુનું નામ આપો.
- નીચેનાં બોક્ષમાંથી કોડ કોપી કરવા માટે આપના બ્રાઉઝરની જાવાસ્ક્રીપ્ટ ડિસેબલ કરી કોડ સિલેક્ટ કરો અનેરાઈટ ક્લિક કરી કોપી કરો.ત્યારબાદ જાવાસ્ક્રીપ્ટ ઇનેબલ કરી દો.અને પછી કોડ પેસ્ટ કરો.
- CODE:-
/* ######### Drop Down Menu Bu HelperBlogger.com ######### */
/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div {
/*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a {
display: block;
width: 170px;
/*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li {
/*IE6 CSS hack*/
display: inline-block;
width: 170px;
/*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover {
background-color: black;
color: white;
}
.downarrowpointer {
/*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer {
/*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim {
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}
.mattblackmenu li {
display: inline;
margin: 0;
}
.mattblackmenu li a {
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px;
/*padding inside each tab*/
border-right: 1px solid white;
/*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited {
color: white;
}
.mattblackmenu li a:hover {
background: black;
/*background of tabs for hover state */
}
.mattblackmenu a.selected {
background: black;
/*background of tab with "selected" class assigned to its LI */
}