Tags (Categories or sections) in the form of a menu of tabs or flaps -72 -
Some websites are a menu of tabs horizontally for better navigation. Probably for some it is quite useful for fast and easy page navigation.
to start putting our menu tabs on the blog we have to label
all our post. 1. Go
template design, then Edit HTML and click Expand Widget Templates and seek the following:
\u0026lt;b: section class = "header" id = "header" maxwidgets = "1
" showaddelement = " not ">
* Change values \u200b\u200bmawidgets =" 2
"and showaddelement =" yes
.
Saturday, August 18, 2007
Coboalt Power Steering Fluid Fill
2.
After looking for the widget with ID Label1 and the title tags. This you find where it says: 
\u0026lt;div id='sidebar-wrapper'>
\u0026lt;div id='sidebar-wrapper'> \u0026lt;b:section class='sidebar' id='sidebar' preferred='yes'> 
\u0026lt;b: widget id = 'Label1' locked = 'false' title = 'Tags' type = 'Label'>
\u0026lt;b:includable id='main'> \u0026lt;b:if cond='data:title'> \u0026lt;h2 > \u0026lt;data:title> \u0026lt;h2> \u0026lt;b:if> \u0026lt;div class='widget-content'> \u0026lt;ul> \u0026lt;b:loop values='data:labels' var='label'>
\u0026lt;li>
\u0026lt; ; b: if cond = 'data: blog.url == Data: label.url'> \u0026lt;data:label.name/> \u0026lt;b:else/>
\u0026lt;a expr: href = 'data: label.url '> \u0026lt;? xml: namespace prefix = data /> 
\u0026lt;b: widget id = 'Label1' locked = 'false' title = 'Tags' type = 'Label'>
\u0026lt;b:includable id='main'> \u0026lt;b:if cond='data:title'> \u0026lt;h2 > \u0026lt;data:title> \u0026lt;h2> \u0026lt;b:if> \u0026lt;div class='widget-content'> \u0026lt;ul> \u0026lt;b:loop values='data:labels' var='label'>
\u0026lt;li>
\u0026lt; ; b: if cond = 'data: blog.url == Data: label.url'> \u0026lt;data:label.name/> \u0026lt;b:else/>
\u0026lt;/ data: label.name> \u0026lt;/ a> \u0026lt;/ b: if> (\u0026lt;data: label.count / >) \u0026lt;/ li> \u0026lt;/ b: loop>
\u0026lt;/ ul> \u0026lt;b:includable name='quickedit'/> \u0026lt;/ div> \u0026lt;/ b: includable> \u0026lt;/ b: widget>
3.
Once located, you have to replace all the previous code as follows:
\u0026lt;b:widget id='Label1' locked='false' title='' type='Label'> \u0026lt;b : includable id = 'main'> \u0026lt;div id='tabsE'>
\u0026lt;ul> \u0026lt;b:widget id='Label1' locked='false' title='' type='Label'> \u0026lt;b : includable id = 'main'> \u0026lt;div id='tabsE'>
\u0026lt;li> \u0026lt;a expr:href='data:blog.homepageUrl'> \u0026lt;span> Home \u0026lt;/ span> \u0026lt;/ a> \u0026lt;/ li> \u0026lt;b:loop
\u0026lt;li> \u0026lt;a expr:href='data:label.url'> \u0026lt;span> \u0026lt;data: label . name /> \u0026lt;/ span> \u0026lt;/ a> \u0026lt;/ li> \u0026lt;/ b: loop>
\u0026lt;/ ul>
\u0026lt;! - \u0026lt;b: include name = 'QuickEdit' / > ->
\u0026lt;/ div>
\u0026lt;/ b: includable>
\u0026lt;/ b: widget>
4. We
in the template. The code following leave for last, because it refers menu style, which may make changes, using your criteria. The code will need to paste between \u0026lt;b:skin> \u0026lt;! [CDATA [and ]]>\u0026lt;/ b: skin>. Preferable that hit near the end (before ]]>\u0026lt;/ b: skin>), it may be that at some point, do not want this and you will make it easier to locate it to delete it.
/ *- Menu Tabs E --------------------------- * / # tabs
{float: left;
width : 100%;
background: # 000;
font-size: 93%
line-height:normal;
}
#tabsE ul {
margin:0; padding:10px 10px 0 50px; list-style:none;
} #tabsE li {
display:inline; margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left; display:block;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tabrightE.gif") no-repeat right top; padding:0;
}
#tabsE a {
float:left;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left; display:block;
padding:5px 15px 4px 6px;
color: # FFF;} / * Commented Backslash Hack hides rule from IE5-Mac \\ * / # tabs a span
{float: none;}
/ * End IE5-Mac hack * / # {float: none;}
tabs a: hover span {
color: # FFF;}
# tabs a: hover {background-position
: 0%-42px;}
# tabs a: hover span {
background-position: 100%-42px ;}
which says:
# tabs ul {
margin: 0;
padding: 10px 50px 10px 0
;
number 50 refers to the adjustment, ie move to the left, for example change it to 0 and see what happens.
then below says, padding:
5px 15px 4px 6px;
the number 5 refers to the space, for example cambailo to 0 and see what happens.
Note:
I'll provide some menu styles that I uploaded to Photobucket for you to use on your blog. But using a style, you have to make a simple modification.
Tabs A Color of Tabs: White
Tabs B
Color of Tabs: Grey
Tabs C
# tabs a: hover {background-position
: 0%-42px;}
# tabs a: hover span {
background-position: 100%-42px ;}
which says:
# tabs ul {
margin: 0;
padding: 10px 50px 10px 0
;
number 50 refers to the adjustment, ie move to the left, for example change it to 0 and see what happens.
then below says, padding:
5px 15px 4px 6px;
the number 5 refers to the space, for example cambailo to 0 and see what happens.
Note:
I'll provide some menu styles that I uploaded to Photobucket for you to use on your blog. But using a style, you have to make a simple modification.
Tabs A Color of Tabs: White
Tabs B
Color of Tabs: Grey
Tabs C
Color of Tabs: Green
Tabs D
Color of Tabs: Rosas
Tabs E Color of Tabs:
Rojas
Tabs F
Color of Tabs: Celeste Tabs G
Color of Tabs: Blue Tabs
H Color of Tabs: Black
Tabs I Color of Tabs:
Oranges Tabs J Color of Tabs: Crystal
Tabs K Color of Tabs: Cafe For example, if you use the style to, then you go to step 2 \u0026lt;div id='tabsF'> and you change the id for the style you've chosen. In this case we have chosen the style then it would be A, \u0026lt;div id='tabsA'> 5. Finally when you go to save the changes you will probably come out a message:
are about to be deleted gadgets Please confirm that the following widgets should be deleted. Will erase all configuration information for the devices. Label1
• Confirm and save Just keep and confirm. Note: To that is all this must go to Page Elements
and drag Tags rinsing under the header.
Tabs D
Color of Tabs: Rosas
Tabs E Color of Tabs:
Rojas
Tabs F
Color of Tabs: Celeste Tabs G
Color of Tabs: Blue Tabs
H Color of Tabs: Black
Tabs I Color of Tabs:
Oranges Tabs J Color of Tabs: Crystal
Tabs K Color of Tabs: Cafe For example, if you use the style to, then you go to step 2 \u0026lt;div id='tabsF'> and you change the id for the style you've chosen. In this case we have chosen the style then it would be A, \u0026lt;div id='tabsA'> 5. Finally when you go to save the changes you will probably come out a message:
are about to be deleted gadgets Please confirm that the following widgets should be deleted. Will erase all configuration information for the devices. Label1
• Confirm and save Just keep and confirm. Note: To that is all this must go to Page Elements
and drag Tags rinsing under the header.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment