There are pingin create a horizontal menu but dont know how? Gini ya do, eh but wait, it apasih horizontal menu? Horizontal menus are menus that are arranged horizontally (sideways). Like this is you know:
For example you can see here. Nha pingin not? Quote pingin can follow these steps:
first you have to have a picture like this ya:
and
if do not have how? kalo pake not have this image that I sediain aja.
blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif redright.gif
unguleft.gif unguright.gif
yellowleft.gif yellowright.gif
blueleft.gif blueright.gif
whiteleft.gif whiteright.gif
Ok, the ingredients sudha there, let's start maraciknya: 1. Login to blogger then choose Layout -> Edit HTML, trus check the box "Expand Widget Templates". Do not forget to backup the template first. 2. Find a script like this ]]></ b: skin>, if already see you copy the script below and put it on top
/ * Credits: http://trik-tips.blogspot.com * / # Tabshori { float: left; width: 100%; font-size: 13px; border-bottom: 1px solid # 2763A5; / * Underline * / line-height: normal; } # Tabshori ul { margin: 0; padding: 10px 10px 0 50px; / * Position Menu * / list-style: none; } # Tabshori li { display: inline; margin: 0; padding: 0; } # Tabshori a { float: left; background: url ("http://kendhin.890m.com/menu/blackleft.gif") no-repeat top left; margin: 0; padding: 0 0 0 4px; text-decoration: none; } # Tabshori a span { float: left; display: block; background: url ("http://kendhin.890m.com/menu/blackright.gif") no-repeat top right; padding: 5px 14px 4px 4px; color: # fff; } / * Commented backslash hack hides rule from IE5-Mac \ * / # Tabshori a span {float: none;} / * End IE5-Mac hack * / # Tabshori a: hover { background-position: 0%-42px; } # Tabshori a: hover span { background-position: 100%-42px; }
Bold text you can replace with the pictures (the text below the image) above earlier. For example, if you select the color red then the script will be like this;
background: url ("http://kendhin.890m.com/menu/redleft.gif") no-repeat top left;
background: url ("http://kendhin.890m.com/menu/redright.gif") no-repeat top right;
Mudeng not loe: D Kalo is over let's move on, until what number again? oh yes yes to all three figures. 3. Copy the following script
<div id="tabshori"> <ul> <a href="http://trik-tips.blogspot.com"> <span> Home </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span>-Tips Tricks </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span> Free Templates </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span> Dictionary </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span> Profile </ span> </ a> </ li> </ Ul> </ Div>
4. Replace http://trik-tips.blogspot.com with links that you want to go. These links can be either another address or a link blog posts km. To get a link posts do right click on the title postingannya then choose "copy link location" (for mozilla firefox). Then the bold text you can replace with the text you like. Text is the text that appears in the button / menu. 5. How to install there are several kinds depending on the template used, one example of this is put find the following code:
<div id="content-wrapper">
let nyari easy way, copy the script above and press Ctrl-f and then paste it in the find box, direct nha met her. If already met an earlier copy of the script above
6. Save the edit. 7. See the results. 8. if the results are less good / messy try this script be moved into place, eg moving keatasnya the above code </ div>. Kalao not fit as well place a try again the above or well below it, so continue until you find a suitable place. 9. If still not managed to try it this way: - Locate the following code:
<B: section class = 'header' id = 'header' maxwidgets = '1 'showaddelement =' no '> <B: widget id = 'Header1' locked = 'true' title = 'your blog title (Header)' type = 'Header' /> </ B: section>
teru replace the text in green sihingga be like this:
<B: section class = 'header' id = 'header' maxwidgets = '2 'showaddelement =' yes'> <B: widget id = 'Header1' locked = 'false' title = 'your blog title (Header)' type = 'Header' /> </ B: section>
continue in the Save
Click Page Elements tab, then in the header area click Add a page element and select HTML / JavaScript and paste the script link in the box was kept stored content, it's place nha above, try to drag it down slightly, nha so, continue to save and see the results.
the result would be different in each template. How successful is your clever, I fail means you are less clever: r try again examined the steps and understood meaning, not just in plototin. Boz OK, Good luck .....
For example you can see here. Nha pingin not? Quote pingin can follow these steps:
first you have to have a picture like this ya:
and
if do not have how? kalo pake not have this image that I sediain aja.
blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif redright.gif
unguleft.gif unguright.gif
yellowleft.gif yellowright.gif
blueleft.gif blueright.gif
whiteleft.gif whiteright.gif
Ok, the ingredients sudha there, let's start maraciknya: 1. Login to blogger then choose Layout -> Edit HTML, trus check the box "Expand Widget Templates". Do not forget to backup the template first. 2. Find a script like this ]]></ b: skin>, if already see you copy the script below and put it on top
/ * Credits: http://trik-tips.blogspot.com * / # Tabshori { float: left; width: 100%; font-size: 13px; border-bottom: 1px solid # 2763A5; / * Underline * / line-height: normal; } # Tabshori ul { margin: 0; padding: 10px 10px 0 50px; / * Position Menu * / list-style: none; } # Tabshori li { display: inline; margin: 0; padding: 0; } # Tabshori a { float: left; background: url ("http://kendhin.890m.com/menu/blackleft.gif") no-repeat top left; margin: 0; padding: 0 0 0 4px; text-decoration: none; } # Tabshori a span { float: left; display: block; background: url ("http://kendhin.890m.com/menu/blackright.gif") no-repeat top right; padding: 5px 14px 4px 4px; color: # fff; } / * Commented backslash hack hides rule from IE5-Mac \ * / # Tabshori a span {float: none;} / * End IE5-Mac hack * / # Tabshori a: hover { background-position: 0%-42px; } # Tabshori a: hover span { background-position: 100%-42px; }
Bold text you can replace with the pictures (the text below the image) above earlier. For example, if you select the color red then the script will be like this;
background: url ("http://kendhin.890m.com/menu/redleft.gif") no-repeat top left;
background: url ("http://kendhin.890m.com/menu/redright.gif") no-repeat top right;
Mudeng not loe: D Kalo is over let's move on, until what number again? oh yes yes to all three figures. 3. Copy the following script
<div id="tabshori"> <ul> <a href="http://trik-tips.blogspot.com"> <span> Home </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span>-Tips Tricks </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span> Free Templates </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span> Dictionary </ span> </ a> </ li> <a href="http://trik-tips.blogspot.com"> <span> Profile </ span> </ a> </ li> </ Ul> </ Div>
4. Replace http://trik-tips.blogspot.com with links that you want to go. These links can be either another address or a link blog posts km. To get a link posts do right click on the title postingannya then choose "copy link location" (for mozilla firefox). Then the bold text you can replace with the text you like. Text is the text that appears in the button / menu. 5. How to install there are several kinds depending on the template used, one example of this is put find the following code:
<div id="content-wrapper">
let nyari easy way, copy the script above and press Ctrl-f and then paste it in the find box, direct nha met her. If already met an earlier copy of the script above
6. Save the edit. 7. See the results. 8. if the results are less good / messy try this script be moved into place, eg moving keatasnya the above code </ div>. Kalao not fit as well place a try again the above or well below it, so continue until you find a suitable place. 9. If still not managed to try it this way: - Locate the following code:
<B: section class = 'header' id = 'header' maxwidgets = '1 'showaddelement =' no '> <B: widget id = 'Header1' locked = 'true' title = 'your blog title (Header)' type = 'Header' /> </ B: section>
teru replace the text in green sihingga be like this:
<B: section class = 'header' id = 'header' maxwidgets = '2 'showaddelement =' yes'> <B: widget id = 'Header1' locked = 'false' title = 'your blog title (Header)' type = 'Header' /> </ B: section>
continue in the Save
Click Page Elements tab, then in the header area click Add a page element and select HTML / JavaScript and paste the script link in the box was kept stored content, it's place nha above, try to drag it down slightly, nha so, continue to save and see the results.
the result would be different in each template. How successful is your clever, I fail means you are less clever: r try again examined the steps and understood meaning, not just in plototin. Boz OK, Good luck .....
0 komentar:
Post a Comment