Thursday, 7 May 2015

How To Create A Horizontal Menu Under The Header Blog

In making the Horizontal Menu in the blog there are placed below or above the blog header, there is a kind of manufacture dalai dropdown and without dropdown depending on needs. How to Create a Dropdown Menu Horizontal below header blog can be done with the following steps:
Sign in blog
Click Edit HTML
Tick ​​Expand Widget Templates
Find the code]]> </ b: skin> (use ctrl + F to facilitate the search)
Copy and paste the CSS code below and place it above the code]]> </ b: skin>
Click Preview to see the error
Click Save
.menu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Unicode Trebuchet MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.menu ul {
background: #FEFEFE;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
padding: 0px;
}
 .menu li {
float: left;
padding: 0px;
}
.menu li a {
background: #FEFEFE;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a: hover, .menu ul li: hover a {
background: #FEFEFE;
text-decoration: none;
}
.menu ul li {
background: #FEFEFE;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 1;
}
.menu li: hover ul {
display: block;
}
.menu li li {
background: #FEFEFE;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
.menu li: hover li a {
background: none;
}
.menu ul li a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu ul li a: hover, .menu li ul li: hover a {
background: #FEFEFE;
border: 0px;
color: #FEFEFE;
text-decoration: none;
}
Information
#FEFEFE Color code = Change color according to taste, to see HTML Color Code please Click Here

Installing the html code drop down menu in the layout of the blog under the Header

Click under the header layout
Click on HTML / Java Script
Copy and paste the following CSS code in the content column HTML / Java Script
Click Save and see the results
<Div style = "text / css">
<Ul class = "menu">
<Li> <a href="URL HOME blog"> HOME</a> </ li>
<Li> <a href="URL blog"> PROFILE </a> </ li>
<Li> <a href="URL blog">FACEBOOK </a> </ li>
<Li> <a href="URL blog"> TITLE 1 </a>
<Ul>
<Li> <a href="URL blog"> blog URL address TITLE 1 </a> </ li>
<Li> <a href="URL blog"> blog URL address TITLE 1 </a> </ li>
</ Ul> </ li>
<Li> <a href="URL blog"> TITLE 2 </a>
<Ul>
<Li> <a href="URL blog"> blog URL address TITLE 2 </a> </ li>
<Li> <a href="URL blog"> blog URL address TITLE 2 </a> </ li>
</ Ul> </ li>
<Li> <a href="URL address blog"> TITLE </a>
<Li> <a href="URL blog"> blog URL address TITLE </a>
<Li> </ li> </ ul>
</ Div>
Information
GREEN color code = Change the address and the title of the posting of his comrades




Do not Forget To Click Ads Help Available In Blog All About Tutorials ^ _ ^

Thus, hopefully useful, join the Facebook Grup 

NB: Please help if you can report dead links to BB PIN: 288BA288
Or can be via the comments below ...
That is all and thank you
Greetings Newbie ^ _ ^

No comments:

Post a Comment